Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at


CloudFront に S3 bucket のサブディレクトリパスのコンテンツを参照させる

CloudFront に S3 bucket のサブディレクトリパスのコンテンツを参照させる

既知かもしれませんが, 調べても分からずしばらくハマってしまった問題なので共有しておきます.


CloudFront(xxx.cloudfront.net) に S3 bucket の URL(yyy.s3.amazonaws.com) をオリジンに設定すると xxx.cloudfront.net/foo/ を参照した時に xxx.cloudfront.net/foo/index.html でなく status=403 を返す.


S3 bucket の URL は bucket が保持するオブジェクト(コンテンツとしてのファイル名)を取得して返すので /foo/ のようなパスに対してどのファイルも返せない.

すなわち " xxx.cloudfront.net/foo/ を呼ぶ => yyy.s3.amazonaws.com/foo/ を呼ぶ => bucket は /foo/ ディレクトリパスに対して何のオブジェクトを返せない" ようです.

(※ ただしルートディレクトリパス(xxx.cloudfront.net/) においては, CloudFront の 設定画面で Default Root Object を index.html を指定しておくことでルートディレクトリパスが index.html を参照するようになる.)


CloudFront のオリジンを設定する際に S3 bucket の URL ではなく Static Website Hosting の URL を指定することでサブディレクトリパスの index.html を参照させる.


(1) CloudFront の設定画面を開く.

(i) 新規に CloudFront を設定する場合

CloudFront の画面から Create Distribution を選択し次の画面へ.


(ii) 既存の CloudFront を設定する場合

ドメイン名を選択し Distribution Settings を開く.


Origins のタブの Domain Name の Edit を選択.


(2) Origin Settings の Origin Domain Name の入力欄に, 指定したい bucket の Static Website Hosting の設定画面に明記されている yyy.s3-website-ap-northeast-1.amazonaws.com を入力し保存する.

(3) 設定は以上. xxx.cloudfront.net/foo/xxx.cloudfront.net/foo/index.html を返すことを確認する.

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
Help us understand the problem. What are the problem?