Help us understand the problem. What is going on with this article?

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

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

はじめに

Jamstackとは:thinking:

  • 公式サイト: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とは:thinking:

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

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

SSG(Static Site Generator)とは:thinking:

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

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

今回作るもの

PL2z3e8m4Dxx53SP67W1OWm8YPCCDiH172gSiH7QsXu3Roy_4GNNx_ykSYGijKtDH4dQGbmrKZ7JOxAKHYY2HfPM9qU-0FUjh2kqKOPKotktu98qc_4fD7Te6HkZ8TZDYI7afXA4XKgq8bJas8SQPAkE42vnI_fQg3FU7be_sKemU7wwl_fH1nxd1nysaAAfTSU6JN-E4xvQT3IHss1DEgELw-Twd4H_Bd19wBC8LJKyy0q0.png

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

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

事前準備

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

作り方

Step.1 ヘッドレスCMS側

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

サービスの名称やURLのサブドメイン部分を設定していく。
app.microcms.io_create-service.png
app.microcms.io_create-service (1).png
app.microcms.io_create-service (2).png

Step.1-2 APIの作成

APIの名称やエンドポイント、返却値の形式などを設定していく。
jamstack-demo.microcms.io_.png
jamstack-demo.microcms.io_ (1).png
jamstack-demo.microcms.io_ (2).png
jamstack-demo.microcms.io_ (3).png

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

コンテンツを投入していく。
jamstack-demo.microcms.io_ (5).png
jamstack-demo.microcms.io_apis_gorilla_create.png

Step.1-4 APIキーの確認

画面上部のAPIリファレンスからAPIを呼び出すためのキーを取得する。
試してみる からレスポンス値の確認も出来る。)
jamstack-demo.microcms.io_apis_gorilla_create (1).png

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/へアクセスし表示確認を行う。
localhost_3000_.png

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リポジトリと連携し、ビルドコマンドビルド出力先ディレクトリを設定する。

app.netlify.com_start_repos_ohnaka0410%2FJamstack-Sample.png

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

Step.3 表示確認

デプロイ先のURLへアクセスし、表示確認を行う。
sharp-allen-3e32d1.netlify.com_.png

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

スクリーンショット 2020-02-01 1.14.05.png
パフォーマンスは無事100が出ました。

Step.4 Webhookの設定

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

Step.4-1 Netlify側の設定

Settings>Build&DeployからBuild hooksの設定を行う。
スクリーンショット 2020-02-01 1.18.36.png

Step.4-2 microCMS側の設定

API設定>Webhookから上記で作成したWebhookのURLを入力する。
スクリーンショット 2020-02-01 1.19.12.png

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

microCMSで記事更新後、NetlifyのDeploysを確認し、Buildingとなっていることを確認する。
スクリーンショット 2020-02-01 1.23.11.png

おわりに

  • ちょっとしたお知らせ、ニュース、ブログ(運営者→ユーザへの一方向配信コンテンツ)であれば、フロントエンドだけで完結できるため、コーポレートサイトやLP、サイネージなどで導入しやすそう。
  • できれば、(axiosとかで叩ける)お問い合わせ用APIとかあれば良いけど、なにか良いサービスないかな:thinking:
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした