[AWS] CloudFrontでCache-Controlのレスポンスヘッダーを返す

概要

AWS CloudFrontでレスポンスヘッダーにCache-Controlを返す方法を記載します。

経緯

画像をS3に置いて、CloudFrontを通してサイトに配信しています。

その際対象のサイトを PageSpeed Insightsで計測をすると、CloudFront経由で配信しているS3の画像が「キャッシュの設定をしてくだいさい」的な感じで警告になる場合がありました。

原因はCloudFrontのキャッシュにはヒットしているのですが、レスポンスにCache-Controlが無いため、PageSpeed Insightsではブラウザキャッシュの設定をしてくださいと出ているようだと思いました。

本方法と別方法で、S3の画像にカスタムヘッダーでCache-Controleをつければ解決する方法もあるようですが、画像アップロードのたびにカスタムヘッダー情報を付けたりする方法が少し面倒でCloudFrontの設定で付けれないか試してみたのがきっかけになります。

参考
https://www.aws-room.com/entry/cloudfront-s3

設定

CloudFrontのレスポンスヘッダーを新規作成

1. CloudFrontのレスポンスヘッダーの新規作成画面をひらきます
   

2. 名前・説明を入れ、カスタムヘッダーを追加します。それ以外はデフォルトのままです。
   

ビヘイビアの設定に追加する

1. CloudFrontのビヘイビア編集画面に入ります
2. レスポンスヘッダーポリシーで先程作成したポリシーを選択し、変更を保存します
   

確認

1. PageSpeed Insightsで確認する
2. ブラウザで開発ツールなどでResponse Headersを確認する
   （下記画像はChrome > デベロッパーツール > ネットワークタブ > 任意の画像を選択）
   

以上になります。