シーン
- S3バケットにHTML/CSS/JSなどの静的ファイルを配置して、CloudFrontで配信する構成を作りたい。
- 配信時のドメインは独自ドメインを使いたい。
- ドメインは「wwwあり」「wwwなし」のどちらも使えるようにしたい
設定
各サービスの設定時に、以下を気をつけておけば問題ない。
CloudFront
- オリジンドメイン
-
対象のS3バケットを選択
-
- S3バケットアクセス
-
Origin access control settingsを選択
-
- ビューワープロトコルポリシー
-
Redirect HTTP to HTTPS/HTTPS onlyのどちらかを選択
-
- カスタム SSL 証明書
- ACMで発行した証明書を選択
- 代替ドメイン名 (CNAME)
- 「wwwあり」「wwwなし」の２件とも登録
上記以外は基本的にデフォルト設定で問題ない。
Route53
- レコード
- wwwなし用のCloudFrontディストリビューションに対して、Aレコード（エイリアス）を登録する
- wwwあり用のCloudFrontディストリビューションに対して、Aレコード（エイリアス）を登録する
CORSの設定
JSONやJavascriptでCORSエラーになるため、以下の設定も必要。
CloudFront
- キャッシュキーとオリジンリクエスト
-
Cache policy and origin request policy (recommended)を選択する - キャッシュポリシーに
Elemental-MediaPackageを設定する - オリジンリクエストポリシーに
CORS-CustomOriginを設定する - 任意のレスポンスヘッダーポリシーを作成する
- 特定のOriginのみを許可するポリシーを作成する
- レスポンスヘッダーポリシーに、上記で作成したポリシーを設定する
-
最後に
wwwありの設定が抜けていたために、AWSにサイトを移行したあと、wwwありURLでアクセスできなくなっていたことが発端で、調査・設定に至りました。
現在は、無事、どちらのURLでもアクセスできるようになり、一安心です。。