AWS S3 + CloudFront + Route53 本番環境の完全なデプロイメントガイド

📅 2026-01-31

✅第一部：前提条件の準備

準備チェックリスト

  • AWSアカウント（支払い方法が有効化されている）
  • 独自ドメイン（例：example.com）
  • ウェブサイトファイルの準備完了（HTML/CSS/JS）
  • ブラウザでAWSコンソール (console.aws.amazon.com) を開く

重要な概念の理解

  • S3バケット：ウェブサイトファイルを保存するコンテナ
  • CloudFront：グローバルCDN、コンテンツ配信を加速
  • Route53：DNS解決サービス、ドメインを関連付け
  • ACM：無料のSSL/TLS証明書サービス
  • OAC：Origin Access Control、CloudFrontのみがS3にアクセス可能

💾第二部：S3バケットの作成と設定

1S3バケットの作成

パス：AWSコンソール ホーム → S3 → バケット → バケットを作成

詳細ステップ

  1. AWSコンソールにサインイン
  2. 上部の検索ボックスにS3と入力 → S3サービスに入る
  3. 左側のサイドバーで「バケット」をクリック
  4. 「バケットを作成」ボタン（青色）をクリック

フォームの入力

┌─ バケット名 │ 入力：example-com-website │ ✓ グローバルに一意 │ ✓ 小文字、数字、ハイフンのみ │ ✓ 「xn--」で始まることはできない │ ├─ リージョン │ 選択：us-east-1（または最も近いリージョン） │ 💡 CloudFrontのコストを削減するにはus-east-1の使用をお勧めします │ ├─ オブジェクト所有権 │ 選択：ACL無効 │ ├─ パブリックアクセスをブロック設定 │ ✓ すべてチェック（後でCloudFrontでアクセスを制御） │ ├─ バージョニング │ ○ 無効（オプション、コスト削減のため無効推奨） │ ├─ サーバー側暗号化 │ ○ Amazon S3マネージドキーを使用（SSE-S3） │ └─ 作成ボタン 「バケットを作成」をクリック
✅ 成功の指標：新しいバケットがバケットリストに表示され、ステータスが✓で表示される

2静的ウェブサイトホスティングを有効にする

パス：S3バケット → プロパティ → 静的ウェブサイトホスティングを編集

詳細ステップ

  1. 作成したばかりのバケット名（example-com-website）をクリック
  2. 「プロパティ」タブ（右側から5番目）をクリック
  3. 下にスクロールして「静的ウェブサイトホスティング」セクションを見つけます
  4. 「編集」ボタンをクリック

設定項目

┌─ 静的ウェブサイトホスティング │ ○ 有効 ← このオプションを選択する必要があります │ ├─ ホスティングタイプ │ ○ ウェブサイトをホストする ← このオプションを選択（リダイレクトリクエストを選択しない） │ ├─ インデックスドキュメント │ 入力：index.html │ 説明：ユーザーが/にアクセスしたときに返されるファイル │ ├─ エラードキュメント │ 入力：error.html │ 説明：404/403エラーが発生した場合に返されるファイル │ └─ 変更を保存 → 「保存」ボタンをクリック
✅ 確認成功：
  • ページに「✓ 更新完了」と表示される
  • 「静的ウェブサイトホスティング」の下に「有効」と表示される
  • ウェブサイトエンドポイントのURLが表示される

3ウェブサイトファイルをアップロード

パス：S3バケット → オブジェクト → アップロード

ファイル構造の例

my-website/ ├── index.html ← 必須 ├── error.html ← 必須 ├── css/ │ └── style.css ├── js/ │ └── app.js ├── images/ │ └── logo.png └── about.html

アップロード方法

方法A：ドラッグアンドドロップ
ウェブサイトフォルダをアップロード領域にドラッグ、サブフォルダの再帰的なアップロードに対応

方法B：クリックして選択
「ファイルを追加」または「フォルダを追加」をクリックして、ファイルを1つずつ選択
✅ アップロードを確認：
  • アップロード進度が100%に達したことを確認
  • バケットに戻った後、すべてのファイルリストが表示されます

🔐第三部：Origin Access Control（OAC）の作成

4OACの作成

パス：CloudFront → セキュリティ → Origin Access

詳細ステップ

  1. 上部の検索ボックスにCloudFrontと入力 → CloudFrontサービスに入る
  2. 左側のサイドバーで「セキュリティ」メニューを展開
  3. 「Origin Access」をクリック
  4. 「Origin Access Controlを作成」ボタンをクリック

フォームの入力

┌─ Origin Access Control名 │ 入力：s3-website-oac │ 説明：識別が容易、カスタマイズ可能 │ ├─ オリジンタイプ │ ✓ S3 ← S3を選択する必要があります │ ├─ 説明（オプション） │ 入力：example.comの静的ウェブサイト用 │ └─ 作成ボタン 「作成」をクリック
✅ 成功の指標：
  • 新しく作成されたOACがページに表示される
  • 表示されたOAC IDをコピー（例：E127EXAMPLE51Z）
⚠️ 重要な注記：OAC IDを覚えておいてください、後の設定で必要になります

⚡第四部：CloudFrontディストリビューションの作成

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

パス：CloudFront → ディストリビューション → ディストリビューションを作成

オリジン設定 - Origin部分

┌─ オリジンドメイン │ 入力ボックスをクリック → ドロップダウンからS3バケットを選択 │ 表示されるべき：example-com-website.s3.us-east-1.amazonaws.com │ ⚠️ s3-websiteエンドポイントを選択しないでください、標準S3 URLを選択してください │ ├─ オリジンアクセス │ ○ Origin Access Control設定 ← このオプションを選択 │ ├─ Origin Access Control │ ドロップダウンをクリック → 前に作成した「s3-website-oac」を選択 │ └─ S3がオリジンの場合のプロトコル ○ HTTPSのみ ← 選択をお勧めします（より安全）

デフォルトキャッシュ動作設定

┌─ ビューアプロトコルポリシー │ ○ HTTPからHTTPSへリダイレクト ← このオプションを選択 │ 説明：HTTPを自動的にHTTPSにリダイレクト │ ├─ 許可されたHTTPメソッド │ ✓ GET、HEAD（デフォルトを保持） │ ├─ キャッシュポリシーとオリジンリクエストポリシー │ キャッシュポリシー：ドロップダウンをクリック → 「CachingOptimized」を選択 │ オリジンリクエストポリシー：ドロップダウンをクリック → 「S3Origin」を選択 │ └─ オブジェクトを圧縮 ✓ 有効 ← データコストを削減できます

ディストリビューション設定

┌─ このディストリビューションを有効にする │ ✓ チェック必須 │ ├─ 代替ドメイン名（CNAME） │ ⚠️ 今は入力しないでください、後で設定 │ ├─ デフォルトルートオブジェクト │ 入力：index.html │ 説明：/にアクセスしたときに返されるファイル │ ├─ IPv6 │ ✓ 有効（既にデフォルト） │ └─ ディストリビューションを作成 「ディストリビューションを作成」ボタンをクリック
⏳ 待機：ディストリビューションのデプロイには5～10分かかり、ステータスが「進行中」から「デプロイ完了」に変わります

6CloudFrontドメイン名をコピー

パス：CloudFront → ディストリビューション → ディストリビューション詳細

  1. ディストリビューション作成後、ディストリビューションIDをクリック
  2. 「ディストリビューション詳細」タブで以下の情報を表示
  3. ディストリビューションドメイン名をコピー（d111111abcd.cloudfront.net）
ディストリビューションドメイン名：d111111abcd.cloudfront.net ↑ このアイテムをコピー（後で使用） ディストリビューションID：E1234ABCD

7S3バケットポリシーを適用

パス：S3 → バケット → 権限 → バケットポリシー

操作ステップ

  1. S3サービスに戻る
  2. ウェブサイトバケット（example-com-website）を選択
  3. 「権限」タブをクリック
  4. 下にスクロールして「バケットポリシー」を見つけ、「編集」をクリック
  5. 以下のJSONを編集ボックスに貼り付け

バケットポリシーJSON（修正が必要）

{ "Version": "2012-10-17", "Statement": [ { "Sid": "AllowCloudFrontOAC", "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::example-com-website/*", "Condition": { "StringEquals": { "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/E1234ABCD" } } } ] }
⚠️ 修正が必要な3つのアイテム：
  • example-com-website → バケット名に置き換え
  • 123456789012 → AWSアカウントIDに置き換え
  • E1234ABCD → CloudFrontディストリビューションIDに置き換え
✅ 完了：「変更を保存」をクリック

🔒第五部：ACM証明書のリクエスト

8SSL/TLS証明書をリクエスト

パス：ACM（AWS Certificate Manager） → 証明書 → 証明書をリクエスト

重要な注記

⚠️ リージョンは非常に重要です：リージョンがUS East（N. Virginia）であることを確認してください、CloudFrontはこのリージョンの証明書のみをサポートしています

詳細ステップ

  1. 上部の検索ボックスにCertificate Managerと入力 → ACMサービスに入る
  2. リージョンがUS East（N. Virginia）であることを確認
  3. 「証明書をリクエスト」ボタンをクリック

フォームの入力

┌─ 証明書タイプ │ ○ パブリック証明書 ← このオプションを選択する必要があります │ ├─ ドメイン名を追加 │ 「ドメイン名を追加」をクリック → 入力：example.com │ もう一度クリック → 入力：*.example.com │ │ 最終的な表示： │ ✓ example.com │ ✓ *.example.com │ ├─ 検証方法 │ ○ DNS検証 ← このオプションを選択（メールより速い） │ ├─ キーアルゴリズム │ ○ RSA 2048（デフォルトを保持） │ ├─ タグ（オプション） │ 入力：website-cert │ └─ リクエストボタン 「リクエスト」をクリック

その後のDNS検証

リクエスト後、ページはドメイン検証を実行するよう求めます：

ステップ：
  1. 「ドメイン検証」セクションで検証レコードが表示されます
  2. 「Route53レコードを作成」ボタンをクリック
  3. AWSが自動的にRoute53にCNAMEレコードを追加
  4. 5～30分待つと、ステータスが「発行済み」に変わります
✅ 完了：証明書ステータスが「発行済み」に変わります

🌐第六部：Route53 DNS設定

9Route53ホストゾーンを作成

パス：Route53 → ホストゾーン → ホストゾーンを作成

詳細ステップ

  1. 上部の検索ボックスにRoute53と入力 → Route53サービスに入る
  2. 左側のサイドバーで「ホストゾーン」をクリック
  3. 「ホストゾーンを作成」ボタンをクリック

フォームの入力

┌─ ドメイン名 │ 入力：example.com │ ⚠️ wwwまたはhttp://を含めない │ ├─ 説明（オプション） │ 入力：ウェブサイトホスティング │ ├─ タイプ │ ○ パブリックホストゾーン ← このオプションを選択 │ └─ ホストゾーンを作成 「ホストゾーンを作成」ボタンをクリック

重要な情報を記録

ホストゾーンID：Z1234567890ABC ↑ このアイテムをコピーして記録 ネームサーバー（NSレコード）： ns-1111.awsdns-22.com ns-2222.awsdns-33.co.uk ns-3333.awsdns-44.org ns-4444.awsdns-55.net ↑ これら4つのNSレコードをコピー

10ドメインレジストラのDNS設定を更新

ドメインレジストラで操作（GoDaddy、Namecheap、Aliyunなど）

ステップ

  1. ドメインレジストラアカウントにログイン
  2. 「DNS管理」または「ドメイン管理」を見つける
  3. ネームサーバー（NSレコード）を上でコピーした4つに変更
  4. 変更を保存
⏳ DNS伝播：1～48時間かかる場合があります、以下のコマンドで確認できます：
nslookup example.com # AWS NSレコードが表示されるはず

11Route53でエイリアスレコードを作成

パス：Route53 → ホストゾーン → レコードを作成

最初のレコードを作成（ルートドメイン）

┌─ レコード名 │ 空白のまま（example.comルートドメインを表す） │ ├─ レコードタイプ │ ドロップダウンをクリック → 「A」を選択 │ ├─ エイリアス │ ✓ エイリアスを有効化 ← チェック必須 │ ├─ トラフィックポリシーを選択 │ ○ シンプルルーティング ← デフォルトを保持 │ ├─ トラフィックをルーティング先 │ ドロップダウンをクリック → 「CloudFrontディストリビューション」を選択 │ ├─ ディストリビューションを選択 │ ドロップダウンをクリック → ディストリビューション（d111111abcd.cloudfront.net）を選択 │ ├─ ターゲットの正常性を評価 │ ○ いいえ（デフォルトを保持） │ └─ レコードを作成 「レコードを作成」をクリック

2番目のレコードを作成（wwwサブドメイン）

上記のステップを繰り返しますが、「レコード名」をwwwに変更し、他の設定は同じです。

✅ 完了：両方のレコードが同じCloudFrontディストリビューションを指す必要があります

12CloudFront CNAMEと証明書を設定

パス：CloudFront → ディストリビューション → 編集

ステップ

  1. CloudFrontサービスに戻る
  2. ディストリビューションを選択（ディストリビューションIDをクリック）
  3. 「編集」ボタンをクリック
  4. 「代替ドメイン名（CNAME）」フィールドを見つけます
  5. 入力ボックスをクリックして、2つのドメイン名を追加
代替ドメイン名入力ボックスに追加： example.com www.example.com

SSL証明書を選択

下にスクロールして「カスタムSSL証明書」または「SSL証明書」を見つけます ┌─ SSL証明書 │ ✓ カスタムSSL証明書 │ ├─ 証明書を選択 │ ドロップダウンをクリック → 以前リクエストした証明書を選択 │ 表示されるべき：example.com（および*.example.com） │ └─ 保存 「変更を保存」をクリック
⏳ デプロイを待機：ディストリビューションステータスが「進行中」から「デプロイ完了」に変わります（通常5～10分）

⚙️第七部：キャッシュポリシーの設定

13異なるファイルタイプのキャッシュを設定

パス：CloudFront → ディストリビューション → 動作 → 編集

このステップはコストとパフォーマンスを最適化するために使用されます。異なるファイルタイプに異なるキャッシュ時間を設定します。

デフォルト動作設定

1. CloudFrontディストリビューション編集ページに戻る 2. 「動作」タブをクリック 3. デフォルト動作を選択 → 「編集」をクリック ┌─ キャッシュキーとオリジンリクエスト │ キャッシュポリシー：CachingOptimized（既に設定） │ ├─ ビューアキャッシュコントロールリクエストヘッダ │ ✓ 元のCache-Controlヘッダを使用 │ └─ 保存 「保存」をクリック

オプション：HTMLの個別動作を作成

より細かい制御が必要な場合は、異なるファイルタイプに対して異なる動作ルールを作成できます：

HTMLファイル動作：
パスパターン：*.html キャッシュポリシー：キャッシュ無効（キャッシュしない、毎回最新を取得） オリジンリクエストポリシー：S3Origin
JavaScriptファイル動作：
パスパターン：*.js キャッシュポリシー：CachingOptimized 圧縮：有効

✔️第八部：テストと検証

14ウェブサイトアクセスをテスト

テストURL

ブラウザでアクセス： https://example.com https://www.example.com https://d111111abcd.cloudfront.net（CloudFront直接URL）

成功の指標

  • ✅ ページが正常に読み込まれる
  • ✅ HTTPSが有効（アドレスバーにロックアイコンが表示される）
  • ✅ 証明書情報が正しい（ロックアイコンをクリックして表示）

トラブルシューティング表

問題 原因 解決策
AWS S3エラーページが表示される S3バケットポリシーが正しく設定されていない バケットポリシーのディストリビューションIDを確認
「Access Denied」と表示される OACが正しく適用されていない S3バケットポリシーにOACが存在することを確認
カスタムドメイン名が機能しない Route53 DNSが有効になっていない DNS伝播を待つ（最大48時間）
SSL証明書が無効 ACM証明書がCloudFrontにデプロイされていない CloudFrontで正しい証明書を選択
アクセスが遅い キャッシュが機能していない Cache-Controlヘッダ設定を確認

🚀第九部：パフォーマンス最適化

15キャッシュヘッダ最適化を設定

S3のファイルに適切なCache-Controlヘッダを設定すると、コストを大幅に削減し、パフォーマンスを向上させることができます。

方法A：AWSコンソール経由

  1. S3 → バケット → オブジェクト
  2. ファイルを選択 → 「オブジェクトアクション」 → 「メタデータを編集」
  3. カスタムメタデータを追加（キー：Cache-Control）

キャッシュ時間の推奨

ファイルタイプ Cache-Control値 説明
HTMLファイル public, max-age=300, must-revalidate 5分、再検証が必須
CSS/JS/画像 public, max-age=31536000, immutable 1年、ファイル名のバージョン化が必要
APIレスポンス public, max-age=0 キャッシュなし、毎回最新を取得

方法B：AWS CLI経由

# HTMLキャッシュをアップロードして設定 aws s3 cp index.html s3://example-com-website/index.html \ --metadata "Cache-Control=public, max-age=300" # JS/CSS長期キャッシュをアップロードして設定 aws s3 cp app.a1b2c3d4.js s3://example-com-website/ \ --metadata "Cache-Control=public, max-age=31536000, immutable"

16Gzip圧縮を有効にする

CloudFrontで自動圧縮を有効にすると、トラフィックを60～70%削減できます。

ステップ

  1. CloudFront → ディストリビューション → 編集
  2. 「デフォルトキャッシュ動作」を見つけます
  3. 「圧縮を有効にする」をチェック ✓
💰 コスト削減：圧縮を有効にした後、テキストファイル（HTML、CSS、JS）の転送量を60～70%削減できます

📊第十部：監視とコスト管理

17監視アラートを設定

CloudFrontコストを監視

  1. CloudWatchまたはコスト管理に入る
  2. 予算アラートを設定
予算名：ウェブサイト月間コスト 予算金額：$10（例） アラート閾値：80%に達したときに通知

主要パフォーマンス指標を監視

CloudFrontディストリビューションで以下のメトリクスを表示：

  • リクエスト数：1日あたりの総リクエスト数
  • データ転送量：アウトバウンドトラフィックのサイズ
  • キャッシュヒット率：90%以上であること
  • エラー率：0%に近いこと

コスト見積表（月額）

サービス コスト 説明
S3ストレージ $0.23 10GB × $0.023
S3 GETリクエスト $0.04 1M ÷ 1000 × $0.0004
CloudFrontアウトバウンド 無料 1TBフリーティア（100GB使用）
CloudFrontリクエスト 無料 10Mフリーティア（1M使用）
Route53 $0.50 ホストゾーン月額料金
ACM証明書 無料 AWS内部使用は無料
合計 $0.77/月

よくある質問

Q1：ウェブサイトファイルをどのように更新しますか？

# 方法1：AWS CLIを使用 aws s3 cp ./new-file.html s3://example-com-website/ aws s3 sync ./website-files/ s3://example-com-website/ --delete # 方法2：AWSコンソールを使用 # S3 → バケット → アップロード → ファイルを選択 → アップロード

Q2：CloudFrontキャッシュをクリアしますか？

  1. CloudFront → ディストリビューション → 無効化
  2. 無効化を作成 → パスに/*を入力 → 作成
💡 ヒント：これにより、すべてのキャッシュファイルがクリアされます（通常5分で有効）

Q3：S3 + CloudFrontのデータ転送フローは何ですか？

ユーザー → CloudFrontエッジノード → S3バケット ↓ キャッシュコンテンツを返す（高速）

Q4：HTTPSリダイレクトをどのように実装しますか？

既にCloudFrontで設定済み：

  • ビューアプロトコルポリシー：HTTPからHTTPSへリダイレクト

すべてのHTTPリクエストは自動的にHTTPSにリダイレクトされます。

✅サマリーチェックリスト

デプロイ後、以下のアイテムを確認

  • S3バケットが作成され、ファイルがアップロードされている
  • 静的ウェブサイトホスティングが有効（index.html、error.html）
  • OACが作成されている
  • CloudFrontディストリビューションが作成・デプロイされている
  • ACM証明書がリクエスト・検証されている
  • Route53ホストゾーンが作成されている
  • ドメインレジストラのDNSがRoute53 NSに更新されている
  • エイリアスレコード（Aレコード）が作成されている
  • CloudFront CNAMEが設定されている
  • CloudFrontにACM証明書が適用されている
  • https://example.com が通常にアクセスできる
  • キャッシュポリシーが最適化されている
  • 圧縮が有効になっている
  • コスト監視が設定されている

その後のメンテナンス

日常操作

  • CloudFrontキャッシュヒット率を定期的に確認（90%以上であること）
  • 月額コストを監視
  • ウェブサイトコンテンツを更新する際にaws s3 syncコマンドを使用

定期メンテナンス

  • ACM証明書の有効期限を確認（自動更新）
  • Route53 DNS設定が正しいことを確認
  • 古いS3オブジェクトバージョンをクリーンアップ（バージョニングが有効な場合）

パフォーマンス最適化

  • CloudFrontのリアルタイムログを使用してキャッシュヒット率を分析
  • Cache-Controlヘッダ設定を定期的に調整
  • エッジコンピューティング用にLambda@Edgeの使用を検討

🎉 デプロイ完了

本番級の低コストな静的ウェブサイトホスティングソリューションが完成しました

📊 コスト：月額平均$0.50～$5
⚡ パフォーマンス：グローバル < 500ms読み込み時間
🔒 セキュリティ：HTTPS + DDoS保護
📈 スケーラビリティ：トラフィック増加を自動処理