異なるS3から同じドメインでコンテンツを配信する方法

備忘録その②

想定ケース

• トップページ（LP） は別途作成し、LP用のS3に配置する
• LPから遷移した先のWebアプリ は、別のS3（アプリ用）に配置する

この構成を実現するためのポイントは、CloudFrontのビヘイビア設定 にある。

---

手順

1. CloudFrontのオリジン設定

CloudFrontのディストリビューションに、以下の2つのオリジンを設定する：

• LP用オリジン（LP用のS3バケット）
• アプリ用オリジン（アプリ用のS3バケット）

2. OAC（Origin Access Control）の設定

• OACは 共通のものを使う ことも、バケットごとに別々に設定する ことも可能。
• OAC作成時に発行されるバケットポリシーを、それぞれのS3バケットに適用。

3. ビヘイビアの設定

CloudFrontの ビヘイビア（Behavior） で、どのリクエストをどのオリジンに向けるかを指定する。

① 既存のデフォルトビヘイビアをアプリ用オリジンに設定

• デフォルトのオリジンは アプリ用S3 に向ける。

② LP用のビヘイビアを新規作成

LPのコンテンツに必要なパスパターンを設定し、LP用オリジンに向ける。

• パスパターン /index.html（LPのトップページ）
• パスパターン /img/*（LPの画像）
• パスパターン /css/*（LPのスタイルシート）
• その他、JSなどLPに必要なパスパターンを追加

また、/index.html を最優先に設定し、デフォルトのビヘイビア（アプリ用）より上に配置する。

4. CloudFrontのキャッシュ削除

設定変更後、CloudFrontのキャッシュを削除（Invalidation） し、正しく反映されるようにする。

---

注意点

① ディレクトリ名の競合

CloudFrontのビヘイビア設定は、最初に一致したものが適用される ため、アプリとLPで 同じディレクトリ名を使うと競合する。

例：

• NGパターン

  • LPの画像パス /img/*
  • アプリの画像パス /img/*
  • → すべてLP用オリジンに向かってしまい、アプリ側の /img/ が読み込めなくなる

• 解決策

  • LPは /lp-img/*、アプリは /images/* など、異なるパスを使用する。

② ビヘイビアの優先順位

• /index.html のビヘイビアを最優先にすることが重要。
• 優先順位が低いと、デフォルトのビヘイビア（アプリ用）が適用され、LPのトップページが正しく表示されず AccessDenied になる。

---

まとめ

• CloudFrontの オリジンを2つ設定（LP用、アプリ用）
• OACを適用し、S3をパブリックにせずCloudFront経由のみアクセス可能にする
• ビヘイビアのパスパターンを適切に設定し、競合を避ける
• /index.html のビヘイビアを最優先にして、LPのトップページが正しく表示されるようにする