Nuxt3・MicroCMS・Github Pagesを利用してJamStackなWebアプリケーションを作成する

MicroCMS と Nuxt.js を利用してJamStackな Webアプリケーション を作成する

JamStack とは？

JamstackのJamはJavaScript/APIs/Markupの頭文字です。JavaScriptでAPIをたたいてMarkupを配信することを意味しています。

通常のWebアプリケーションは、ユーザがアクセスした際にサーバーがデータベースを参照することで最新のコンテンツを表示することが出来ます。

JamStackは、従来の概念とは異なり、コンテンツが更新されたタイミングで、予め静的なページを生成しておき、ユーザはこれを参照する形となります。

JamStack のメリット

  • PV増加（速度UP・SEO効果）
  • 運用コスト減少（管理画面が不要、APサーバー不要）
  • 安全性の向上（APサーバーが動作していないので攻撃ポイントが少ない）

JamStack のデメリット

  • リアルタイム性が低い（ページの生成に時間がかかる）
  • データの整合性が必要なものには不向き

JamStack の実現に必要な技術

  • HeadressCMS
  • SSG

HeadressCMS とは？

HeadlessCMSは「プレビュー機能のない、コンテンツ管理に特化したCMS」です。 Contentful、Micro CMS、GraphCMS、Strapi などのサービスを利用することで、バックエンドを用意する必要がなくなり、フロントエンドの開発に注力できます。

SSGとは？

SSGは、Static Site Generatorの略称で、静的サイト生成をする仕組みになります。 アプリのビルド時にAPIからデータを取得して、HTMLファイルをファイルを生成します。 ユーザからリクエストがあると、事前に生成しておいたHTMLファイルを返却することでコンテンツを表示します。

作成したアプリケーション

MicroCMS で記事を投稿すると、GithubAction が動作してSSG をGenerate 後、Github Pages に自動的にサイトを更新するようにしています。

デモ

https://isystk.github.io/nuxtjs-jamstack-sample/

主な機能

  • 投稿一覧
  • 投稿詳細

プロジェクトの概要

jamstackについて学習する為のサンプルアプリケーションです。jamstackを知るためには、ここHeadlessCMS や SSG など、ここ最近のフロントエンドの仕組みを知っておく必要があります。 以下は今回作成したアプリケーションのシステム構成になるので参考にしてください。

利用している技術

  • Nuxt.js
  • Typescript
  • Tailwind CSS
  • Github Actions
  • Github Pages
  • MicroCMS

useAsyncData を利用してSSGで利用するデータを取得する

SSG の場合、useAsyncData の中の処理はGenerateした際に1度だけ実行されます。取得されたデータを第1引数で指定した文字列で保存され画面を表示した際には保存された値が描画されます。

  1. const route = useRoute()
  3. const { data } = useAsyncData(`posts/${route.params.id}`, async () => {
  4.   // SSGの場合は、Generate時に1度だけここが処理される
  6.   const res = await axios.get(
  7.     `${import.meta.env.VITE_MICRO_CMS_API_URL}/${route.params.id}`,
  8.     {
  9.       headers: {
  10.         'X-MICROCMS-API-KEY': import.meta.env.VITE_MICRO_CMS_API_KEY,
  11.       },
  12.     }
  13.   )
  14.   return res.data
  15. })

Nuxt3 でSSGで利用するroutes を設定する

SSGで Generate するとリンクを<NuxtLink> タグをクローリングして自動的にページを生成しますが、明示的にURLを指定してページを生成したい場合は、nuxt.config.ts で指定することもできます。

nuxt.config.ts

  1. import { defineNuxtConfig, NuxtConfig } from 'nuxt'
  2. import axios from 'axios'
  4. const nuxtConfig = defineNuxtConfig(async (): Promise<NuxtConfig> => {
  5.   return {
  7.     ssr: true, 
  8.     target: 'static',
  10.     // GitHub Pages で参照できるようにコンテンストルートを指定する
  11.     app: {
  12.       baseURL: '/nuxtjs-jamstack-sample/',
  13.       cdnURL: 'https://isystk.github.io/nuxtjs-jamstack-sample/',
  14.     },
  16.     ・・・
  18.     generate: {
  19.       routes: await (async () => {
  20.         const pages = await axios
  21.           .get(process.env.VITE_MICRO_CMS_API_URL, {
  22.             headers: {
  23.               'X-MICROCMS-API-KEY': process.env.VITE_MICRO_CMS_API_KEY,
  24.             },
  25.           })
  26.           .then((res) =>
  27.             res.data.contents.map((content) => `/posts/${content.id}`
  28.           )
  29.         return pages
  30.       })(),
  31.     },
  32.   }
  33. })
  35. export default nuxtConfig

Githun Action でページ生成をして自動デプロイする

Githubに Pushした際に、Githun Action のworkflows を利用してNuxt.jsのSSGをコールしています。（Nuxt.js からは、外部API として MicroCMS からデータを取得）

生成された静的なコンテンツを、Github Pages に配置させるようにしています。

.github/workflows/deploy.yml

  1. name: Deploy
  3. on:
  4.   push:
  5.     branches: [ master ]
  6.   repository_dispatch:
  7.     branches: [ master ]
  8.     types: [blog_post]
  11. jobs:
  12.   build:
  14.     runs-on: ubuntu-latest
  16.     strategy:
  17.       matrix:
  18.         node-version: [16.x]
  20.     steps:
  21.     - uses: actions/checkout@v2
  22.     - name: Use Node.js ${{ matrix.node-version }}
  23.       uses: actions/setup-node@v1
  24.       with:
  25.         node-version: ${{ matrix.node-version }}
  27.     - name: Install dependencies 👨🏻‍💻
  28.       run: yarn
  30.     - name: Run tests 🧪
  31.       run: yarn test
  33.     - name: Generate static page
  34.       env:
  35.         VITE_MICRO_CMS_API_KEY: ${{ secrets.VITE_MICRO_CMS_API_KEY }}
  36.         VITE_MICRO_CMS_API_URL: ${{ secrets.VITE_MICRO_CMS_API_URL }}
  37.       run: yarn generate
  39.     - name: deploy to Github Page
  40.       uses: peaceiris/actions-gh-pages@v3
  41.       if: ${{ github.ref == 'refs/heads/master' }}
  42.       with:
  43.         github_token: ${{ secrets.GITHUB_TOKEN }}
  44.         publish_dir: ./.output/public

Micro CMS でコンテンツを管理

Micro CMS でコンテンツが更新された際に、WebHookを利用して、Github Action を実行させることで、最新のコンテンツが反映されるようにしています。

Github Action の設定

ソースコード

MIT ライセンスにてコードを公開していますのでご利用下さいませ。

https://github.com/isystk/nuxtjs-jamstack-sample

開発環境の構築

起動方法

  1. # モジュールのインストール
  2. $ yarn
  4. # Nuxtアプリの起動
  5. $ yarn dev

/ Vue.js / コメント数(0)

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。