Goat Systems
tech/aws/cloudFront

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

#AWS#cloudFront#Route 53#S3

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 リージョンで作成する必要があります。

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

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 側のセキュリティ設定を更新します。

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

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

Step 4: Route 53 で DNS の設定

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

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

よくあるエラーと対策

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」に変更するか、ディストリビューションを作り直す

次のステップ：自動デプロイとキャッシュ削除

GitHub Actions 等で S3 にデプロイしている場合、ファイルを更新してもブラウザには古い内容が表示され続けることがあります（CloudFront のキャッシュ）。 デプロイフローの最後に以下のコマンドを追加し、キャッシュを強制的にクリア（無効化）するように設定しましょう。

aws cloudfront create-invalidation --distribution-id <YOUR_DISTRIBUTION_ID> --paths "/*"

この手順で、セキュアで高速な静的サイトホスティング環境が完成します！

コメント (0)

コメントはまだありません。

コメントを投稿