CloudFrontのInvalidation作成をgithub actionsで自動化する
CEOのfurusatoです。
S3 + CloudFrontにて静的ウェブサイトをホスティングしている人は多いのではないでしょうか？
弊社では、静的ウェブは、全てこの構成をとっています。安いし楽ちん。
ただ、何かしらの変更があり、デプロイするたびに、CloudFrontのキャッシュを削除するのがめんどくさいと思ってる人はきっと私だけではないはず。ということで、github actionsを使って自動化しました。
かっこよく言えば、CI/CDとでもいうんですかね？
今では、「もっと早くやっとけばよかった」と心から思っています。
キャッシュを消す作業がそんなにめんどくさくない作業なので、ずっと放置してたんですよね。
反省です。では本題に入ります。
AS IS
- react.jsを利用
- ビルドしたファイルをS3にアップロード
- CloudFrontのオリジンにS3のエンドポイントを設定
- 変更時は、手動でS3にデプロイし、手動でInvalidationを作成
今までは、こんな感じのくそスクリプトを使ってS3へのアップロードをしていました。（笑）
#!/bin/bash
aws s3 rm s3://[S3_BACKET_NAME]/ --recursive
aws s3 cp build s3://[S3_BACKET_NAME]/ --recursive
TO BE
- githubへのpushをトリガーにgithub actionsが起動
- yarn build
- s3へのアップロード
- CloudFrontのInvalidation作成
- slackにデプロイ結果の通知
Workflow
- ブランチ戦略を立てる
github actionsは基本的に、ブランチに対するaction(push, pull_req)を検知するので、ブランチ戦略もしっかりとしておく必要があります。
今回は、mainとdevelopを用意し、mainを本番環境、developを開発環境とします。 - yamlファイルの作成
すでに色々な人が色々用意してくれているので楽ちんです。
環境変数等は、全てsecretsに入れました。
mainのトリガーにpushを使うべきかpull_reqを使うべきかわからなかったのですが、とりあえずpushにしました。
こんな感じのファイルをmain.ymlとdevelop.ymlの2つ作りました。
name: Deploy to main branch
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: '14'
- name: yarn install, build
run: |
yarn install
yarn build
- 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: Upload file to S3
env:
S3_UPLOAD_BUCKET: ${{ secrets.S3_UPLOAD_BUCKET_MAIN }}
run: |
aws s3 rm s3://$S3_UPLOAD_BUCKET --recursive
aws s3 cp build s3://$S3_UPLOAD_BUCKET --recursive
- name: make invalidation to cloudfront
uses: chetan/invalidate-cloudfront-action@master
env:
DISTRIBUTION: ${{ secrets.DISTRIBUTION_MAIN }}
PATHS: '/*'
AWS_REGION: 'ap-northeast-1'
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
- name: Slack Notification on Success
if: success()
uses: rtCamp/action-slack-notify@v2.0.2
env:
SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
SLACK_TITLE: Deploy Success(Develop)
SLACK_COLOR: good
- name: Slack Notification on Failure
uses: rtCamp/action-slack-notify@v2.0.2
if: failure()
env:
SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
SLACK_TITLE: Deploy Failure(Develop)
SLACK_COLOR: danger
Future
今回の実装で気になったのは、AWSのCredential情報を渡している点です。
正確には、以下の2点が気になりました。
- デプロイ用にIAM USERを作成している。
- IAM USERのCredentialsをgithub actionsに渡す。
いつ何時でも、Credential情報は設定したくないものです。
github actionsにはsecretsがありますが、とは言え無駄にIAM USERを作るのもどうなのかなと。
ということで色々調査していたらすごくテイムリーな記事が出てきましてgithub actionsからIAM Role経由でいけるっぽいですが、また時間ができた時にやろうかなと思います。
宣伝
技術者しかいない小さな会社を運営しています。
執筆者はCEOですが、これくらいならさくっと実装できます。
別にCTOもいます。
モダン技術を無駄に取り入れてDevelopper Experienceを最大化させるような会社です。
新しいサービスを新しい技術で一緒に作りませんか？
aws/gcp/golang/python/dockerあたりに強い方はぜひご連絡ください。
Discussion