Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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 を選択し次の画面へ.

fig1.png

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

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

fig2.png

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

fig3.png

(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 を返すことを確認する.

naoiwata
hachidoriinc
「すべての人に、価値ある仕事を」先端技術と上手く共存し、すべての人が、人間にしかできない「価値ある」仕事に集中できる世界を作りたい。そんな思いでhachidoriはサービスを提供しています。
https://hachidoriinc.com/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした