💬

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

2021/06/18に公開

はじめに

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

構成

技術構成です。

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

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

記事ではホスティング先としてNetlifyを使っていましたが、今回はGitHub ActionsとAamazon S3を使いました。

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

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

フロー

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

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

手順

Github Actionsの設定

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

対象のリポジトリの「Actions」をクリックする
「New workflow」をクリックする
「set up a workflow yourself」をクリックする
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