CloudFront+S3構成でサブディレクトリのIndexを参照する方法！😎CloudFrontとLambda@Edgeのテクニックを解説🚀

この記事は公開されてから１年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！

企業や商品宣伝用のHPなどの、静的なウェブサイトの公開に S3 と CloudFront を使用している方は多いのではないでしょうか。

ただ、CloudFront と S3 で公開しようとすると、サブディレクトリのルートオブジェクトの指定方法に悩むかと思います。例えば下記のような指定を行うと 400 系のレスポンスが CloudFront から返却されるかと思います。

https://example.cloudfront.net/aboutus/

しかし、ユーザーに対して下記のようにファイル名も付与してアクセスしてもらうのは少し乱暴な気もします。

https://example.cloudfront.net/aboutus/index.html

本記事では、ファイル名を指定せずともルートオブジェクト（ index.html ）が見えるようにできる Lambda@Edge を使用したテクニックを紹介します。

想定する読者

CloudFront と S3 でウェブサイトのホスティングを行いたいヒト
CloudFront と S3 の構成でルートオブジェクトの設定に悩んでいるヒト

はじめに

CloudFront と Lambda@Edge を使用するのを前提

EC2 などのサーバーインスタンスの解説を行う記事ではありません。

処理のワークフロー

処理のワークフローは下記のようになります。

CloudFront でリクエストを受信
Lambda＠Edge を実行し S3 へのリクエスト URL を調整
S3 へリクエスト
CloudFront からユーザーへレスポンス

Lambda＠Edge は、S3 へアクセスを行う直前に実行されます。詳しい実行内容は後述します。

Lambda＠Edgeの実行内容とソースコード紹介

Lambda＠Edge では、リクエストの URL の末尾が / で終わっている場合に、末尾に index.html を付与し S3 へリクエストを出すように調整を行います。

'use strict';
exports.handler = (event, context, callback) => {
    const request = event.Records[0].cf.request;

    const olduri = request.uri;

    // 末尾が/で終わっている場合はindex.htmlを付与してリクエスト
    const newuri = olduri.replace(/\/$/, '\/index.html');

    // S3へのリクエストのURLを差し替える
    request.uri = newuri;

    return callback(null, request);
};

上記の Lambda 関数を指定の CloudFront の Origin Request へデプロイしてください。これにより、ユーザーが index.html を指定せずに index.html を参照できるようになります。

このテクニックを応用すると、例えば index.pdf、index.csv の指定も可能となりますので、適宜シーンに応じてソースコードを調整してください。