CloudFront(環境A)×Route53(環境B)でカスタムドメインを設定してみた

すでに取得済みのドメインと、CloudFrontでデプロイしたアプリがある前提です。
用途によってAWSアカウントを複数使い分けているのですが、環境があちこちにあるおかげでドメインの設定周りで少し悩んだので備忘録として残しておきます。記載の内容を試す方は自己責任でお願いします。

アプリをデプロイしているアカウントが「環境A」で、大元のドメインを取得しているアカウントを「環境B」と呼称します。

① 環境AのCertificate ManagerでSSL証明書をリクエスト

前提に書いていませんでしたが、アプリはhttpsで接続したいので証明書が必要になります。証明書無しの状態でRoute53の設定をすると、そもそも遷移先のドメインが異なるのでアプリ側から40xエラーを吐かれました。大人しく証明書のリクエストをしましょう。サブドメインは「*.hoge.com」みたいなワイルドカードで設定しました。

② 環境BのRoute53でCNAMEのレコードを追加

リクエストした証明書は、このまま放置しても使えるようになりません。指定したドメインが自分のものである証明をする必要があるようです。そこで、環境Aでリクエストした証明書の詳細をよく見ると、「CNAME」の記載があります。このCNAME名とCNAME値をそれぞれコピーしましょう。

環境BのRoute53を開き、対象のホストゾーンのレコードがずらっと並んでいるリストまで辿り着いたら、レコードを1つ作成します。先ほどコピーしたCNAME名をそのまま貼り付けるとドメイン部分が重複するので、よく見てサブドメインの部分だけ貼り付けましょう。値はそのままCNAME値をペーストします。レコードタイプはCNAMEですね。

③ 環境BのRoute53でアプリのサブドメインを追加

ついでにサブドメインのレコードも追加しちゃいましょう。環境AのCloudFrontでデプロイ済みのディストリビューションを開き、「ディストリビューションドメイン名」をコピーします。
そして、環境BのRoute53に追加しておきます。レコード名がアプリで使用したいドメインで、値の部分に先ほどコピーしたディストリビューションドメイン名をペーストします。このとき、スキーム(https://)の部分は不要です。こちらもレコードタイプはCNAMEですね。

④ お菓子でも食べて待とう

①の証明書リクエスト、ちゃんと承認されるまで地味に時間が掛かるのでちょっと待ちます。環境AのCertificate Managerを開き、適度に更新ぽちぽち。ステータスの部分が「発行済み」になれば次へ進みます。
※待てど暮らせどステータスに変化が無い場合は、②の設定がミスっている可能性があります。参考になるかは不明ですが、私の場合は10分くらいでオールグリーンになってました。

⑤ 環境AのCloudFrontで代替ドメイン名を設定

ここまでくればあと少しです。環境Aでデプロイしたディストリビューションを開き、設定の編集をします。代替ドメイン名は、③で設定したものを入力します。また、カスタム SSL 証明書は①で発行したものを指定します。設定を保存すると、おそらく勝手にデプロイが走ります。ここも地味に時間が掛かるのでゆっくり待ちましょう。私のように更新連打はしないであげてください。
ディストリビューションの最終変更日に現在時刻が表示されたら任務完了です。お疲れ様でした。さっそく、作ってみたドメインでアプリにアクセスしてみましょう！

最後に

プロの皆さんは公式のガイドを読めば一目で分かるのかもしれませんが、初めてすぎてなかなか手強かったです…。ただ、設定いじくってる間は楽しかったのでアドでした。
拙い文章で大変恐縮ですが、同じように悩んでいる方の目に留まれば幸いです。ありがとうございました。