静的サイトジェネレータ「Hugo」でブログサイトを S3 + CloudFrontでホストするまで [第5回〜HugoをRoute53 + お名前.comで公開する〜]

2023-02-11

ブログ構築シリーズ

静的サイトジェネレータ「Hugo」を使って当ブロブサイトを S3 + CloudFront の構成でホストすることができましたので、構築~デプロイまでの流れをブログ構築シリーズとして全６回でご紹介していきます。第5回はAWSのマネージドサービスであるRoute53とドメインサービスのお名前.comでドメインを管理する方法を紹介します。

1. 第1回〜Hugoの環境構築編〜　
2. 第2回〜HugoにMainroadテーマ適用編〜
3. 第3回〜Hugoを S3 + CloudFront でホストする〜　
4. 第4回〜HugoをGithub Action でS3にプッシュする〜
5. 第5回〜HugoをRoute53 + お名前.comで公開する〜 ☆今回はこちらを紹介します
6. 第6回〜HugoのSEO対策〜

TL;DR

本記事でわかることは以下の通りです。

☆ お名前.comでドメインを取得し、Route53でドメインを管理する方法
☆ ACMの発行とDNS検証の手順
☆ CloudFrontディストリビューションをSSL化
☆ Aliasレコードの設定方法

ざっくり構成図

1. お名前.comでドメインを取得する

こちらの公式サイトを参考にドメインを取得してください。ドメインの種類に応じて初年度は数円~数百円で取得することができます。１年間ブログを運営して採算が取れそうであれば更新を検討しても良いかもしれません。

ちなみに今回、Route53でドメインを取得せずお名前.comで取得した理由ですが、初年度にかかるコストを比較しています。

Route53 → 11ドル/年
お名前.com → 1円~/年

上記のドメイン発行費用の他に、ホストゾーンの管理に最低毎月0.5ドルかかりますが、こちらはどこでドメインを発行しようがRoute53を利用する限りかかる費用になります。

参考：https://aws.amazon.com/jp/route53/pricing/

2. Route53のNS(ネームサーバ)でドメインを管理する

AWSマネジメントコンソールにログインし、Route53をクリックします。ホストゾーンの作成をクリックします。

ホストゾーンの名前は必ずお名前.comで登録したドメイン名にしてください。 その他はデフォルト設定のまま作成します。

ホストゾーンを作成すると、ドメインに関連付けされたNSレコード(ネームサーバ)４つとSOAレコードが表示されます。このネームサーバはお名前.comで登録するのでメモしておきましょう。

3. お名前.comにNSを設定する

お名前.comの画面にログインし、ドメイン一覧にある登録したドメインのネームサーバのカラムの設定ボタンをクリックします。

ネームサーバの選択項目で、「その他」をクリックし、ネームサーバを入力するタブに Route53で取得したネームサーバ４つを入力します。

ネームサーバの登録には最大72時間かかるらしいので気長に待つしかなさそうです。

4. 設定確認

ここまでの作業が完了したら、ネームサーバがRoute53管理に変更されているか確認しましょう。

$ nslookup -type=NS [ドメイン名]
Server:		8.8.8.8
Address:	8.8.8.8#53

Non-authoritative answer:
technowanko.com	nameserver = ns-xxx.awsdns-21.org.
technowanko.com	nameserver = ns-xxx.awsdns-56.co.uk.
technowanko.com	nameserver = ns-xxx.awsdns-04.com.
technowanko.com	nameserver = ns-xxx.awsdns-36.net.

Authoritative answers can be found from:

「Non-authoritative answer」の欄に Route53で作成されたネームサーバのが表示されていれば設定は完了です。

５. ACMを発行する

バージニア北部にあるCloudFrontに適用しますので、必ずバージニア北部のリージョンでACMを発行してください。

ACMは無料でオリジンリソースへの通信をSSL化することができる使わない理由がないサービスです。 ACMで証明書を発行し、証明書をCloudFrontに登録することで実現できます。オリジンに使用しているS3だけではSSL通信はできません。また、CloudFrontではTLS1.2のみの通信を許可するよう設定することが可能ですので、よりセキュアな環境を簡単に構築することができます。

ACMへ遷移し、パブリック証明書をリクエストします。登録するドメイン名は、必ずお名前.comで登録したドメイン名を指定してください。

作成後、「Route53でレコードを作成」をクリックします。

「レコードを作成」をクリックします。 ※Route53にCNAMEレコードが作成されるのに最大30分かかることがあるそうです。

ちなみに公式ドキュメントにCNAMEレコードの役割が記載されてます。

この値は、証明書を自動更新するために ACM が使用する AWS ドメインを指すエイリアスです。CNAME レコードを DNS データベースに追加できるのは 1 回のみです。証明書は使用中で CNAME レコードが残っている状態であれば、証明書は ACM によって自動的に更新されます。

https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/dns-validation.html

署名書のステータスが発行済みになれば作成完了です。

６. お名前.comにCNAMEを登録

ACM登録時にRoute53にCNAMEレコードを作成しましたが、このCMANEをお名前.comにも登録する必要があります。

CNAMEってなんだよって思う方いると思いますが、簡単に言うとドメインに対する別名を登録していて、別名のドメインに対してリクエストを送信した場合は、正式なドメインに名前解決してくれるみたいです。

ダッシュボードからドメイン設定＞ネームサーバー設定＞ DNS設定/転送設定をクリックする。
続いて、[DNS設定/転送設定 - ドメイン一覧]から、対象のドメインを選択し、次に進みます。

[DNSレコード設定を利用する] ＞ [設定する]の選択し、さらに次に進みます。

[A/AAA/CNAME/MX/TXT/SRV/DS/CAAレコード]に、ACMで取得した検証用のCNAMEを設定・追加します。

NSレコードをすでに登録していると思いますので、忘れずにチェックボックスにチェックを入れてください。
※忘れると、削除されてしまいます。

ここまで入力できましたら設定ボタンをクリックしてください。

7.cloudfrontディストリビューションの設定

CloudFrontディストリビューションの設定から作成したACMの関連付けを行います。一般タブ＞設定の編集をクリックします。

代替ドメインを設定する場合は、ここで入力します。 (ex. www.xxx.com )

カスタムSSL証明書に作成したACMが表示されますので選択します。

また、セキュリティポリシーで推奨と記載されているものを選択します。

これでCloudFrontの設定は完了です。

8.Aliasレコードの設定

最後に、Route53でAliasレコードを設定します。
ちなみにAliasレコードとは、AWSリソースがデフォルトで持っているDNS名をIPアドレスの代わりに入力できるようにしてくれるものです。
通常は、AレコードでIPアドレスを指定しますが、AWSリソースを指定する場合IPアドレスで設定すると可変であるリソースも存在するので最適解ではありません。
そこでAWSリソースが持つFQDNを指定することができます。

Route53より対象のドメインを選択しレコードを作成をクリックします。
レコードタイプに「A」を選択し、エイリアスの選択を有効化します。
すると、ルーティング先のタブが表示されるので、CloudFrontディストリビューションを選択し、作成したリソースを選択してください。

あとは、作成をクリックし、完了です。

お好きなブラウザでドメイン名を入力すると、リクエストが成功するはずです。

まとめ

今回のドメイン管理やSSL化については知識がないと何をやっているのか理解が難しい内容かと思います。ただこのあたりを調べて理解できるとサイトがどのように構成されているかを知るきっかけになるので面白いと思います。ぜひ調べてみてください。