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

はじめに

Amazon S3バケットで静的ウェブサイトをホストする時、ディレクトリにアクセスしたときに自動でindex.htmlが表示されるように設定するのが大事です。この記事では、CloudFrontディストリビューションとCloudFront関数を使って、S3バケットを公開せずにディレクトリへのアクセスをうまく処理する方法を説明します。

課題

静的ウェブサイトのファイルをS3バケットにアップロードして、CloudFrontディストリビューションで配信しているとします。この場合、ファイル名を指定せずにディレクトリにアクセスするとエラーが出てしまいます。例えば、/products/index.htmlには問題なくアクセスできますが、/products/にするとエラーになってしまいます。

ソリューション

1. CloudFront関数の作成

ディレクトリにアクセスされたときに、自動で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を追加して、正しいコンテンツを表示させることができます。