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 などのサーバーインスタンスの解説を行う記事ではありません。

処理のワークフロー

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

1. CloudFront でリクエストを受信
2. Lambda＠Edge を実行し S3 へのリクエスト URL を調整
3. S3 へリクエスト
4. 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 の指定も可能となりますので、適宜シーンに応じてソースコードを調整してください。

まとめ

Lambda＠Edge を使用すると、ちょっとしたウェブサイトのホスティングを高い可用性で楽に構築できます。
格安の共有サーバーではスパイクアクセス対応が難しいので、ぜひ AWS の CloudFront ＋ S3 を活用してください。

本記事のような簡易的な構成でしたら、10万以下でサーバー構築を承ることも可能です。お気軽にご相談ください。