ドメインを購入してS3で静的サイトを公開してみた

はじめに

AWS で静的サイトを公開する構成として、S3 + CloudFront + Route53 はよく使われます。

今回はお名前.comから購入したドメインを使ってHTTPSでサイトを公開するまでの作業を整理しました。

最終構成

• Route53：DNS 管理
• ACM：HTTPS 用証明書
• CloudFront：CDN として配信
• S3：静的ファイル配置

Route53 を最初に設定する

設定作業

パブリックホストゾーンを作成します。

するとNSレコードとSOAレコードが自動生成されます。

この NS レコードをレジストラ側に設定します。
ドメインはお名前ドットコムで購入したため、お名前ドットコムのコンソールからネームサーバ設定を入れます。

反映確認

digコマンドで確認します。

$ dig mahjong-lab.com NS

; <<>> DiG 9.10.6 <<>> mahjong-lab.com NS
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 43887
;; flags: qr rd ra; QUERY: 1, ANSWER: 4, AUTHORITY: 0, ADDITIONAL: 1

;; QUESTION SECTION:
;mahjong-lab.com.               IN      NS

;; ANSWER SECTION:
mahjong-lab.com.        86400   IN      NS      ns-973.awsdns-57.net.
mahjong-lab.com.        86400   IN      NS      ns-1114.awsdns-11.org.
mahjong-lab.com.        86400   IN      NS      ns-2022.awsdns-60.co.uk.
mahjong-lab.com.        86400   IN      NS      ns-488.awsdns-61.com.

Route53 のネームサーバーが返ってきたため、切り替えが正常に完了しています。

ACM で証明書を発行する

us-east-1 を選ぶ理由

CloudFront で利用できる ACM 証明書は、
us-east-1 バージニア北部 で作成したもののみという仕様になっています。

これは CloudFront がグローバルサービスであり、証明書管理が us-east-1 に集約されているためです。

この点は公式ドキュメントや既存の技術ブログなどでも繰り返し説明されているため、
今回は最初から us-east-1 を選択できました。

証明書発行の流れ

リージョンを us-east-1 に切り替えてから、パブリック証明書をリクエストします。

検証方法はコンソール上で完結する手軽なDNS検証を選択します。

DNS 検証では CNAME レコードが必要になります。
ACM の「レコードを作成」ボタンから Route53 に追加しました。

ステータスが「保留中の検証」から「発行済み」に変わるまで、2-3分待ちました。

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

証明書が発行されたら、CloudFront を設定します。

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

オリジンに S3 バケットを指定します。設定は最小限にします。
静的サイトでログイン機能などなく、ユーザが参照できるのは、静的ファイルだけということもあり、WAFは今回は未使用です。

独自ドメインと証明書の設定

Alternate Domain Names（CNAMEs）に独自ドメインを、
Custom SSL certificate に ACM の証明書を指定します。
他の項目はデフォルトのままです。

保存後、CloudFront のデプロイが始まります。こちらは即時でした。

Route53 の A レコード設定

CloudFront の設定後、Route53 で A レコード（エイリアス）を作成します。

• レコードタイプ：A
• エイリアス：有効
• エイリアス先：CloudFront ディストリビューション

Aレコードが追加されています。

---

DNSと配信の確認

まず、DNS が正しく引けているかを確認します。

$ dig mahjong-lab.com A

; <<>> DiG 9.10.6 <<>> mahjong-lab.com A
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 8185
;; ANSWER SECTION:
mahjong-lab.com. 60 IN A 18.172.31.100
mahjong-lab.com. 60 IN A 18.172.31.23
mahjong-lab.com. 60 IN A 18.172.31.118
mahjong-lab.com. 60 IN A 18.172.31.127

CloudFrontのIPが想定通り返ってきています。

S3 にファイルを置いて動作確認

最後に、S3 にテスト用ファイルを配置して動作確認を行いました。

$ aws s3 cp test.html s3://mahjong-lab-web/
upload: ./test.html to s3://mahjong-lab-web/test.html

ブラウザでアクセスし、hello world! が表示されることを確認しました。

これにより、ユーザ→cloudfrontディストリビューション→S3 の通信が正常に動作していることを確認できました。
ちなみに、証明書を確認すると、AWS発行の証明書が適用されており、HTTPSで通信できていることも分かります。

まとめ

新しく取得した独自ドメインを使い、Route53 + ACM + CloudFront + S3 で HTTPS 対応の静的サイトを公開しました。

今回の構成では、ACM 証明書を us-east-1 で作成する必要がありました。
AWS ではサービスごとに利用可能なリージョンや制約が異なるため、
リージョンは単なる配置先ではなく、設計の前提条件として把握しておく必要があると感じました。

最後までお読みいただきありがとうございました。

PS.今回デプロイした静的サイトは麻雀の練習ツールや精算ツールで、近日公開予定です。