独自ドメインで静的サイトを HTTPS 公開する ― DNS・TLS 証明書・CDN を組み合わせる
このハンズオンでは、S3 でホスティングした静的サイトを、独自ドメイン + TLS 証明書 + CDN で本番同等の構成で公開します。Route 53 で DNS を管理し、ACM で無料の TLS 証明書を発行、CloudFront でグローバル配信・キャッシュ・HTTPS 化を行います。
| 項目 | 内容 |
|---|---|
| 対象サービス | Route 53、AWS Certificate Manager（ACM）、CloudFront、S3 |
| 主な学習内容 | ホストゾーン / DNS レコード / TLS 証明書 / CDN / キャッシュ / HTTPS リダイレクト |
| 所要時間 | 75〜90 分（証明書検証・配信反映の待機含む） |
| 難易度 | ★★★☆☆（中級者向け） |
| 前提知識 | DNS の基本（A / CNAME レコード）・S3 の基礎 |
| 費用目安 | ホストゾーン 0.50 USD/月 + ドメイン登録料（年額）。CloudFront/ACM は無料枠あり |
このハンズオンには 所有しているドメイン が必要です。Route 53 で新規取得（.com で年額約 13 USD〜）するか、お名前.com 等で取得済みのドメインのネームサーバーを Route 53 に向けてください。
us-east-1（バージニア北部） で発行するexample.com）があることwww.example.com を使用します（適宜読み替え）ドメインの DNS レコードを管理するホストゾーンを準備します。
マネジメントコンソールで 「Route 53」 を開き、「ホストゾーン」→「ホストゾーンの作成」 をクリックします。
「ホストゾーンの作成」をクリックします（Route 53 で取得したドメインなら既に存在します）。
作成されたホストゾーンの NS レコードに表示される 4 つのネームサーバーを確認します。
ns-123.awsdns-12.com ns-456.awsdns-45.net ns-789.awsdns-78.org ns-012.awsdns-01.co.uk
他社で取得したドメインの場合は、レジストラの管理画面でネームサーバーをこの 4 つに変更します（反映に最大 48 時間）。Route 53 取得なら設定不要です。
CloudShell や端末で dig NS example.com +short を実行し、AWS のネームサーバーが返ってくれば委任完了です。
配信元（オリジン）となる S3 バケットを作成し、サンプル HTML を置きます。
「S3」→「バケットを作成」 をクリックします。
「バケットを作成」をクリックします。S3 は公開しません。CloudFront 経由のみでアクセスさせます。
以下の内容で index.html を作成し、バケットにアップロードします。
<!DOCTYPE html> <html lang="ja"> <head><meta charset="UTF-8"><title>Handson Site</title></head> <body style="font-family:sans-serif;text-align:center;padding:4rem"> <h1>🚀 CloudFront + ACM 配信成功！</h1> <p>このページは独自ドメイン + HTTPS で配信されています。</p> </body> </html>
バケット内に index.html が存在すれば OK です。この時点ではまだブラウザからアクセスできません（公開していないため）。
CloudFront で使用する ACM 証明書は バージニア北部（us-east-1） で発行しないと CloudFront から選択できません。コンソール右上のリージョンを us-east-1 に切り替えてください。
「Certificate Manager（ACM）」→「証明書をリクエスト」 をクリックします。「パブリック証明書をリクエスト」を選択して次へ。
「リクエスト」をクリックします。
証明書の詳細画面を開き、「Route 53 でレコードを作成」 ボタンをクリックします。検証用の CNAME レコードがホストゾーンに自動追加されます。
数分〜十数分で証明書ステータスが 「発行済み（Issued）」 になります。
ACM の証明書ステータスが「発行済み」になり、ドメイン横に緑のチェックが付けば成功です。
S3 をオリジンにした CDN を作成し、HTTPS と独自ドメインを設定します。
「CloudFront」→「ディストリビューションを作成」 をクリックします。
「コントロール設定を作成」で OAC を新規作成して紐付けます。
| 設定項目 | 設定値 |
|---|---|
| ビューワープロトコルポリシー | Redirect HTTP to HTTPS |
| 許可する HTTP メソッド | GET, HEAD |
| キャッシュポリシー | CachingOptimized |
| 代替ドメイン名（CNAME） | www.example.com |
| カスタム SSL 証明書 | ステップ 3 で発行した ACM 証明書 |
| デフォルトルートオブジェクト | index.html |
「ディストリビューションを作成」をクリックします。
ディストリビューション作成後、画面上部に表示される 「ポリシーをコピー」 から S3 バケットポリシーをコピーし、S3 バケットの「アクセス許可」→「バケットポリシー」に貼り付けます。これで CloudFront だけが S3 を読めるようになります。
{
"Version": "2012-10-17",
"Statement": [{
"Effect": "Allow",
"Principal": { "Service": "cloudfront.amazonaws.com" },
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::handson-cf-origin-xxxx/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::<AccountId>:distribution/<DistributionId>"
}
}
}]
}
ステータスが「有効（Enabled）」になり、https://<xxxx>.cloudfront.net にアクセスしてサンプルページが HTTPS で表示されれば成功です（反映に数分かかります）。
Route 53 の Alias レコードで独自ドメインを CloudFront に向けます。
Route 53 → ホストゾーン example.com → 「レコードを作成」 をクリックします。
「レコードを作成」をクリックします。
ブラウザで https://www.example.com にアクセスします。
1 回目のアクセス後、レスポンスヘッダーの X-Cache を確認します。Miss from cloudfront（初回）→ 再アクセスで Hit from cloudfront（キャッシュヒット）に変わります。S3 の index.html を更新しても、TTL の間はキャッシュが返る点も確認しましょう。即時反映したい場合は CloudFront の 「無効化（Invalidation）」 で /* を実行します。
https://www.example.com で鍵マーク付き（HTTPS）でサイトが表示されるX-Cache: Hit from cloudfront が返るホストゾーンは存在するだけで月額課金（0.50 USD）されます。ドメインを使い続けない場合は削除してください。CloudFront・ACM・S3 は使わなければ課金は最小です。
www の A レコードを削除| 習得したスキル | 実践内容 |
|---|---|
| DNS 管理 | ホストゾーン作成・NS 委任・Alias レコード設定 |
| TLS 証明書 | ACM で DNS 検証による無料証明書発行（us-east-1） |
| CDN 配信 | CloudFront ディストリビューション + OAC で S3 を安全配信 |
| HTTPS 化 | HTTP→HTTPS リダイレクト・独自ドメイン SSL |
| キャッシュ制御 | X-Cache 確認・無効化（Invalidation） |