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