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ファイルを返却することでコンテンツを表示します。

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

デモ

https://nuxtjs-jamstack-sample.web.app

主な機能

  • 投稿一覧
  • 投稿詳細

プロジェクトの概要

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

利用している技術

  • Nuxt.js
  • Typescript
  • Tailwind CSS
  • Firebase Hosting
  • Github Actions
  • MicroCMS

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

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

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

.github/workflows/deploy.yml

name: Deploy

on:
  push:
    branches: [ master ]
  repository_dispatch:
    branches: [ master ]
    types: [blog_post]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies 👨🏻‍💻
      run: yarn

    - name: Run tests 🧪
      run: yarn test

    - name: Generate static page
      env:
        MICRO_CMS_API_KEY: ${{ secrets.MICRO_CMS_API_KEY }}
        MICRO_CMS_API_URL: ${{ secrets.MICRO_CMS_API_URL }}
      run: yarn generate

    - name: deploy to Firebase Hosting
      uses: w9jds/firebase-action@master
      with:
        args: deploy
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Micro CMS でコンテンツを管理

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

Github Action の設定

ソースコード

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

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

開発環境の構築

起動方法

# モジュールのインストール
$ yarn

# Nuxtアプリの起動
$ yarn dev

コメントを残す

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

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