前回の私の記事で、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」というエラーを返していました。
