こんにちは! SRE を担当している多田です(@tada_infra).

microCMS + Nuxt.js + Vue.js のコンテンツを GitHub Actions を使ってビルド,S3 にコンテンツを配備する設定を行いました.また,コンテンツが更新された時にも自動でデプロイされるような設定も行ったので振り返り目的で各設定についてまとめていきます.

GitHub Actions の定義

まず,GitHub Actions の定義部分です.やっている処理は S3 にアップロードするためのアクセスキーとシークレットアクセスキーを設定 -> ビルド -> S3 にコンテンツを同期しています.また,アクセスキーとシークレットアクセスキー,S3 へのパスを GitHub Secrets に設定しています.これで GitHub の特定ブランチにコードがプッシュされたら自動でビルド,S3 にコンテンツ配備されるよう設定できました.

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 [contents path] ${{ secrets.S3_PATH }}

参考情報

docs.github.com

microCMS 設定部分

次に,microCMS 設定です.microCMS のコンテンツを更新が走った時に自動でGitHub Actions が自動ビルド,デプロイするように設定していきます.管理画面の API 設定 > Webhook > GitHub Actions を選択し,下記の画面の設定を行いました.

f:id:sadayoshi_tada:20201218113117p:plain

GitHub Actions 定義

microCMS 側の設定後 GitHub Actions 側も設定を追加しています.GitHub Actions の定義でrepository_dispatch を指定して microCMS の記事が更新,削除されたりした時 update_post イベントが発行されてくるのでそのイベントをトリガーに GitHub Actions が動くように設定しました.これで記事を更新したら自動でビルド,デプロイするようになりました.

on:
~中略~
    repository_dispatch:
      types: [update_post]

参考情報

docs.github.com

まとめ

microCMS + Nuxt.js + Vue.js のコンテンツを GitHub Actions を使ってビルド,S3 にコンテンツを配備するための設定を行ったのでその内容を振り返ってまとめました.設定自体は比較的簡単にできるけれど自動ビルド,デプロイされるのは非常にありがたいです.同様の設定する方の参考になれば嬉しいです.