[AWS] CloudFront + S3構成でサブディレクトリのindex.htmlを返す方法

AWS CloudFront + S3構成について

まず、AWS CloudFront + S3で構成するパターンは下記2パターンあります。

1. CloudFront のオリジンにS3バケットそのものを指定する構成
2. CloudFront のオリジンにS3バケットのStatic website hostingのエンドポイントを指定する構成

ですが、現状、2のパターンはS3への直接アクセスを許可してしまうため、セキュリティとして非推奨のようです。
なので1のパターンで構成することを考えます。

「 1. CloudFront のオリジンにS3バケットそのものを指定する構成」ではデフォルトルートオブジェクトのファイル名(index.html)をディストリビューションで指定しているオリジンのルートにしか設定できません。
そのため、サブディレクトリへのパス(例) xxx.com/aaa/へアクセスすると、そのディレクトリにindex.htmlがあったとしても403エラーとなります。

これを解決するには Lambda@Edgeを作成します。

Lambda@Edge作成手順

Lambda@Edge作成の手順として下記のようになります。

1. Lambda関数作成
   コンソールから「関数の作成」をクリックして関数を作成する
   ※注意：Lambda@Edge 関数の作成は、現時点ではバージニアリージョンでしかできないようですので、us-east-1（米国東部：バージニア北部）を選択します

2. Lambda関数のコードを実装
   下記のような実装をします。（参考リンクにあるソースをそのまま使用できます）

CloudFrontイベント「オリジンリクエスト」イベントをハンドルし、リクエストパスの末尾が「/」で終わっているものを「/index.html」に置き換える。

1. Lambda関数を CloudFront ディストリビューションに関連付けるために必要なIAM アクセス許可の設定をする
   参考：https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-edge-permissions.html

2. Lambda関数のトリガーを設定
   CloudFrontを選択し、下記を設定する

3. ディストリビューション：任意のディストリビューション

4. CloudFrontイベント：オリジンリクエスト

5. レプリケートの有効化：チェックする

これでサブディレクトリのパスにアクセスしてもindex.htmlを返すようになりました！！！

参考：
CloudFront が、サブディレクトリからデフォルトのルートオブジェクトを返さないのはなぜですか?
Lambda@Edgeの設定例
S3 オリジンへの直接アクセス制限と、インデックスドキュメント機能を共存させる方法

Lambda@Edgeのログ確認方法

CloudWatch LogsでLambda@Edgeのログの確認ができます。

CloudWatchコンソール
https://ap-northeast-1.console.aws.amazon.com/cloudwatch/home?region=ap-northeast-1

※CloudFrontにアクセスしたとき、Lambda@Edgeを動作させたエッジロケーションによってログ出力されるリージョンが決定されます。（Lambda@Edge作成したときに選択したリージョンに出力されるわけではないことに注意です）

参考：
https://dev.classmethod.jp/articles/where-is-the-lambda-edge-log/