Amazon Web ServicesでのCloudFrontを使ったAmazon S3 CORS設定

Amazon S3からCloudFront（CDN）経由で静的コンテンツを配信している場合、フォントや画像、その他の静的コンテンツをユーザーに配信する際におそらくエラーが発生するだろう。実際のところ、複雑な話ではない。この問題はAmazon S3バケットのCORS設定で修正できる。

Amazon S3 CORSとは？

Cross Origin Resource Sharing（別名CORS）。CORS仕様は、プライマリコンテンツを提供したドメイン以外のドメインにリクエストを行うウェブアプリケーションを構築する能力を提供する。

Step 1: AWS Webコンソールでバケットの権限設定を開く

https://s3.console.aws.amazon.com にアクセスし、認証情報でS3コンソールにサインインして、CloudFrontに接続されているバケットを選択する。

Step 2: CORS設定を適用する

「アクセス許可」タブに「CORS設定」セクションがある。このセクションを選択し、以下のコードを適用する:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://YOURWEBSITEADDRESS.com</AllowedOrigin>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

貼り付けた後、<AllowedOrigin></AllowedOrigin>を自分のウェブサイトアドレスに変更し、「保存」ボタンをクリックする。

結論

おめでとう！CORS設定が正常に完了し、Amazon S3バケットにあるコンテンツをユーザーが閲覧できるようになった。