CloudFront関数を使用してS3バケット内のファイルにインデックスドキュメントを追加する

はじめに

Amazon S3バケットを利用して静的ウェブサイトをホストする際、ディレクトリアクセスでindex.htmlを自動的に表示する設定が重要です。この記事では、CloudFrontディストリビューションとCloudFront関数を使用して、S3バケットを公開せずにディレクトリへのアクセスを適切に処理する方法を解説します。

課題

静的ウェブサイトのアセットをS3バケットにデプロイし、CloudFrontディストリビューションで提供している場合、ファイル名を指定せずにディレクトリにアクセスするとエラーが発生します。例えば、/products/index.htmlは機能しますが、/products/はエラーを返します。

ソリューション

1. CloudFront関数の作成

ディレクトリがアクセスされた際に、リクエストURLにindex.htmlを追加するCloudFront関数を作成します。

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // ディレクトリへのアクセスをチェック
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    } else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }
    return request;
}

2. CloudFrontディストリビューションへの関数追加

作成したCloudFront関数をCloudFrontディストリビューションのビューアリクエストとして追加します。

手順

1. AWSマネジメントコンソールでCloudFrontにアクセス

   • CloudFrontディストリビューションを選択し、関数を作成してデプロイします。
   • ディストリビューションの動作設定で、ビューアリクエスト関数として設定します。

2. ディストリビューションの設定を確認・更新

   • デフォルトのルートオブジェクトがindex.htmlに設定されていることを確認します。

まとめ

このソリューションにより、S3バケットを公開せずに、ファイル名を指定せずにディレクトリにアクセスできるようになります。CloudFront関数を使用することで、ディレクトリへのアクセス時に自動的にindex.htmlを追加し、適切なコンテンツを提供できます。