GitHub Actionsでデプロイした時に、自動的にCSSファイルをS3にアップロードする

はじめに

こんにちは、新卒1年目の岡崎です。エキサイトホールディングス Advent Calendar 2023の4日目を担当します。

今回はGitHub Actionsを使って、Amazon ECSにアプリケーションをデプロイした時に、自動的にCSSファイルをS3にアップロードする実装を行いました。その備忘録として記事に残します。

はじめに
環境
S3にCSSファイルをアップロードする
- 実装
クライアントがCSSファイルにアクセスする方法
CloudFrontのキャッシュを削除する
- 実装
まとめ

環境

GitHub Actions
AWS
- S3
- CloudFront

S3にCSSファイルをアップロードする

S3の機能の1つに、CSSファイルなどの静的なファイルの管理があります。S3について詳しく知りたい人は、公式ドキュメントをご覧下さい。

上記の通り、静的なファイルの管理はS3が行うので、CSSファイルに変更があった場合、S3にアップロードする必要があります。

よって今回は、任意のCSSファイルが存在するディレクトリを、アプリーションをデプロイした時に、S3に自動でアップロードする方法を紹介します。

実装

GitHub Actionsのワークフローは.github/workflows/配下のYAMLファイルに記載しています。そのファイルに、以下のような実装を行います。

- name: upload to Amazon s3 for CDN
  env:
      AWS_ACCESS_KEY_ID: アクセスキー
      AWS_SECRET_ACCESS_KEY: シークレットキー
  run: |
     aws s3 cp --recursive --region ap-northeast-1 アップロードしたいCSSファイルがあるディレクトリのpath s3: s3のpath

クライアントがCSSファイルにアクセスする方法

クライアントは、静的ファイルを取得するために、以下の手順でCSSファイルにアクセスしています。

クライアントがCSSファイルにアクセスします。
CloudFrontは、リクエストされたCSSファイルのキャッシュの有無を確認します。
- キャッシュがあれば、それをクライアント側に返します。
- キャッシュがなければ、次に進みます。
CloudFrontはS3からCSSファイルを取得し、その時に取得したCSSファイルをクライアントに返します。

詳しくは公式ドキュメントに記載があります。

CloudFrontのキャッシュを削除する

CloudFrontにキャッシュがあると、新しいCSSファイルがS3にアップロードしても、クライアントは古いCSSファイルを取得してしまいます。

この問題を解決するために、CloudFrontのキャッシュを削除する必要があります。

実装

これも.github/workflows/配下のYAMLファイルに記載を行います。実装例は以下です。

- name: Clear cache in CloudFront
  env:
     AWS_ACCESS_KEY_ID: アクセスキー
     AWS_SECRET_ACCESS_KEY: シークレットキー
  run: |
     aws cloudfront create-invalidation --distribution-id ディストリビューションID --paths "キャッシュを消したいファイルが存在するディレクトリのpath"

キャッシュの削除は、1ヶ月で1000pathまで無料で行うことができます。その後は有料になり、1pathごとに0.005USDかかります。

詳しくは公式ドキュメントに記載があるので、興味がある人は見てください。