たちまち。

即席で役に立つこと。

独自ドメインでのapex(ネイキッド)ドメインへのアクセスを正規化する【AWS利用】

 

当方の環境

はてなブログ

ドメインは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のみの場合)

1. 新規バケットの作成

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>

また、この画面に書いてあるエンドポイントをコピーしておくこと

3. SSL証明書の取得

AWS Certificate Managerより、SSL証明書を発行する。

申請時のドメインは「*.tachi-machi.net」とした。

検証についてはDNSのCNAMEを確認する方法で、Route53の場合はボタンを押すだけで勝手にCNAMEのレコードが差し込まれる。

数分も立たずに発行済みとなった。

4. CloudFrontのディストリビューション作成

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ドメインに変更する