🐯

【AWS 】Route53 + ACM + CloudFront + S3で構築するHTTPS静的サイト配信

2025/11/03に公開

 はじめに前回までDNSとSSL/TLSサーバー証明書の基礎について解説してきました。今回は、これらの知識を活かして、実際にAWSのサービスを組み合わせて静的サイトをHTTPSで配信する環境を構築していきます。
本記事では、以下の構成で静的サイトをホスティングする手順を詳しく解説します：

Route53: DNSの管理

ACM (AWS Certificate Manager): SSL/TLS証明書の管理

CloudFront: CDNによるコンテンツ配信

S3: 静的ファイルのストレージ

 構築の流れドメインの取得
Route53でホストゾーンを作成
ACMでSSL/TLS証明書の取得
S3バケットの作成とHTMLファイルのアップロード
CloudFrontディストリビューションの作成と設定
Route53でエイリアスレコードを設定
それでは、実際に構築を始めていきましょう。

 1. ドメインの取得
 なぜドメインが必要なのかHTTPS通信を実現するためには、独自ドメインが必要不可欠です。SSL/TLS証明書は特定のドメインに対して発行されるため、まずは自分のドメインを取得する必要があります。

 ドメイン取得方法の選択肢ドメインの取得方法は主に2つあります：
Route53で直接取得する
AWSサービスとの連携が簡単
設定が自動化される部分が多い
年間費用: .comドメインで約$12〜
外部のドメインレジストラで取得する
価格が比較的安い場合がある
管理画面が使いやすい
Route53への移管または連携が必要

 Valueドメインでドメインを取得今回はValueドメインというサービスを利用してドメイン取得をしていきます。Valueドメインは日本のドメイン取得サービスで、日本語サポートが充実しており、比較的安価にドメインを取得できます。
!ドメイン取得の詳細な手順については、こちらの記事を参考にしてください。
取得後は、Route53でホストゾーンを作成し、ネームサーバーの設定を行う必要があります。

 2. Route53でホストゾーンを作成
 ホストゾーンとはホストゾーンは、特定のドメインのDNSレコードを管理するためのコンテナです。ドメインに対するすべてのDNSクエリは、このホストゾーンに設定されたレコードに基づいて処理されます。

 ホストゾーンの作成手順AWSマネジメントコンソールで「Route 53」を検索して開く
左側メニューから「ホストゾーン」を選択


以下の情報を入力：

ドメイン名: 取得したドメイン名を入力（例：s-shiroishi.site）

説明 - オプション: 任意の説明文（今回はドメイン名と同じものを入力）

タイプ: 「パブリックホストゾーン」を選択



「ホストゾーンの作成」をクリック

 作成されたレコードの確認ホストゾーンを作成すると、自動的に2つの重要なレコードが生成されます：


 NSレコードこれらのネームサーバーを後でドメインレジストラ（Valueドメイン）に設定する必要があります。

役割: このゾーンを管理するネームサーバーを指定

内容: 4つのRoute53のネームサーバーが自動的に割り当てられます

 SOAレコード通常は変更する必要がありません。

役割: DNSゾーンの管理情報を定義

内容: プライマリネームサーバー、管理者メールアドレス、シリアル番号などが含まれます

 Valueドメインでネームサーバーを設定Route53で作成されたNSレコードに記載されているネームサーバーを、Valueドメインの管理画面で設定する必要があります。

 設定手順Valueドメインの管理画面にログイン
コントロールパネルから「ドメイン」を選択して「ドメインの設定操作」をクリック


ドメインの設定操作を選択
対象のドメインの「ネームサーバー」をクリック


ネームサーバーの変更
Route53のNSレコードに表示されている4つのネームサーバーを入力


変更を保存
すべてのネームサーバーを入力後、「保存する」ボタンをクリック
!ネームサーバーの変更は反映まで最大48時間かかる場合があります。通常は数時間で反映されますが、次の手順に進む前に反映を確認することをお勧めします。

 反映確認方法ターミナルで以下のコマンドを実行して、ネームサーバーが正しく設定されているか確認できます：
# NSレコードの確認
dig NS s-shiroishi.site

# ANSWER SECTIONに設定したネームサーバーが表示されればOK
# s-shiroishi.site.	3600	IN	NS	ns-67.awsdns-08.com.
# s-shiroishi.site.	3600	IN	NS	ns-712.awsdns-25.net.
# s-shiroishi.site.	3600	IN	NS	ns-1528.awsdns-63.org.
# s-shiroishi.site.	3600	IN	NS	ns-1752.awsdns-27.co.uk.

 3. ACMでSSL/TLS証明書の取得
 ACM（AWS Certificate Manager）とはACMは、AWS内でSSL/TLS証明書を無料で発行・管理できるサービスです。CloudFrontやELBなどのAWSサービスと統合されており、証明書の自動更新も行われます。
!重要：CloudFrontで使用する証明書は、必ず米国東部（バージニア北部）us-east-1リージョンで作成する必要があります。

 証明書のリクエスト手順AWS Certificate Managerにアクセス
リージョンを「us-east-1」に変更
「リクエスト」ボタンをクリック


証明書タイプの選択
「パブリック証明書をリクエスト」を選択
「次へ」をクリック


ドメイン名の設定
完全修飾ドメイン名: s-shiroishi.site
ワイルドカードドメイン: *.s-shiroishi.site を追加
!ワイルドカードドメインを追加しておくことで、将来的にサブドメインでもHTTPS通信が可能になります。
検証方法の選択

DNS検証 - 推奨を選択
DNS検証により、ドメインの所有権を証明します
確認とリクエスト
設定内容を確認して「リクエスト」ボタンをクリック



 DNS検証の実行Route53でレコードを作成
「Route53でレコードを作成」ボタンをクリック


検証レコードの追加
両方のドメインにチェックを入れて「レコードを作成」をクリック


検証の完了を待つ
通常、数分から30分程度で検証が完了
ステータスが「発行済み」になれば証明書の準備完了

 4. S3バケットの作成とHTMLファイルのアップロード
 S3バケットの作成S3コンソールにアクセス
AWSコンソールで「S3」を検索
「バケットを作成」をクリック
バケットの基本設定

バケット名: 任意の名前（例：my-static-site-bucket）

リージョン: 東京リージョン（ap-northeast-1）を選択
パブリックアクセス設定
「パブリックアクセスをすべてブロック」のチェックはそのまま有効にする
CloudFront経由でのみアクセスさせるため、S3への直接アクセスはブロック


その他の設定
デフォルト暗号化: 有効（推奨）
「バケットを作成」をクリック

 HTMLファイルのアップロードindex.htmlファイルを作成
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Static Site</title>
</head>
<body>
    <h1>Hello from S3 and CloudFront!</h1>
    <p>This site is served securely via HTTPS.</p>
</body>
</html>

S3バケットにアップロード
作成したバケットを開く
「アップロード」をクリック
index.htmlファイルをアップロード


 5. CloudFrontディストリビューションの作成と設定
 基本設定CloudFrontコンソールにアクセス
「ディストリビューションを作成」をクリック
Distribution optionsの設定
Distribution name: 任意の管理しやすい名前
Distribution type: 「Single website or app」を選択
Domain欄は空欄のまま（後でRoute53で設定）
「Next」をクリック



 Originの設定Origin typeとS3バケットの選択
Origin type: 「Amazon S3」を選択
「Browse S3」ボタンから作成したS3バケットを選択
アクセス設定
「Allow private S3 bucket access to CloudFront」にチェック
「Use recommended origin settings」を選択
「Next」をクリック


セキュリティ設定
WAF: デモ環境のため「セキュリティ保護を有効にしない」を選択
「Next」をクリック



 重要な追加設定作成後、以下の設定を追加で行います：

 1. OAC（Origin Access Control）の設定
Originsタブから対象のオリジン名を選択して編集
作成されたOACを確認
「ポリシーをコピー」ボタンをクリック




S3バケットポリシーの更新
S3コンソールでバケットを開く
アクセス許可 → バケットポリシーを編集
コピーしたポリシーを貼り付けて保存


 2. カスタムドメインの設定代替ドメイン名を追加
「Add domain」をクリック


ドメイン名を入力
Domains to serve: 対象のドメイン名を入力


SSL証明書を選択
ACMで作成した証明書を選択



 3. デフォルトルートオブジェクトの設定
Settingsタブから編集
Default root object: index.htmlを入力
変更を保存



!この設定により、ルートURL（https://s-shiroishi.site/）でアクセスした際に、自動的にindex.htmlが表示されます。

 6. Route53でエイリアスレコードを設定最後に、独自ドメインからCloudFrontディストリビューションへアクセスできるように、Route53でDNSレコードを設定します。

 エイリアスレコードの作成Route53コンソールを開く
作成したホストゾーンを選択
「レコードを作成」をクリック
レコードの設定

レコード名: 空欄（ルートドメイン用）

レコードタイプ: A

エイリアス: トグルをONにする
エイリアス先の設定

トラフィックのルーティング先: 「CloudFrontディストリビューションへのエイリアス」を選択

ディストリビューション: 作成したCloudFrontディストリビューションを選択
「レコードを作成」をクリック


 動作確認構築が完了したら、ブラウザでhttps://your-domain.comにアクセスして正常に動作していることを確認しましょう。


 解説：なぜ独自ドメインでアクセスできるのか？ここまでの設定で、独自ドメインでCloudFrontにアクセスできるようになりました。この仕組みについて解説します。

 CloudFrontの2つのドメインCloudFrontディストリビューションを作成すると、実は2種類のドメインが存在します
CloudFrontが自動生成するドメイン
   例: d1234abcd5678.cloudfront.net
管理用のデフォルトドメイン
このままでもアクセス可能だが、覚えにくい
代替ドメイン名（今回設定した独自ドメイン）
   例: s-shiroishi.site
ユーザーが実際にアクセスするドメイン
ブランディングやSEO的にも重要

 代替ドメイン名の設定が必要な理由CloudFrontに「代替ドメイン名」を設定する理由は、CloudFrontがどのドメイン名でのアクセスを受け入れるかを明示的に許可するためです。
設定前：
❌ https://s-shiroishi.site → CloudFront
   （CloudFrontが「このドメインは知らない」と拒否）

設定後：
⭕️ https://s-shiroishi.site → CloudFront
   （CloudFrontが「このドメインは許可されている」と受け入れ）

 ACM証明書との関係独自ドメインでHTTPS通信を行うには、そのドメイン用のSSL/TLS証明書が必要です：
ユーザー ← HTTPS通信 → CloudFront
         ↑
    s-shiroishi.site用の
    SSL/TLS証明書で暗号化
そのため、CloudFrontの代替ドメイン名設定時に：
使用したいドメイン名（s-shiroishi.site）を指定
そのドメイン用のACM証明書を紐付け
という2つの設定を行いました。

 DNS解決の流れ実際にブラウザがどのようにCloudFrontにたどり着くのか、順を追って見てみましょう：
【Step 1: DNS問い合わせ】
ブラウザ：「s-shiroishi.siteのIPアドレスは？」
    ↓
Route53：「CloudFrontのIP（13.224.xxx.xxx）です」

【Step 2: HTTPS接続】
ブラウザ → CloudFront（IP: 13.224.xxx.xxx）
         HTTPヘッダー: Host: s-shiroishi.site

【Step 3: CloudFrontの処理】
CloudFront：
1. Hostヘッダーを確認 → s-shiroishi.site
2. 代替ドメイン名リストを確認 → 登録済み✓
3. ACM証明書で暗号化通信 → HTTPS確立✓
4. S3からコンテンツを取得して返却

 よくある誤解誤解: s-shiroishi.siteからd1234.cloudfront.netにリダイレクトされる
実際: Route53のエイリアスレコードにより、s-shiroishi.siteへのDNS問い合わせに対してCloudFrontのIPアドレスが直接返される。ブラウザのアドレスバーはs-shiroishi.siteのまま変わりません。

 まとめると
代替ドメイン名: CloudFrontに「このドメインを受け入れてください」と設定

ACM証明書: そのドメインでHTTPS通信するための証明書

Route53エイリアス: ドメインへのアクセスをCloudFrontに転送
これら3つが連携することで、独自ドメインでの安全なHTTPS配信が実現されています。

 最後に今回はRoute53、ACM、CloudFront、S3を組み合わせた静的サイトのHTTPS配信環境の構築方法の解説をしました。これらの基本構成を理解することで、より高度なAWSアーキテクチャへの第一歩となれば幸いです。

はじめに

構築の流れ

1. ドメインの取得

なぜドメインが必要なのか

ドメイン取得方法の選択肢

Valueドメインでドメインを取得

2. Route53でホストゾーンを作成

ホストゾーンとは

ホストゾーンの作成手順

作成されたレコードの確認

NSレコード

SOAレコード

Valueドメインでネームサーバーを設定

設定手順

反映確認方法

3. ACMでSSL/TLS証明書の取得

ACM（AWS Certificate Manager）とは

証明書のリクエスト手順

DNS検証の実行

4. S3バケットの作成とHTMLファイルのアップロード

S3バケットの作成

HTMLファイルのアップロード

5. CloudFrontディストリビューションの作成と設定

基本設定

Originの設定

重要な追加設定

1. OAC（Origin Access Control）の設定

2. カスタムドメインの設定

3. デフォルトルートオブジェクトの設定

6. Route53でエイリアスレコードを設定

エイリアスレコードの作成

動作確認

解説：なぜ独自ドメインでアクセスできるのか？

CloudFrontの2つのドメイン

代替ドメイン名の設定が必要な理由

ACM証明書との関係

DNS解決の流れ

よくある誤解

まとめると

最後に

Discussion