AWSチーム ブログ

S3とCloudFrontで公開したwebページのサブディレクトリが開けない

作成者: 吉川 朋希|2025/01/30 9:07:20

前回の私の記事で、CloudFront経由でS3バケットのルートにあるindex.htmlにアクセスすることができるようになりました。
しかし、前回の手順だけではS3バケットの中に作ったサブディレクトリのindexファイルを確認するには、index.htmlまでURLを指定しないとアクセスできません。

そこで、今回はCloudFront Functionsを使用して、URLにindex.html指定しなくてもアクセスできるようにしていきたいと思います。

 

もくじ

① 現在のS3バケットの中身
② サブディレクトリのindex.htmlにアクセスしてみる
③ CloudFront Functionsの設定
④ もう一度、サブディレクトリのindex.htmlにアクセスしてみる
⑤ アクセスできなかった原因の解説

 

① 現在のS3バケットの中身

前回作成したバケットの中に「sub」というフォルダを作成し、その中にindex.htmlをアップロードしています。


 

② サブディレクトリのindex.htmlにアクセスしてみる

CloudFrontのディストリビューションドメイン名にディレクトリ名だけをつけましたが、アクセスできませんね。

------
This XML file does not appear to have any style information associated with it. The document tree is shown below.

(このXMLファイルは関連付けられたスタイル情報を持っていないようです。ドキュメントツリーは以下の通りです。)
------

ディレクトリ名の後ろにindex.htmlとファイル名まで指定するとアクセスできました。

 

③ CloudFront Functionsの設定

「CloudFront」と検索し、CloudFrontのサービス画面に移動します。

 

左側のメニューバーから「関数」を選択します。

 

「関数を作成」をクリックし、新しい関数を作成します。


関数の「名前」を入力し、「関数を作成」をクリックします。

以下のAWSのサンプルコードで「関数コード」を書き換えて、保存します。
aws-samples/amazon-cloudfront-functions

「発行」タブをクリックし、「関数を発行」をクリックします。

 

下に「関連付けられているディストリビューション」が表示されるので、「関連付けを追加」をクリックし、適用したいディストリビューションを選択します。

以上でCloudFront Functionsの設定は終了です。

 

④ もう一度、サブディレクトリのindexファイルにアクセスしてみる

先ほどと同様に、CloudFrontのディストリビューションドメイン名にディレクトリ名だけをつけて、アクセスするとindexファイルが確認できます。



もちろん、ディレクトリ名の後ろにindex.htmlとファイル名まで指定してもアクセスできます。


⑤ アクセスできなかった原因の解説

S3にはフォルダという概念がなく、Key-Value型のデータストアです。
つまり、今回のS3バケットの中にあるキーは以下の2つだけです。

  • index.html
  • sub/index.html

今回のように https://******.cloudfront.net/sub/ というURLにアクセスする時、CloudFrontはS3に"sub/"というキーを探すようにリクエストを送ります。
しかし、S3バケットにあるキーは上記の2つだけで、"sub/"というキーはありません。
そこで、S3はキーが存在しないというエラーを返し、CloudFrontはS3バケットに存在するキーの漏洩を防ぐために「AccessDenied」というエラーを返していました。