当方の環境
・はてなブログ
・ドメインはRoute53で取得
ドメイン「tachi-machi.net」を取得し、独自ドメインに設定した。
http://tachi-machi.net
https://tachi-machi.net
これで、上記のURLでアクセスできることは確認できた。
www.tachi-machi.net
続いて、次のURLも同じページに遷移するようにURLを正規化したい。
http://www.tachi-machi.net
https://www.tachi-machi.net
S3の静的Webサイトホスティングでリダイレクト(httpのみの場合)
S3に新しくバケットを作成する。名前は「www.tachi-machi.net」。
バケットは公開設定としておく。
2. 静的Webサイトホスティングを設定
バケットのプロパティの「Static website hosting」を設定。
「リクエストをリダイレクトする」にチェックし、ターゲットバケットまたはドメインに飛ばしたい先「tachi-machi.net」を、プロトコルに「https」を指定
3. Route53のAレコード設定をS3に向ける
Route53のホストゾーンにレコードセットを作成。
www.tachi-machi.netのAレコードを作成し、エイリアスに「はい」を選択、先ほど作成したS3のバケットを指定する。
以上で、「http://www.tachi-machi.net」にアクセスした際に正常にリダイレクトされる。
しかしこれはhttpのみの対応…
この静的Webサイトホスティングはhttpにしか対応していないため、まだ「https://www.tachi-machi.net」にアクセスした際はページが見つからない状態である。
そこで、CloudFrontを経由してhttps対応する方法を取る。
CloudFrontを経由したリダイレクト
1. S3のバケットにindex.htmlを作成
0バイトの空ファイルで良いので、先ほどのS3バケットにindex.htmlを作成する。
アクセス権は公開としておく。
2. Webサイトホスティングの設定を変更
先ほどは「リクエストをリダイレクトする」を選んでいたが、「このバケットを使用してウェブサイトをホスティングする」に変更。
インデックスドキュメントに「index.html」を指定
リダイレクトルールには以下を記述する。
<RoutingRules>
<RoutingRule>
<Redirect>
<HostName>tachi-machi.net</HostName>
<ReplaceKeyWith/>
</Redirect>
</RoutingRule>
</RoutingRules>
また、この画面に書いてあるエンドポイントをコピーしておくこと。
AWS Certificate Managerより、SSL証明書を発行する。
申請時のドメインは「*.tachi-machi.net」とした。
検証についてはDNSのCNAMEを確認する方法で、Route53の場合はボタンを押すだけで勝手にCNAMEのレコードが差し込まれる。
数分も立たずに発行済みとなった。
CloudFrontから新規にWebのディストリビューションを作成する。
Originドメイン名には一覧から選択できるS3バケットではなく、先ほどのS3エンドポイントのURLを入力。(S3バケット指定してしまうと、httpsで来た場合にS3にもhttpsアクセスしようとし、アクセス拒否となる。エンドポイントのURLを入力すると、OriginへのHTTP onlyが設定される)
Viewer Protocol Policyは「Redirect HTTP to HTTPS」を選択
Alternateドメイン名(CNAMEs)に「www.tachi-machi.net」を指定
SSL証明書に先ほど作成したACMの証明書を指定。
Default Root Objectに「index.html」を指定。(これがないとCloudFrontがファイル見つかりませんのエラーを返す)
5. Route53のAレコード設定をCloudFrontに向ける
www.tachi-machi.netのAレコードを編集または作成し、エイリアスに「はい」を選択、先ほど作成したCloudFrontを指定する。
終わり!
以上で、「http://www.tachi-machi.net」および「https://www.tachi-machi.net/」にアクセスした際に正常にリダイレクトされた。
まとめ:仕組みの整理
https apexドメインの場合:Route53 DNSのAレコード設定によりはてなブログのアドレスへ。
http apexドメインの場合:上記に同じ。http→httpsははてなブログがよろしくやってくれている。通常はApache等で内部的に301リダイレクトをかける。
https www付きの場合:Route53 DNSのAレコードでCloudFrontへ → (httpに変換され)S3エンドポイントへ → apexドメインへリダイレクト
http www付きの場合:上記に同じ。
追記:www付きをブログのメインドメインに変更した。
Apexドメイン側にファイルを配置したい関係で、www付きを本ブログのURLとした。
・はてなブログのドメイン名を変更し、www付きを正規とする
・DNS側のwww付きをCNAMEでhatenablog.comへ渡すよう変更(はてなブログ公式手順の通り)
・S3側はapexドメインのバケットを新しく作成
・CloudFrontからは、apexドメインのS3に遷移するようにし、CNAMEもapexドメインに変更する