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、

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

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...

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

Solution

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

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

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

https://blog.photosynthesic.jp/