CloudFront + S3 OAC 構成サンプル

プライベートS3から
安全に届ける
静的ウェブサイト

S3バケットを完全非公開のまま Origin Access Control（OAC）で CloudFront のみからのアクセスを許可し、グローバル CDN で高速配信します。

セクション 1 へ セクション 2 へ
Amazon S3 CloudFront OAC CF Functions

構成のポイント

この構成で実現できること

S3 完全非公開

パブリックアクセスをすべてブロックしたS3バケットに、OACを使ってCloudFrontのみアクセスを許可。バケットへの直接アクセスは403で拒否されます。S3の「静的ウェブサイトホスティング」機能は不要です。

詳細を確認 →

グローバル CDN

世界中のエッジでキャッシュ配信。高速・低レイテンシを実現します。

CDN キャッシュ制御

CloudFront のキャッシュポリシーとS3の Cache-Control ヘッダーを組み合わせ、ファイル種別ごとに最適な TTL を設定します。

URI 自動書き換え

/sub1/ → /sub1/index.html のようなサブディレクトリ解決を CloudFront Functions でエッジ処理します。

アーキテクチャ

リクエストの流れ

ユーザーのリクエストはCloudFrontエッジで受け付けられ、CloudFront FunctionsによるURI書き換えを経て、OACを通じてS3に転送されます。

  1. ユーザー → CloudFront
    HTTPS リクエストをエッジで受信
  2. CloudFront Functions
    URI を /sub1/ → /sub1/index.html に書き換え
  3. S3（OAC）
    SigV4 署名付きリクエストでオブジェクト取得

サイト構造

ページ一覧

  • /index.html現在のページ

    トップページ。構成の概要とアーキテクチャを紹介します。

  • /sub1/index.htmlアクセスする →

    サブディレクトリ 1。URI書き換えが機能することを確認できます。

  • /sub2/index.htmlアクセスする →

    サブディレクトリ 2 のサンプルページ。

  • /assets/style.css

    全ページ共通スタイルシート。デザイントークンとコンポーネントスタイルを定義します。