さいとブログ

初めてGithubActionsでCI/CD環境の構築をしたので、手順などを残していきます。
今回はNext.jsで静的ファイルを出力して（プライベートリポのライブラリ使用していたため手動のまま）、S3にHTMLファイルをアップロードして、CloudFrontのcache削除までを自動化しました。
プライベートリポのライブラリをyarn installする方法までは今回組まなくて良かったので、そこは解決せずにそのままにしています。

手順

AWS側の準備

まずはGitHubActionsからaws cliでS3とCloudFrontを操作するためのIAMユーザーとIAMポリシーを作成します。
先にIAMポリシーを作ります。

{
 "Version": "2012-10-17",
 "Statement": [
   {
     "Sid": "VisualEditor0",
     "Effect": "Allow",
     "Action": [
      "s3:PutObject",
      "s3:ListBucket",
      "cloudfront:CreateInvalidation"
     ],
     "Resource": [
      "arn:aws:s3:::[バケット名]",
      "arn:aws:s3:::[バケット名]/*",
      "arn:aws:cloudfront::[ディストリビュー名]",
     ]
   }
 ]
}

ポリシーを作ったらユーザーグループを作成して、作成したポリシーをアタッチします。

次にGitHubActionsに割り当てるユーザーを作成して、作成したグループに入れます。
ユーザー作成した時のAWSのsecret_access_keyは保存します。

GitHubにsecretの登録

次に秘匿情報をGithubActionsで利用するために登録します。
リポジトリのsettings/secrets/actionsから環境変数を作成します。
以下の内容で登録します。

• AWS_ACCESS_KEY_ID アクセスキー
• AWS_SECRET_ACCESS_KEY シークレットキー
• AWS_REGION S3のリージョン
• DISTRIBUTION CloudFrontのディストリビューションID

ワークフローの作成

ここまで準備できたら、actionsからyamlを作成します。

name: Next.js SSG deploy S3

# トリガーの設定
on:
 # developにpushされたら
 push:
  branches: [develop]

# ジョブの設定
jobs:
 deploy:
  runs-on: ubuntu-latest

  steps:
   # リポジトリをチェックアウト
   - name: Checkout
    uses: actions/checkout@v2
    with:
     ref: develop

   # S3にアップロード
   - name: Publish to AWS S3
    env:
     AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
     AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
     AWS_REGION: ${{ secrets.AWS_REGION }}
     DEST_PATH: s3://[バケット名]
    run: "aws s3 cp --recursive --region $AWS_REGION ./out s3://[バケット名]"

   # CloudFrontのキャッシュクリア
   - name: Clear cache in CloudFront
    uses: chetan/invalidate-cloudfront-action@v1.2
    env:
     DISTRIBUTION: ${{ secrets.DISTRIBUTION }}
     PATHS: '/*'
     AWS_REGION: ${{ secrets.AWS_REGION }}
     AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
     AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

少し解説すると7行目でトリガーを設定します。今回はdevelopにpushされたら自動で処理が走るようにしています。
次に28行目でS3にアップロードするためのコマンドを書き、out/をS3にアップロードするようにしています。
outの中は今回はローカルでビルドしているので、actionsの中ではyarn build && yarn exportは今回は不要としています。
32行目でCloudFrontのキャッシュを削除するためのサードパーティのワークフローを利用して、35行目でキャッシュ削除パスを指定しています。
ここまででCD環境の構築は完了です。

最後に

他にもEC2にNest.jsアプリケーションをデプロイするワークフローも書いたので、別で記事にしたいと思います。

参考

• CloudFrontのキャッシュ削除
• S3デプロイ