💬

microCMS+NuxtのJamstackブログをS3にデプロイしてみる

3 min read

はじめに

ヘッドレスCMSを使ってJamstackなブログを構築する機会があったので、使った技術や設定方法をまとめておきます。

構成

技術構成です。

  • Headless CMS: microCMS
  • source repository: GitHub
  • CI: GitHub Actions
  • SSG: Nuxt.js
  • Hosting: Aamazon S3

Headless CMSには日本製のmicroCMSを選びました。
公式ブログにNuxt.jsを使ったJamstackの記事があったため、今回参考にしています。

https://blog.microcms.io/microcms-nuxt-jamstack-blog/
記事ではホスティング先としてNetlifyを使っていましたが、今回はGitHub ActionsとAamazon S3を使いました。

途中までは上記で紹介した公式ブログの記事の通り進めます。
(「6.ビルドして静的ファイルを生成してみる」まで)
本記事ではその後のCIの設定について触れていきます。
Aamazon S3の設定はすでに行われているものとします。

Aamazon S3の設定は下記の記事を参考にさせていただきました。

https://dev.classmethod.jp/articles/sales-s3-website/

フロー

  1. microCMSで記事を投稿する
  2. 記事が投稿されたタイミングで、Github Actionsに通知をとばす
  3. 通知を受けたCIがコンテンツを自動で生成する
  4. コンテンツが生成できたらS3に自動でデプロイする

microCMSに記事が登録された後は全て自動でデプロイまで行うように設定しました。

手順

Github Actionsの設定

microCMSに記事が投稿されたら、そのタイミングでビルドが実行されてデプロイされるようにします。
まずは作成済みのNuxt.jsのブログを新規作成したリポジトリにpushしておきます。
次にGithub Acitionsの設定をおこないます。
GitHubのサイトから以下の手順で設定を行っていきます。

  1. 対象のリポジトリの「Actions」をクリックする

  2. 「New workflow」をクリックする

  3. 「set up a workflow yourself」をクリックする

  4. ymlファイルの中身を変更する
    画像はデフォルトのファイルです。

yamlファイルの中身は下記のようにしました。

name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  repository_dispatch:
      types: [update_blog]

jobs:
    build:
        name: Build & Deploy
        runs-on: ubuntu-latest

        steps:
            - name: Checkout
              uses: actions/checkout@v2
            
            - name: Configure AWS credentials
              uses: aws-actions/configure-aws-credentials@v1
              with:
                aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
                aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
                aws-region: ap-northeast-1

            - name: Build
              run: |
                yarn install 
                yarn build
                yarn generate
            - name:  Contents sync to s3
              run: |
                aws s3 sync ./dist ${{ secrets.S3_PATH }} 

a. microCMSから通知を受け取ると、yarnコマンドを実行してビルドを行い、静的ファイルを生成
b. ビルドが完成したら、distディレクトリ以下をS3へアップロードする。

repository_dispatchは後でmicroCMSで設定するWebhookのトリガーイベント名と同じ名前にする必要があります。
なお、S3の各種情報(AWS_ACCESS_KEY_IDなど)はベタ書きするとよくないので、Secretsに登録しておきます。
Settings→Secrets→New repostitory secret

microCMSの設定

microCMSで記事を投稿したらGithub Actionsに通知が飛ぶようにWebhookを設定します。
トークンの作成方法は下記の記事を参考にしました。

https://docs.github.com/ja/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token
  1. API設定からWebhookを選択、追加ボタンをクリックする

  2. Github Actionsを選択

  3. 設定を行う
    今回は、基本設定のみ変更、そのほかは初期設定のままにしておきます。
    トリガーイベントはGithub Actionsで設定したrepository_dispatchと同じにする必要があります。

最後に

以上で連携完了です。
microCMS側で記事を投稿してAmazon S3のエンドポイントを叩くと、変更内容が反映されるようになりました。
終わり。

GitHubで編集を提案

Discussion

ログインするとコメントできます