【AWS】S3・CloudFront・Route 53の連携について

2026年1月24日AWS,CloudFront,Route53,S3

aws

kamiです。
TwitterとYoutubeもやってます。

今回は更新前S3・CloudFront・Route 53の連携についての紹介です。

S3・CloudFront・Route 53の連携のそれぞれのサービス

サービス役割
S3画像・HTML・CSS・JSなど静的コンテンツの保管場所（pdfやimgをよく置かれている）
CloudFront(CDN)S3のコンテンツをキャッシュし、高速・セキュアに配信
Route 53(DNS)独自ドメイン（例：www.example.com）とCloudFrontを結びつける

S3・CloudFront・Route 53の連携する意味

連携する意味は次の通りです。

✔ S3にアップした静的ファイルを
✔ CloudFrontで高速・セキュアに世界中へ配信し
✔ Route 53で独自ドメインを結びつけられる

CloudFront × Route 53 × S3を連携することで、

✔ 速い
✔ 安全
✔ 独自ドメイン対応
✔ AWS内で統一管理

が簡単に実現でき、非常に実践的でおすすめな構成です。

スポンサードサーチ

S3・CloudFront・Route 53の正しい関係性

① S3（中身・倉庫）

  • 画像、HTML、CSS、JS、PDFなど、ファイルを保管する場所
  • サービスの「コンテンツ本体」

② CloudFront（CDN・配達員）

  • S3からデータを受け取り
  • 世界中のエッジサーバーにキャッシュ
  • 速く、安全にユーザーへ届ける

③ Route 53（案内板・住所）

  • 独自ドメイン（例：www.example.com）とCloudFrontをつなげる
  • インターネットの「住所登録」のような役割

S3・CloudFront・Route 53の連携の利用シーン例

  • コーポレートサイト・LP・ポートフォリオ公開
  • 画像・動画・PDF配信の高速化
  • SaaSサービスの静的フロントエンド部分配信
  • ShopifyやBASEのような外部サービス連携時のCDN構成

スポンサードサーチ

S3・CloudFront・Route 53を単体で使えるのか？

サービス単品で使える？解説
S3✅ 使えるファイル保管やバックアップ用ストレージとして単体で使える。
静的サイト公開もできるが、直接ドメインを当てるには工夫が必要。
CloudFront⚠️ 完全単品は無理オリジン（元データ）が無いと機能しない。
S3・EC2・API Gateway・オンプレなど必ず何かと組み合わせて使う。
Route 53✅ 使えるDNSサービスとして、CloudFrontやS3が無くても単独で使える。
他社サーバーや他クラウドのドメイン管理にも使える。

S3・CloudFront・Route 53の組み合わせのまとめ

  • S3単品 → 簡易ファイル置き場
  • S3＋Route 53 → 独自ドメインでS3公開
  • S3＋CloudFront → 高速・安全なコンテンツ配信
  • S3＋CloudFront＋Route 53 → おすすめ

スポンサードサーチ

S3・CloudFront・Route 53の連携方法

S3の設定

  1. バケット作成・確認
  2. バケットを選択
  3. 上部メニュータブから「プロパティ」をクリック
  4. 下へスクロールして「静的ウェブサイトホスティング」のセクションを探す
  5. 「編集」ボタンを押す
  6. 以下のように設定
  7. 静的ウェブサイトホスティングを有効化にチェック※AWS Amplifyを使う場合は無効のままでOK
  8. インデックスドキュメント：index.html（通常はindex.html）
  9. エラードキュメント：error.html（任意）

CloudFrontの設定

  1. ディストリビューション作成・確認
  2. Origin domainの設定
  3. オリジンアクセスの設定
  4. Origin access control(OAC)の設定
  5. Alternate Domain Names (CNAMEs) の設定（独自ドメイン使う場合、基本設定を行う）
  6. ACM証明書の発行・適用（httpsを使用する場合、基本設定を行う）
  7. Route 53の設定（独自ドメイン使う場合、基本設定を行う）

Route 53の設定

  1. ホストゾーンの作成・確認
  2. レコードを作成
  3. レコード名：cf.hogehoge.com
  4. レコードタイプ：A – IPv4 アドレスと一部の AWS リソースにトラフィックをルーティングします
  5. エイリアス：ON AWS Amplifyを使う場合はOFFのままでOK
  6. エイリアス先：CloudFront

エイリアス先にCloudFrontのディストリビューションを選択する方法

  1. 「トラフィックのルーティング先」のプルダウンをクリック
  2. 「CloudFrontディストリビューション」を選択：米国東部（バージニア北部）
  3. 対象のCloudFrontディストリビューション（dxxxxx.cloudfront.netのもの）が一覧に表示されるので、該当するものを選択
  4. 必要ならリージョンを指定（CloudFrontの場合は自動的に正しいものが選ばれる場合が多い）
  5. レコードを作成」をクリック

一覧にCloudFrontが出てこない場合

  • CloudFrontのディストリビューションが「有効」状態になっているか確認
  • Route 53とCloudFrontが同じAWSアカウント内にあるか確認
  • まだ反映に少し時間がかかっている可能性もある（通常数分〜10分）

気をつけるポイント

気をつけるポイント説明
S3バケットポリシーの貼り付け忘れOACを設定しただけでは不十分。必ずポリシーコピーしてS3側に貼る必要がある
OAC名の確認どのOACがバケットに紐づいているか、管理がごちゃつかないよう名前付けに注意
バケットのパブリックアクセス設定基本的に「パブリックアクセスブロック」は有効のままでOK（CloudFront経由だけ許可するので）
ACM証明書のリージョンミスCloudFront用の証明書は必ず「バージニア北部（us-east-1）」で発行する必要あり
Alternate Domain Namesの設定漏れ独自ドメインを使う場合、CloudFrontの「代替ドメイン名」に忘れずに登録する
S3の静的ウェブサイトホスティングの勘違いOAC構成なら、S3の「静的ウェブサイトホスティング」は有効にしなくてよい
CloudFrontキャッシュの罠S3のファイル更新がすぐ反映されない場合、CloudFrontのキャッシュを手動で削除（Invalidation）が必要
Route 53のレコードミス独自ドメイン用に正しいAレコード（エイリアス）を設定する。CNAMEを誤用しない

S3とCloudFrontの値の関係について

① Origin domainとS3バケット名の関係

項目内容
CloudFrontのOrigin domainS3のURLやエンドポイントを指定する場所
S3のバケット名実際のS3の名前（バケット名.s3.amazonaws.com の一部）

結局、正しくS3を指すURLを入力するため、結果的にS3バケット名とOrigin domainの中身は一致することがほとんどです。

② 例：よくあるパターン

  • S3バケット名：cf.hogehoge.com
  • CloudFrontのOrigin domain：
  • cf.hogehoge.com.s3.ap-northeast-1.amazonaws.com

このように、「バケット名」と「Origin domain」の前半部分が一致します

icon

以上です。

S3・CloudFront・Route 53 連携の具体的な流れ

① S3の準備（中身＝コンテンツ）

  1. S3バケットを作成
    • バケット名は基本「独自ドメインと一致」推奨（例：www.example.com）
  2. 静的ウェブサイトホスティングを有効化
  3. 公開用のバケットポリシー設定（CloudFront経由なら制限も可）
  4. 必要なHTML・画像・CSS・JSファイルをアップロード

② CloudFrontの準備（高速・安全な配信経路）

  1. CloudFrontディストリビューションを作成
  2. オリジンにS3バケットを指定
  3. Alternate Domain Names (CNAMEs) に独自ドメインを登録（例：www.example.com）
  4. ACM（AWS Certificate Manager）でSSL証明書を発行し、CloudFrontに適用
  5. その他キャッシュ設定やセキュリティ設定を必要に応じて行う

③ Route 53の設定（独自ドメインとの結びつけ）

  1. Route 53のホストゾーンを開く
  2. 該当ドメインのAレコードを作成
    • レコード名：www（サブドメイン無しなら空欄）
    • レコードタイプ：A
    • エイリアス：ON
    • エイリアス先：CloudFrontディストリビューションを選択

以上です。

AWS,CloudFront,Route53,S3AWS

Posted by kami