Route53を用いてCloudFrontに独自ドメインを設定する

1 はじめに

皆さんはRoute53を用いてCloudFrontに独自ドメインを設定したいと思ったことはありますか？
私はあります。
CloudFrontのURLを見かけるたびに独自ドメインを設定したくてウズウズしてしまいます。
さすがに見知らぬURLに独自ドメインを設定することはできないため、この記事にて勘弁してください。

2 全体イメージ

このようなイメージで作成します。
ACMでサーバー証明書を作成し、それをCloudFrontとRoute53に紐づけます。
Route53をCloudFrontに紐づければ完了です。

3 実施手順

以下の手順で実施します。
1 ドメイン取得可否確認
2 Route53のホストゾーン作成
3 ドメイン取得・Nameservers登録
4 Certificate Managerでのサーバー証明書作成
5 S3バケット作成
6 CloudFrontディストリビューション作成
7 Route53レコード作成

1 ドメイン取得可否確認

私は以下サイトにて無料ドメインを取得します。
https://my.freenom.com/clientarea.php

すでにドメインを取得している方はそちらを、そうでない方は私と一緒にこちらのサイトで作成しましょう。
まずは、アカウントを作成してください。アカウント作成後、以下のような画面になるのでドメインが取得可能かチェックしておきましょう。

2 Route53のホストゾーン作成・NameServers登録

Route53にてホストゾーンの作成を行います。ドメイン名は先ほどの取得可能なものを使用します。

ホストゾーン作成後、NSレコードが４つ作成されるため、これらを控えましょう。

3 ドメイン取得・Nameservers登録

freenumに戻って作業します。先ほど確認したドメインをCheckOutし、「Use DNS」→「Use Your own DNS」→「Nameserver」に、先ほどのNSレコードを二つ入力します。（末尾の「.」は不要ですので消してください。）

その後、My Domainにてドメインを選択し、「Management Tools」→「Nameservers」を選択します。こちらに残りのNSレコードを記入し、登録します。
（末尾の「.」は不要ですので消してください）

Nameserversの登録はfreenumでは最大で24時間かかります。以下コマンドを用いれば ANSWER SECTION: に登録完了したNameserverが表示されます。

$ dig NS <ドメイン名>

4 Certificate Managerでのサーバー証明書作成

AWS Certificate Manager(ACM)を利用し、SSL/TLS通信(HTTPS)に必要なサーバ証明書を発行します。CloudFrontでACMを利用するにはリージョンをバージニア（us-east-1）に設定します。

大事なことなのでもう一度言いますが、リージョンをバージニア（us-east-1）に設定します。

まず、「証明書のリクエスト」をクリックします。証明書のタイプは「パブリック証明書のリクエスト」を選択しましょう。ドメイン名は今回利用するドメインを指定し、「DNS の検証」を選択します。
「確定とリクエスト」をクリックしたら検証について表示されます。「Route53でのレコードの作成」を選択し、レコードを作成しましょう。
なお、手順2のNameserver登録完了していなければ証明書の検証は終わりません。焦らずに待ちましょう。

5 S3バケット作成

S3バケットの作成を行います。バケットの作成をクリックし任意のバケット名で作成します。（私はドメイン名で作成するのをお勧めします。）パブリックアクセスはブロックするようにしましょう。

6 CloudFrontディストリビューション作成

Create Distributionでディストリビューションを作成します。
Origin Settingsに関しては、Origin Domain NameでS3のバケットを指名し、Restrict Bucket AccessをYesにします。Origin Access Identityは必要に応じ選択してください。Grant Read Permissions on Bucket を「Yes, Update Bucket Policy」にします。

Default Cache Behavior Settings の Viewer Protocol Policyは「Redirect HTTP to HTTPS」にしましょう。
Distribution SettingsではAlternate Domain Names(CNAMEs)に取得したドメインを入力します。SSL Certificateは「Custom SSL Certificate (example.com):」を選択し、先ほどACMで作成した証明書を選択します。Custom SSL Client Supportは「SNI」とすると、追加費用発生を回避できます。DistributionのStateがEnabledになるまで待ちます。

7 Route53レコード作成

最後にROute53に作成したホストゾーンにCloudFrontを指定したレコードを作成しましょう。「レコードの作成」を選択し、エイリアスをオンにします。「CloudFrontディストリビューションへのエイリアス」→「米国東部（バージニア北部）」「作成したディストリビューション」を選びレコードを作成します。
これで、独自ドメインをCloudFrontに設定することができました！

4 参考

以下サイトを参考にされて頂きました。ありがとうございます。

・無料ドメイン(.tk)とRoute53を利用して0円でHTTPS環境を設定してみた
https://dev.classmethod.jp/articles/mesoko-r53-cdn/

・ACM証明書発行をDNS検証で行う【エンジニアブログより】
https://www.wantedly.com/companies/serverworks/post_articles/101309

・CloudFront で S3 静的ウェブサイトホスティングを SSL/TLS に対応させる
https://dev.classmethod.jp/articles/tls-for-s3-web-hosting-with-cloudfront/

5 終わりに

これにてすべての手順は完了です。
皆さんもCloudFront・Route53・ACMを用いて、素敵な独自ドメインライフを楽しんでください。