ヘッドレスCMS × Static Site GeneratorでJamstackな爆速表示サイトを作ってみるチュートリアル

13324 ワード
JAMstack nuxt.js microCMS nuxt.js テキストリンク

Jamstackについて調べてみたので、自分なりにまとめておきます。

はじめに

Jamstackとは

  • 公式サイト：https://jamstack.org/
  • ファイルを事前(デプロイ時)にレンダリングし、静的サイトとしてCDN経由で配信する手法。
  • J(avaScript)A(PIs)M(arkup)の頭文字を並べたもの。
    • JavaScript：動的コンテンツを取得し、描画するJavaScript部分。
    • APIs：動的コンテンツを提供するAPI部分。
    • Markup：デプロイ時にビルドされた静的サイト部分。
  • 以下のような特徴がある
    • 静的サイトをCDN経由で配信するため、より高速。
    • 悪意のある攻撃の対象領域がAPI部分のみになるため、セキュリティ対策がしやすい。　
    • スケーリングする際はCDNのみでよいため、スケーリングが安価かつ容易。
    • フロントエンド側とAPI側が疎結合となるため、それぞれ技術選定の自由度があがる。（デバッグやテストもしやすい。）
  • 最近表記が「JAMstack」から「Jamstack」に変わった。

今回はAPI部分に ヘッドレスCMS 、JavaScript/Markup部分に SSG（Static Site Generator） を利用する。

ヘッドレスCMSとは

  • コンテンツを管理する管理画面と、コンテンツを(JSON形式などで)公開するAPIからなる。
  • 以下のようなものがある。

今回は、microCMS を利用する。（無料 & サーバ管理不要 & 日本語UI）

SSG（Static Site Generator）とは

  • markdownやJSONをを使って、静的サイト（普通のHTML/CSS/JavaScript）を生成できる。
  • 以下のようなものがある。

今回は、 Vuejsベースの Nuxt.js を利用する。

今回作るもの

  1. コンテンツ管理者がmicroCMS上でコンテンツ更新を行う。
  2. microCMSがNetlifyへWebhookを送信する。
  3. NetlifyがWebhookを受信し、静的HTMLを生成、CDNへデプロイを行う。

　※ ユーザからのリクエストはCDNで処理されレスポンスを返却する。

事前準備

  • microCMS でユーザ登録しておく。（無料）
  • Github でユーザ登録し、(プライベート)リポジトリを作成しておく。（無料）
  • Netlify でユーザ登録し、Github連携しておく。（無料）

作り方

Step.1 ヘッドレスCMS側

Step.1-1 サービスの作成

サービスの名称やURLのサブドメイン部分を設定していく。


Step.1-2 APIの作成

APIの名称やエンドポイント、返却値の形式などを設定していく。



Step.1-3 コンテンツの投入

コンテンツを投入していく。

Step.1-4 APIキーの確認

画面上部のAPIリファレンスからAPIを呼び出すためのキーを取得する。
（試してみる からレスポンス値の確認も出来る。）

Step.2 SSG側

Step.2-1 Nuxt.jsのプロジェクト作成

console
# nodeのバージョン確認
% node -v
v12.13.0

# npm のバージョン確認
% npm -v
6.13.6

# nuxtプロジェクトの作成
% npx create-nuxt-app jamstack-demo

create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in jamstack-demo
? Project name jamstack-demo
? Project description My terrific Nuxt.js project
? Author name ohnaka0410
? Choose the package manager Npm
? Choose UI framework Element
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, DotEnv
? Choose linting tools Prettier
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)


                                      :-:                     
                                    .==-+:                    
                                   .==. :+- .-=-              
                                  .==.   :==++-+=.            
                                 :==.     -**: :+=.           
                                :+-      :*+++. .++.          
                               :+-      -*= .++: .=+.         
                              -+:      =*-   .+*: .=+:        
                             -+:     .=*-     .=*-  =+:       

🎉  Successfully created project jamstack-demo

  To get started:

    cd jamstack-demo
    npm run dev

  To build & start for production:

    cd jamstack-demo
    npm run build
    npm run start

% cd jamstack-demo
% npm run dev

ブラウザで http://localhost:3000/へアクセスし表示確認を行う。

Step.2-2 コンテンツ表示部分の作成

/pages/index.vue
          GitHub
        </a>
      </div>
+      <el-table
+        :data="items">
+        <el-table-column
+          prop="name"
+          label="名称">
+        </el-table-column>
+        <el-table-column
+          prop="scientificName"
+          label="学名">
+        </el-table-column>
+        <el-table-column
+          label="画像">
+          <template slot-scope="scope">
+            <img :src="scope.row.image.url" />
+          </template>
+        </el-table-column>
+      </el-table>
    </div>
  </div>
</template>

<script>
 import Logo from '~/components/Logo.vue'
+import axios from 'axios'

 export default {
   components: {
     Logo
-  }
+  },
+  data () {
+    return {
+      items: []
+    }
+  },
+  async asyncData () {
+    const { data } = await axios.get('** microCMSで取得したENDPOINTURL **', {
+      headers: { 'X-API-KEY': 'エンドポイントのAPIキー' }
+    })
+    return {
+      items: data.contents
+    }
+  },
 }
 </script>

修正後、Githubのリポジトリにプッシュしておく。

Step.2-4 Netlifyのへデプロイ

Githubリポジトリと連携し、ビルドコマンド、ビルド出力先ディレクトリを設定する。

数分でビルド+デプロイが完了。

Step.3 表示確認

デプロイ先のURLへアクセスし、表示確認を行う。

ついでにauditsでパフォーマンス測定を行う。


パフォーマンスは無事100が出ました。

Step.4 Webhookの設定

Webhookを利用して、microCMSでコンテンツ変更時に、Netlify上で自動的にコンテンツをビルドし、デプロイできるように設定する。

Step.4-1 Netlify側の設定

Settings>Build&DeployからBuild hooksの設定を行う。

Step.4-2 microCMS側の設定

API設定>Webhookから上記で作成したWebhookのURLを入力する。

Step.4-3 デプロイの確認

microCMSで記事更新後、NetlifyのDeploysを確認し、Buildingとなっていることを確認する。

おわりに

  • ちょっとしたお知らせ、ニュース、ブログ（運営者→ユーザへの一方向配信コンテンツ）であれば、フロントエンドだけで完結できるため、コーポレートサイトやLP、サイネージなどで導入しやすそう。
  • できれば、(axiosとかで叩ける)お問い合わせ用APIとかあれば良いけど、なにか良いサービスないかな