【AWS S3】静的サイトホスティングでサブディレクトリへのアクセスに失敗する

AWSのS3で静的サイトをホスティングする時に、サブディレクトリへのアクセスに失敗するので対策をメモ。

何が起こったのか

ルートディレクトリに配置しているindex.htmlにはルートドメインで表示され問題ありません。

しかし、サブディレクトリ直下にindex.htmlを置いているのにexample.com/hogeにアクセスしても表示されません。

本来なら、example.com/hogeにアクセスすると、直下に置いているindex.htmlを表示してくれるはずなのに。。

ちなみに、ベタ打ちでexample.com/hoge/index.htmlと入力すると表示されます。

何がいけないんだ・・・

原因はcloudfront

前に試しでS3を作った時は、exaple.com/hogeでもindex.htmlは表示されていました。

今回、cloudfrontを結びつけていたため、このようなことが起こったようです。

なんでも、cloudfrontを使うと、exaple.com/hogeにアクセスしてもその後のファイルを明示しないといけないみたいです。

だから、exaple.com/hogeにアクセスしても表示されなかったのに、exaple.com/hoge/index.htmlにアクセスすると表示されたのか。納得。

対策

lambdaを使って関数でexample.com/hogeのアクセスに、index.htmlを教えてあげるみたいな方法がヒットしました。

https://blog.u-chan-chi.com/post/aws-s3-cloudfront-subdir/

ただ、これ結構前の方法で管理画面も変わってしまっています。

今だとどんな方法あるのかなー、と思っていたらまさにそれの記事見つけました。

https://jun-app.com/articles/s3-clioudfront-website

詳しいことは記事を見てもらうとして、端的に説明すると

  • S3のバケットウェブサイトエンドポイントをコピー
  • cloud frontオリジンドメインの箇所にペースト

サジェストに出てくるエンドポイントはあくまでS3オブジェクトのURLであり静的サイトホスティングのような今回のケースでは期待通りの動きをしてくれません。

プログラミング独学のおすすめ本

アメリカにて独学でプログラミングを学ぶ方法を紹介しているジョン・ソンメズ氏による翻訳本。

どのようにプログラミングを独学で勉強していくかのロードマップが詳しく記載されています。

ソフトウェア開発者のキャリアについても言及されているので、プログラミング初心者以外の人にもおすすめ。



カテゴリー