やりたいこと
Amplifyを使用してデプロイしている中で、CloudFront側はデプロイ後の最新のファイルを配信しているが、ブラウザ側にキャッシュが残っており反映されないというケースが発生します。
そこで今回はAmplify Hosting(CloudFront and S3)で、CloudFrontではキャッシュを使いつつも、ブラウザなどのクライアント側ではキャッシュさせない構成を実現します。
本記事ではCloudFront（CDN）側のキャッシュ制御については言及していません。
そちらに関しては公式ドキュメントを参照してください。
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/ConfiguringCaching.html
結論
Amplify上では設定が出来ないため、CloudFrontのレスポンスヘッダーポリシーにてCache-Controlを設定する。
AmplifyでCache-Controlの設定は出来なかった
Amplifyのドキュメントには、カスタムヘッダーの設定のページがあります。
内容としてはプロジェクトのルートに customHttp.yml ファイルを作成して、その中でCache-Controlなどのカスタムヘッダーの設定することで反映が出来るというものです。
例：
customHeaders:
- pattern: '*.json'
headers:
- key: 'Cache-Control'
value: 'no-cache'
- pattern: '/path/*'
headers:
- key: 'X-Frame-Options'
value: 'SAMEORIGIN'
ただこのファイルをプロジェクトのルートに配置してみましたが、動作しませんでした。
原因をドキュメント上で探すことはできませんでしたが、Amplify Consoleを使用したデプロイではなく、CloudFront and S3を選択したことに起因しているのでは？ と推測しました。
Amplify CLIでプロジェクトを作成する時にplugin moduleについて聞かれます。
今回の構成ではこのオプションを「Amazon CloudFront and S3」にしていました。
$ amplify add hosting ? Select the plugin module to execute (Use arrow keys) Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment) ❯ Amazon CloudFront and S3 ? Choose a type ❯ Continuous deployment (Git-based deployments) Manual deployment Learn more
Hosting with Amplify ConsoleはCI/CD機能が付いており、デプロイした際にはamplifyのドメインでホスティングされます。
https://{ブランチ名}.{AmplifyアプリID}.amplifyapp.com
しかしCloudFront and S3 ではCloudFrontとS3が自動で作成されますが、デプロイに関しては自分で構築する必要があります。
またホスティングした際のURLも、以下のようにcloudfrontのドメインになります。
https://{AmplifyアプリID}.cloudfront.net
そのため（これは仮説ですが）customHttp.yml を使用してAmplify側でカスタムヘッダーを付与しても反映されず、CloudFrontやS3側に設定する必要があるのではと考えました。
※もしどこかにドキュメント等明記しているものがあれば、ご教授いただけると助かります。。
レスポンスヘッダーを設定する方法は2種類
CloudFront側でデプロイされた新しいファイルをブラウザ側ですぐに反映させるには、レスポンスヘッダーに Cache-Control: no-cache (もしくは全くキャッシュさせない Cache-Control: no-store)を設定する必要があります。
方法は2通りです。
- S3にメタデータを追加し、オブジェクト毎にCache-Controlの設定を加える
- CloudFrontのレスポンスヘッダーポリシーにてCache-Controlを設定する
今回は配信されるすべての静的ファイルに対して一律でカスタムヘッダーを追加したかったので、後者を選択しました。
CloudFrontでカスタムヘッダーを設定する
Amplify CLIでHostingされているのであれば、既にCloudFrontは作成済みです。
作成されているCloudFrontの「ビヘイビア」を選択します。
ビヘイビアを選択して「編集」を選択します。
編集画面が表示されたら「レスポンスヘッダーポリシー」の部分を表示します。
ここで既にお持ちのレスポンスヘッダーポリシーがあれば設定できます。
もし新規で作成する場合は下の「Create response header policy」から作成します。
レスポンスヘッダーポリシーの作成画面に遷移します。
名前を入力してください。
下の方にスクロールすると「カスタムヘッダー」の欄が表示されるので、Cache-Controlを設定します。そのまま作成ボタンで保存します。
必要に応じてオリジンのオーバーライドにチェックを入れてください。
レスポンスヘッダーポリシーが作成できたので、ディストリビューションの編集画面に戻り作成したものを設定します。
変更を保存したら完了です。
ブラウザで反映されているか確認してみると、Cache-Controlが追加されています。
