S3の静的ウェブサイトで複数のサブフォルダーをホストする

やりたいこと

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

目次

1. 設定
2. エラー
3. 参考文献

#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タブへ移動

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

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

動作確認

ディストリビューションがデプロイされたら、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で静的ウェブサイトをホスティングする