mainブランチにマージ→S3にデプロイ→CloudFrontのキャッシュ削除まで自動化してみた
だいち
2024.03.20
215
こんにちは。絶賛クラウド技術のキャッチアップに励んでいるだいちです。
前回の記事では、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-20240218git push origin mainコマンドを実行。
無事、処理が完了したみたいです。
S3にもアップロードされていることを確認できました。
Lambdaを使ったキャッシュクリア
Lambda関数の作成
Python3.9を使って、関数を1から作成していきます。
関数名は「delete-cache-cloudfront」としておきます。
アクセス権限の付与
Lambda関数からCloudFrontにアクセス権限を付与する必要があります。
以下の手順で設定
- 作成したLambda関数の設定タブの「アクセス権限」から、実行ロールのリンクをクリック
- IAMロールの画面に飛ばされるので「許可の追加」から「ポリシーのアタッチ」をクリック
- CloudFrontで検索するとCloudFrontFullAccessが出てくるので選択して許可を追加
トリガーの作成
関数の概要の「トリガーを追加」をクリック。
以下の内容で設定し、追加を押下
動作確認！
まずは変更前の状態を確認。
CloudFrontのディストリビューションのドメインにアクセス
CloudFrontのキャッシュ削除履歴
最終履歴は2024年3月5日 15:03:11
今回はタイトルバーの「MyApp」の文字列を「YOKU」に書き換えます。
変更をコミットしてgit push origin mainを実行！
キャッシュ削除することなく、きちんと変更が反映されていました(^ ^)
ちなみにCloudFrontのコンソール画面のキャッシュ削除履歴も
2024年3月5日 15:13:07に更新されています。
最後に
実務でアプリを運用していくことを想定して、デプロイを仕組み化することで
ヒューマンエラーを防いでいきたいと思いました。
