概要
本サイトで、AWS CloudFront を使い始めました。 設定の際、単にS3をオリジンとした CloudFront を用意すればいいだけかと思いきや、キャッシュとCORS周りで思うようにいかなかった箇所があったのでメモっておきます。 S3 + CloudFront
S3上の画像が見れる状態であれば、以下の設定でCloudFrontのディストリビューションを作成すれば、CloudFrontドメインからS3にアクセスできるようになる。
上手くいかなかった箇所と対処法
CORSエラー
cropper.js を使用している個所でCORSエラーが発生した。cropper.js内で画像を取得しに行く際に起きている様子。ちなみにこのエラーはS3のみの際も起きており、その時はS3のCORS設定を行うことで解消した。 対処法
ビヘイビア > キャッシュキーとオリジンリクエスト にて以下の設定を行った。
キャッシュによる即時反映の阻害
例えばサムネイル画像など、同じファイル名の画像データを更新した際、CloudFront のキャッシュが残っているため、画面に反映されるまで時間がかかってしまう。
対処法
公式のサポートにいくつかの対処法が載っていた。キャッシュクリアは料金的なコストがかかるのと、もともとサムネイルなどの決まったファイル名の画像にはクエリによるバージョン情報を付与していた(CloudFrontへのリクエストに既に付いている)ので、ここでもその方法を使う。ただし、CloudFrontはそのままではクエリパラメータを扱ってくれないため、キャッシュキー設定から有効にする必要がある。 CloudFrontでクエリパラメータを有効にする方法は以下の通り、
