GitHub Actionsでs3へのデプロイをCI/CD

やりたいこと

1. nextjsで書いた静的サイトのコードをgithubにpushする。
2. pushした内容を静的HTMLに出力する。
3. 出力したファイルをs3に格納する。
4. コンテンツを確認したら更新されている

この1,2,3,4の流れを自動でやってくれるように設定していきます。
s3バケットの作成とcloudFrontの経由は設定済みとして割愛します。

やってみる

1. nextConfigの設定
   まずnext.config.jsファイルのnextConfigにoutput:"export"を追加します。これでビルド時に静的HTMLをoutディレクトリに作ってくれます。

/** @type {import('next').NextConfig} */
const nextConfig = { output: "export" };

export default nextConfig;

2. アクセスキー用意
   github actionsでアクセスキーを指定する必要があるので、今回必要なアクセス権限を持ったIAMユーザーとそのアクセスキーを用意します。
   必要な権限はcloudfront:CreateInvalidationとs3:PutObjectですが、今回はcloudFrontとs3のfullAccessを割り当てました。
   

3. github actions設定
   次にgithub actionsのコードを書きます。
   場所はルートディレクトリに.github/workflows/任意の名前.ymlです。

name: deploy next-app
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Setup node
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: Install Dependencies
        run: yarn install

      - name: Build
        run: yarn build

      - name: Deploy
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.SECRET_ACCESS_KEY }}
        run: |
          echo "AWS s3 sync"
          aws s3 sync --region ap-northeast-1 ./out s3://${{ secrets.AWS_S3_BUCKET}} --delete
          echo "AWS CF reset"
          aws cloudfront create-invalidation --region ap-northeast-1 --distribution-id ${{ secrets.AWS_CF_ID }} --paths "/*"

on:push~で、mainブランチにpushすると自動でこのワークフローを実行してくれます。
ざっくり内容として、yarn buildで作成されたoutディレクトリとs3バケットを同期後に、すぐに反映されるようにcloudFrontのキャッシュを無効化しています。
お使いのフレームワーク等でもしかしたら、nodeのバージョンエラーが出るかもしれないです。

4. 環境変数の設定
   yamlファイルに記載した変数の中身を対象リポジトリのsettingから設定します。
   

5. pushする
   あとは好きな変更をmainブランチにpushすればgithub actionsが起動して設定したワークフローが実行されます。

結果確認

実行結果はリポジトリのActionsから確認できます。

自動でデプロイしてくれてうれしいです。

参考にさせていただいたサイト

https://zenn.dev/hamo/articles/0a96c4d27097bd

これも分かりやすいです。
https://dev.classmethod.jp/articles/deploy-web-site-with-github-actions/