Zenn
🏃‍♂️

【GitHub Actions】S3へのデプロイ後にCloudFrontのキャッシュを削除する

2022/11/13に公開
S3
GitHub Actions
CloudFront
tech

はじめに

CloudFront + S3 でホスティングしている Web ページで、S3にデプロイした時に CloudFront のキャッシュが効いて変更が反映されない事象がありました。CloudFront のキャッシュは画面上からでも削除できますが、毎回手動で対応する方法だと削除するのを忘れそうな気がするので、デプロイのフローの中でキャッシュの削除までできるようにします。

修正前の GitHub Actions のワークフロー

やっていることはかなりシンプルで、ビルドとS3へのデプロイをしているだけです。

name: Deploy

on: push

env:
  AWS_ROLE_ARN: arn:aws:iam::${{secrets.AWS_ACCOUNT_ID}}:role/XXX

permissions:
  id-token: write
  contents: read
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master
      - uses: aws-actions/configure-aws-credentials@v1
        with:
          role-to-assume: ${{ env.AWS_ROLE_ARN }}
          aws-region: ap-northeast-1
      - name: Install Dependencies
        run: yarn

      - name: Build
        run: yarn build

      - name: Deploy
        run: |
          aws s3 sync dist/ s3://XXX --region ap-northeast-1

現状のワークフローの問題点

S3 へのデプロイをしただけでは反映されない場合があります。
CloudFront のキャッシュが有効になっている場合、キャッシュの有効期限が切れるまではデプロイ前のコンテンツを返すためです。
そのため、すぐに反映したい場合はデプロイ後にキャッシュを削除する必要があります。

GitHub Actions のワークフローにキャッシュを削除するステップを追加

下記のようにキャッシュを削除するステップを追加しました。

name: Deploy

on: push

env:
  AWS_ROLE_ARN: arn:aws:iam::${{secrets.AWS_ACCOUNT_ID}}:role/XXX

permissions:
  id-token: write
  contents: read
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master
      - uses: aws-actions/configure-aws-credentials@v1
        with:
          role-to-assume: ${{ env.AWS_ROLE_ARN }}
          aws-region: ap-northeast-1
      - name: Install Dependencies
        run: yarn

      - name: Build
        run: yarn build

      - name: Deploy
        run: |
          aws s3 sync dist/ s3://XXX --region ap-northeast-1

+     - name: Clear cache
+       run: |
+         aws cloudfront create-invalidation --distribution-id XXXXXXXXXXXXXX --paths "/*"

念の為、CloudFront の画面を見にいくとキャッシュ削除が機能していることを確認できました🎉
画面上で確認

終わりに

今回はデプロイ後に自動でキャッシュを削除するようにしました。
キャッシュ周りは上手く使えればユーザー体験を良くできると思いますが、事故が起きやすい部分でもあると思うので、上手く付き合っていきたいところです...

Discussion