S3 + CloudFront + Route 53 で静的サイトを独自ドメイン（HTTPS）化して公開する手順

S3 にアップロードした仕様書やドキュメントを、独自ドメイン https://docs.example.com で表示させるための手順です。
AWS の基本である「S3・CloudFront・Route 53・ACM」の 4 サービスを連携させ、（任意で）セキュリティ（IP 制限）も考慮した構成を構築します。

構成（登場サービス）

S3: 静的ファイルの保存場所
CloudFront: コンテンツ配信ネットワーク（CDN）。HTTPS 化とキャッシュを担当
ACM: SSL/TLS 証明書（HTTPS 化に必須）
Route 53: 独自ドメインの管理（DNS）
WAF: 特定の IP アドレスのみアクセスを許可（オプション）

Step 1: ACM で SSL 証明書を発行する

CloudFront で独自ドメインを使用する場合、証明書は必ず 米国東部（バージニア北部）us-east-1 リージョンで作成する必要があります。

AWS コンソールにログインし、リージョンを 米国東部 (バージニア北部) us-east-1 に切り替える
AWS Certificate Manager (ACM) を開き、「証明書をリクエスト」をクリック
「パブリック証明書をリクエスト」を選択
完全修飾ドメイン名（例: docs.example.com）を入力
検証方法は「DNS 検証」を選択
リクエスト完了後、証明書の詳細画面で「Route 53 でレコードを作成」をクリック（所有権確認が自動化されます）
ステータスが「発行済み」になるまで待つ（通常数分）

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

ここが最も重要なステップです。最新の AWS 画面では「定額プラン」が推奨されますが、カスタマイズ性が低いため、**標準の従量課金プラン（Standard/Pay-as-you-go）**を選択します。

CloudFront コンソールを開き、「ディストリビューションを作成」をクリックします。

プランの選択 (Choose a plan)

画面中央の 4 つの定額プラン（Free/Pro 等）は選択せず、画面下部の「Skip to standard pricing (Pay-as-you-go)」を選択

オリジン設定

Origin domain: 対象の S3 バケットを選択
Origin access: 「Origin access control settings (recommended)」を選択
「コントロール設定を作成」を押し、そのまま作成・適用

キャッシュ動作の設定

Viewer protocol policy: Redirect HTTP to HTTPS を選択

ウェブアプリケーションファイアウォール (WAF)

IP 制限が必要な場合: 「既存の Web ACL を使用」から設定済みの Web ACL を選択
不要な場合: 「セキュリティ保護を有効にしない」を選択（後から設定可能）

設定 (Settings)

代替ドメイン名 (CNAME): docs.example.com を入力
カスタム SSL 証明書: Step 1 で作成した証明書を選択
デフォルトルートオブジェクト: index.html と入力（重要。未設定だとエラーになりやすい）

最後に「ディストリビューションを作成」をクリックします。

Step 3: S3 バケットポリシーの更新（OAC）

CloudFront からのみ S3 へのアクセスを許可するよう、S3 側のセキュリティ設定を更新します。

CloudFront の作成完了後、画面上部に「S3 バケットポリシーを更新する必要があります」と青い帯が表示される
「ポリシーをコピー」をクリック
S3 コンソールで対象バケットの「アクセス許可」タブを開く
「バケットポリシー」の編集を開き、コピーした内容を貼り付けて保存

これにより、S3 バケットを「公開」設定にすることなく、CloudFront 経由でのみ安全にアクセスできるようになります。

Step 4: Route 53 で DNS の設定

最後に、ドメイン名を CloudFront に向けます。

Route 53 を開き、対象ドメインの「ホストゾーン」を選択
「レコードを作成」をクリック
レコード名: サブドメイン（例: docs）を入力
レコードタイプ: A - IPv4 アドレス ... を選択
エイリアス: 「オン」に切り替え
ルーティング先: 「CloudFront ディストリビューションへのエイリアス」を選択 → 該当ディストリビューションを選択
作成をクリック

よくあるエラーと対策

1. サイトにアクセスすると「Access Denied」が出る

原因: CloudFront の「デフォルトルートオブジェクト」が設定されていない場合が多い
- 対策: CloudFront の設定で index.html が入力されているか確認
原因 2: S3 バケットポリシーが正しく更新されていない、あるいは古い ID のまま
- 対策: CloudFront のオリジン設定からポリシーをコピーし直し、S3 に貼り直す

2. 証明書が選択できない

原因: ACM 証明書を東京リージョンなど（us-east-1 以外）で作成している
対策: **バージニア北部（us-east-1）**で作成し直す

3. 設定変更ができない（ロックされている）

原因: CloudFront の新しい「Free Plan（定額プラン）」を契約していると、WAF などの個別設定がロックされる
対策: プラン設定から「Pay-as-you-go」に変更するか、ディストリビューションを作り直す