やりたいこと

S3バケットに複数のサブフォルダーを追加して、https://domain_name/folder_nameでそれぞれのフォルダーにアクセスできるようにする

目次

設定
エラー
参考文献

#1. 設定

S3バケットにサブフォルダーを追加する

例

BUCKET_NAME/portfolio
BUCKET_NAME/website_1
BUCKET_NAME/website_2

それぞれのサブフォルダーにドキュメントルートとしてindex.htmlを設置

例

BUCKET_NAME/portfolio/index.html
BUCKET_NAME/website_1/index.html
BUCKET_NAME/website_2/index.html

CloudFrontディストリビューションの設定を変更

対象のディストリビューションを選択して、Error pagesタブへ移動

カスタムエラーレスポンスを作成

エラーコード403を選択
response page pathをindex.htmlに設定
作成

動作確認

ディストリビューションがデプロイされたら、https://domain_name/folder_nameでアクセスをしてエラーが出なければ完了

#2. エラー
上記の設定をしても、403エラーのリダイレクトがされない場合に確認すること
CloudFrontディストリビューションのorigin nameはS3静的ウェブサイトのエンドポイントを設定する
例
⭕️BUCKET_NAME.s3-website-ap-southeast-1.amazonaws.com

origin nameがS3バケットそのもののエンドポイントだとリダイレクトがうまくいかない
❌BUCKET_NAME.s3.ap-southeast-1.amazonaws.com

コメント

ベストプラクティスではないかもしれないけれど、個人や社内のトレーニング用で複数のウェブサイトを一つのバケットで管理したいときに便利だと思った

#3. 参考文献

AWS S3で静的ウェブサイトをホスティングする