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が入力されているか確認
- 対策: CloudFront の設定で
- 原因 2: S3 バケットポリシーが正しく更新されていない、あるいは古い ID のまま
- 対策: CloudFront のオリジン設定からポリシーをコピーし直し、S3 に貼り直す
2. 証明書が選択できない
- 原因: ACM 証明書を東京リージョンなど(
us-east-1以外)で作成している - 対策: **バージニア北部(
us-east-1)**で作成し直す
3. 設定変更ができない(ロックされている)
- 原因: CloudFront の新しい「Free Plan(定額プラン)」を契約していると、WAF などの個別設定がロックされる
- 対策: プラン設定から「Pay-as-you-go」に変更するか、ディストリビューションを作り直す