JAMstack っぽいの

たのしい!

2019.02.06

About

mimi(yumi)

シュフ、ニジノハハ

HTML, Sass, npm-scripts, PHP, Vue.js, Drawing, Knitting etc.

名前:

生業:

好きな技術:

 

気になる技術:

 

WordPress歴:

WordPressの好きなところ:

10年余

オープンソース、REST API

@miminari

Nuxt.js, Python

JAMstack とは?

JavaScript

APIs

Markup

クライアントサイドJavaScript、

再利用可能なAPI、

マークアップの3つを組み合わせた モダンなウェブ開発のスタック

jamstack.org

たとえばこんなの ?

  • AWS
  • GraphQL
  • Firebase
  • Node
  • React, Gatsby
  • Vue, Nuxt
  • Webpack etc.
  • netlify
  • Contentful

定義はどうでもいい。

ていうかごちゃごちゃしてよくわからんです。

つまり早くて、強くて、安全

なのは

静的ページだよね

WEB一周したのか

WEB は結局

"HTML" である。

「なんだ静的ページ さいきょうじゃん」

Vueなサイトジェネレーター。

GatsbyのVue版。

 

推しの理由は単にVueのほうがふわっとしてて好きだからです。

そんなふわっとした理解の

私の推しは

使い方

ローカルでもどこでもWordPressのURLだけで、REST APIをGraphQLに変換してくれて、添付画像も全部ひっぱれて、ちょっと怖いくらいサクッと静的ページが生成できます。

 

npm install --global @gridsome/cli
gridsome create my-gridsome-site wordpress
module.exports = {
  plugins: [
    {
      use: '@gridsome/source-wordpress',
      options: {
        baseUrl: 'http://local.wordpress/', // required
        typeName: 'WordPress', // GraphQL schema name (Optional)
        perPage: 100, // How many posts to load from server per request (Optional)
        concurrent: 10, // How many requests to run simultaneously (Optional)
        routes: {
          post: '/:year/:month/:day/:slug', //adds route for "post" post type (Optional)
          post_tag: '/tag/:slug' // adds route for "post_tag" post type (Optional)
        }
      }
    }
  ]
}

Install

Create

Config

Build

gridsome build

(※ちゃんとしたサイトはREST API を使う予定ないなら基本オフで!)

日本ではどんなサイトがJAMstackぽいもので出来ているのか?

えっじなひとの界隈では賑わっているけれど、

?

でかい事例が

みつからぬ。。。

夫の事例

  • アクセス数の多さに耐える
  • 記事自体にアクセスする人を制限(会員制)

 

とある有名企業の

かなりのユーザー数が見込まれる会員制サイト

Problem

「 WordPress縛り 」

one more thing...

  1. WordPress記事作成
  2. WordPressプラグイン静的ファイル書き出し
  3. S3にアップロード
  4. CloudFront署名付きCookieで制限

Solution

WordPressはJAMstackには入れてもらえないらしいし、

そんなに目新しくないかもだけど…

JAMstack っぽい事例がもっと知りたい!

https://blog.photosynthesic.jp/

JAM stack like

By mimitips

JAM stack like

  • 1,345
Loading comments...

More from mimitips