🌀
素で『なにもしてないのにふぁいるがひらけなくなった…？』時の調査メモ：S3+CloudFrontによるコンテンツ配信時のcors対応
この記事は何
- トラブル対処結果の備忘録
- ちまちま運営しているwebサービスでは、こちらの図のように静的コンテンツ配信用にS3+CloudFrontを使っていますが、ある日突然、本当に、何もしていないのに、コンテンツが表示されなくなるトラブルが発生しました…😢
- 開発者ツールのコンソールを見るに、苦手意識を刷り込まれているcorsさんが原因じゃないですか…。うわぁ…。過去に一度躓いて、調査して対処→解消したと思ったのに…。
- 数カ月後の自分のために、トラブルシューティングをまとめておきます。
前提
- S3のcors設定は済。（設定はこちら）
私の処置の時系列は置いておいて結論
勉強不足なので、全部～～のようですに置き換えてください…。
- CloudFrontにはcorsに関係する設定として、
cache policyとorigin request policyがあります。この2つを適切に設定する必要があります。 - S3側でcorsを設定しているのにも関わらず怒られるのは、CloudFrontの設定によってS3に必要なリクエストヘッダが飛ばせていない時です。
- こちらで大変わかりやすく解説されています。
- 解釈させていただくと、『ユーザの環境によってリクエストヘッダが違うが、ヘッダの転送設定が不適切なために、自分の環境とは違うリクエストへのレスポンスキャッシュを使うことになる』ことが原因のようです。
- 自分以外のユーザがシステムを使うことで生まれる類のエラーということになるので、これは開発中には見つけづらいですね…。
それで、どう設定するんや
※間違いなどあればコメントを頂けると幸いです。
CloudFrontの設定項目が変わったので、なかなか新しい情報にたどり着けませんでした…。
origin request policy
こちらはわかりやすく、S3との組合せ用に用意されているmanaged origin request policyがあるのでそれを選択します。
Name: Managed-CORS-S3Origin
ID: 88a5eaf4-2fd4-4709-b370-b4c650ea3fcf
This policy includes the headers that enable cross-origin resource sharing (CORS) requests when the origin is an Amazon S3 bucket.
Policy settings
Query strings included in origin requests: None
Headers included in origin requests:
Origin
Access-Control-Request-Headers
Access-Control-Request-Method
Cookies included in origin requests: None
cache policy
こちらを参照しました。
オリジンに CORS を設定した後、オリジンに必要なヘッダーを転送するように CloudFront ディストリビューションを設定します。オリジンが S3 バケットである場合は、通常、次のヘッダーを Amazon S3 に転送するように配信を設定する必要があります。
Access-Control-Request-Headers
Access-Control-Request-Method
Origin
キャッシュポリシーを使用してヘッダーを転送するには、次の手順を実行します。
- CloudFront コンソールを使用してキャッシュポリシーを作成する手順に従います。
- [Cache key contents] (キャッシュキーの内容) の [Headers] (ヘッダー) で、[Whitelist] (ホワイトリスト) を選択します。ヘッダーのリストから、オリジンで必要なヘッダーの 1 つを選択します。[Add header] (ヘッダーの追加) をクリックします。オリジンで必要なすべてのヘッダーについて、この手順を繰り返します。
- ポリシーをアタッチする動作の要件に基づいて、キャッシュポリシーの他のすべての設定を完了します。
- CloudFront ディストリビューションの関連する動作にキャッシュポリシーをアタッチする手順に従います。
閑話
両者とも見事に同じ項目を指し示しています…。こう、なんとか、一括でうまいことできると嬉しいですが…。
おわりに
冒頭の私のケースでは、origin request policyの方は設定済みでしたが、cache policyは手をつけていませんでした。cache policy設定後はエラーが解消したので、以上の解釈と処置が正しいことを祈るばかりですね…。
Discussion