mainブランチにマージ→S3にデプロイ→CloudFrontのキャッシュ削除まで自動化してみた

だいち

2024.03.20

9

こんにちは。絶賛クラウド技術のキャッチアップに励んでいるだいちです。

前回の記事では、NuxtのプロジェクトをS3にデプロイして、CloudFrontを介して配信する構成を組んでいきました。

実際に手を動かしてみて

「リリースのたびにS3にアップしてCloudFrontのキャッシュ削除するのだるいな～」

と思いました。

僕はケアレスミスの多いので、削除し忘れとか、アップロード漏れとかしょっちゅうありそう。。

そこで、Githubのmainブランチの変更をトリガーに

S3へのアップロードとCloudFrontのキャッシュ削除を自動化するパイプラインを作成してみました。

今回やりたいこと

Githubのmainブランチが更新されたら自動デプロイできるようにする

具体的には下記の手順を自動で行えるようにします。

Githubのmainブランチを変更
GithubActionsが作動し、S3にファイルをアップロード
Lambda関数が発火し、CloudFrontのキャッシュを削除する

図にするとこんな感じです

①GithubActionsを使った自動デプロイ

GithubActionsからS3へアクセス可能にしよう

まずは事前準備として、GithubActionsからCLIでS3のバケットにアクセスするための権限を持っているIAMユーザーを作成します。

1.ユーザー名は分かりやすく「GithubActions」に設定します。

2.S3へのアクセスを付与します。

　「ポリシーを直接アタッチする」を選択し、AmazonS3FullAccessを追加

3.S3にアクセスするためのキーを取得します。

　IAMユーザー作成後、「セキュリティ認証情報」>「アクセスキーを作成」

　ユースケースの選択画面では「AWS の外部で実行されるアプリケーション」を選択

　　→アクセスキー、シークレットアクセスキーが発行されるのでどっかにコピーしておく

4.Githubのリポジトリにアクセスキーとシークレットアクセスキーを環境変数として設定

　Githubのリポジトリの「Settings」タブのRepository secretsから登録できます。

これにて事前準備は完了です。

ワークフローの作成

次にGithub 側の設定です。

mainブランチに変更があった際にS3へファイルをアップロードする処理を書いていきます。

導入の仕方は以下の公式ドキュメントを参照してください

https://docs.github.com/ja/actions/quickstart

.github/workflows ディレクトリ配下にci.ymlを作成します。

name: Build and Deploy to S3


on:
  # mainブランチへのプッシュをトリガーにする
  push:
    branches:
      - main


jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@main  # リポジトリをチェックアウト  


      - name: Install Dependencies
        run: npm install
      # ビルドしてdistディレクトリ以下のファイルを更新
      - name: Build
        run: npm run build 


      - name: Deploy  # S3にデプロイ 
        env:
          # IAMユーザーに作成したアクセスキー
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: | # S3のバケットにデプロイ
          aws s3 sync --region ap-northeast-1 ./dist s3://nuxt-app-20240218 --delete
          aws s3 cp --recursive --region ap-northeast-1 ./dist s3://nuxt-app-20240218