Zenn
🌊

Jam-stack を試しにやってみた(nuxt2)

2023/04/20に公開
JavaScript
Nuxt
microCMS
Jamstack
tech

Jamstack とは

Jamstack （ジャムスタック）は Netlify の創設者 Matt Biilmann が自社のサービスを広めるために作ったと言葉が元になっています。

J avaScript

A PI

M arkup

の頭文字を取った言葉だそうです。

一言で言うと JavaScript と API を使って Markup(HTML)のサイトを Netlify 上に作って！ということです。

今回使う技術スタック

区分 サービス名 説明
静的サイトジェネレーター nuxt.js 2.15.8 SPA ではなくて静的サイト(HTML1 枚のサイト)を生成してくれる。Vue のベースのフレームワーク
ヘッドレス CMS(コンテンツマネージメントシステム) microCMS 日本製のヘッドレス(頭なし＝ビュー画面がない)コンテンツマネージメントシステムです。 TD
デプロイツール GitHub 言わずと知れたハブツール
公開先 Netlify Jamstack 提唱した人の作った会社です。

今回の流れ

  1. microCMS で記事投稿
  2. Nuxt で記事を取得して静的サイトを作成する処理を作る
  3. GitHub に Nuxt の静的サイトジェネレーターをデプロイ
  4. Netlify と GitHub を連携
  5. Netlify と microCMS を連携
  6. フックの設定

microCMS で記事投稿

まず最初に microCMS に無料登録して記事を作成していきたいと思います。

この記事では記事の書き方は割愛しますが、以下の様にデータを登録しました。

Nuxt で記事を取得して静的サイトを作成する処理を作る

次に表示するサイトのテンプレートを作成していきます。

  1. Nuxt をインストール

    npx create-nuxt-app nuxt-jamstack -y

    基本的にエンター連打で大丈夫です。

    以下の様なフォルダ構成でプロジェクトが出来上がります。

    📦nuxt-jamstack
┣ 📂components
┃ ┣ 📜NuxtLogo.vue
┃ ┗ 📜Tutorial.vue
┣ 📂pages
┃ ┗ 📜index.vue
┣ 📂static
┃ ┗ 📜favicon.ico
┣ 📂store
┃ ┗ 📜README.md
┣ 📜.editorconfig
┣ 📜.eslintrc.js
┣ 📜.gitignore
┣ 📜.prettierignore
┣ 📜.prettierrc
┣ 📜nuxt.config.js
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜README.md
┗ 📜tsconfig.json

  2. pages/index.vue を以下に置き換え

    pages/index.vue
    <template>
  <ul>
    <li v-for="content in contents" :key="content.id">
      <nuxt-link :to="`/${content.id}`">
        {{ content.title }}
      </nuxt-link>
    </li>
  </ul>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData() {
    const { data } = await axios.get(
      '●●先ほどコピーしたエンドポイント●●',
      {
        headers: { 'X-MICROCMS-API-KEY': '●●先ほどコピーしたAPIキー●●' }
      }
    )
    return data
  }
}
</script>

  3. axios をインストール

    npm install --save axios

  4. 詳細画面を作成

    mkdir pages/_slug

touch pages/_slug/index.vue

  5. pages/_slug/index.vue を以下で置き換え

    pages/_slug/index.vue
    <template>
  <main class="main">
    <h1 class="title">{{ title }}</h1>
    <p class="publishedAt">{{ publishedAt }}</p>
    <div class="post" v-html="body"></div>
  </main>
</template>

<script>
  import axios from "axios";

  export default {
    async asyncData({ params }) {
      const { data } = await axios.get(
        `●●先ほどコピーしたエンドポイント●●${params.slug}`,
        {
          headers: { "X-MICROCMS-API-KEY": "●●先ほどコピーしたAPIキー●●" },
        }
      );
      return data;
    },
  };
</script>

以上です。

以下のコマンドを叩くとローカルサーバーで確認ができます。

num run dev

また以下のコマンドで静的サイト生成をしてくれます。

num run generate

GitHub に Nuxt の静的サイトジェネレーターをデプロイ

Private リポジトリでも大丈夫ですのでデプロイしてください。

Netlify と GitHub を連携

Netlify のサイトにログインします。

  1. ログイン後「Sites」のタブをクリック。
  2. 右上のほうにある Add new site をクリック。
  3. Import an existing project をクリックします。
  4. GitHub のアイコンをクリックしてアップロードしたサイトを選択します。
  5. パスワードを入れて連携に成功すれば次の画面に遷移します。
  6. 連携後リポジトリ一覧をクリックすると次の画面に遷移します。
  7. Build command は書き換えが必要ですので「npm run generate」と入力します。
  8. 「Deploy site」をクリックします。

デプロイが成功した後、URL をクリックするとサイトが表示されます。

Netlify と microCMS を連携

Netlify

  1. 「Build & deploy」をクリック。
  2. スクロールして「Build hooks」まで移動。
  3. 「Add build hook」をクリック。
  4. 「コピーアイコン」をクリックしてコピーしておきましょう。

次に microCMS 側の設定に移動します。

microCMS

  1. ログイン
  2. 「API 設定」をクリック。
  3. 「Webhook」をクリック後、「追加」をクリック。
  4. 「Netrify 」をクリック。
  5. 先ほどコピーした Netrify Build hooks の URL を貼り付ける
  6. フックをかけたい項目を選択して「追加」をクリック。

以上で連携設定は完了です。

フックの設定

最後に設定したフックが機能しているか確認したいと思います。

  1. microCMS から何かしら記事を投稿します。
  2. Netrify で確認するとビルド中になっています。
  3. Build が完了したら URL をクリック。

サイトを確認すると先ほどの内容が反映されています。

以上で Jamstack のすべての工程が終わりです。

おわりに

思ったより長い内容になってしまいました。

Jamstack の使われ方として多いのは

  • メディアサイト
  • ブログサイト

です。

Facebook みたいな個人データへのアクセスが多い複雑なサイトは SPA の方が向いているそうです。

wordpress では大変な細かいフロントエンド側の設定ができるので最近注目されているそうです。

Jamstack 自体が概念なので実際の構成としては多岐にわたってしまっているせいだと思います。

全体を通して、コンテンツを配信している microCMS の項目が多い印象でした。

あとは頑張ってフロントエンド側をおしゃれにするだけなのでここからが本当のスタートなのかもしれません。

成果物

ki0i0ro0/nuxt-jamstack: Jamstack 実験用

参考

Discussion