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

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

Solution

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

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

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

https://blog.photosynthesic.jp/

Made with Slides.com