AWS CloudFront S3 HTTPSのSPAサイトでwwwなしからwwwありへリダイレクトする


経緯

以前、
AWS CloudFrontを使用してS3で静的ページ(SPA)をホスティングする
でサイトを公開したのですが、ブラウザから”www.”をつけずにアクセスするとエラー( DNS_PROBE_FINISHED_NXDOMAIN )となったので、”www.”を付けずにアクセスされた時にwww付きのURLにリダイレクトされるよう設定します。

S3にwwwなし用のバケットを作成

S3のメニューより「バゲット作成」をクリックします。

バケット名にwwwなしのドメイン名を入力して「バケット作成」ボタンを押します。

作成されたバケットを選択して、プロパティーから「Static Website hosting」を選択します。
「リクエストをリダイレクトする」を選択して、「ターゲットバケットまたはドメイン」にwwwありドメイン名を入力しします。プロトコルは”https”を入力します。
エンドポイント情報は後ほど必要になるのでコピーしておいてください。

wwwなし用のcloudFrontのdistributionを作成

基本的には、
「AWS CloudFrontを使用してS3で静的ページ(SPA)をホスティングする」のCloudFront設定
で設定した内容と同じですが、1点注意があります。
「Origin Domain Name」でS3のバケット(wwwなし)を選択できるのですが、ここで選択するのではなく、S3で確認したバケットのエンドポイントを入力してください。
そうしないとうまくリダイレクトできません。

「Alternate Domain Names」にFQDNを入力します。(WWWなし)
「Custom SSL Certificate」にチェックをつけてACMで登録したSSL証明書を選択します。

httpsのみのアクセスのみ許可(httpの時はredirect)するので、「Viewer Protocol Policy」は”Redirect HTTP to HTTPS”を選択して「Yes,Edit」を選択して保存します。

wwwなし用のRoute 53の設定

該当のホストゾーンのレコードを作成します。
「タイプ」はAレコード
「エイリアス先」には先ほど作成した、CloudFrontのディストリビューションを選択します。

設定確認

DNSの反映には数分かかります。
ブラウザより、wwwなしのURLでwwwありにリダイレクトされることを確認して完了です。

, , ,

コメントを残す

メールアドレスが公開されることはありません。