S3 + CloudFront でフロントエンドを配信する話ふたたび

S3 オブジェクトに設定したヘッダ用メタデータからヘッダを設定する
*/ へのリクエストで */index.html を要求する

メタデータからヘッダを設定する
ディレクトリインデックスを要求する
まとめ
参考資料

SOURCES

getto-systems/content-delivery-aws-lambda-edge : GitHub

ENVIRONMENTS

Node.js : 10

メタデータからヘッダを設定する

S3 からのレスポンスにヘッダを追加するのは以前の記事でも行なった。

今回は、S3 オブジェクトに追加したメタデータからヘッダを設定してみる。

'use strict';

exports.handler = async (event) => {
    const response = event.Records[0].cf.response;
    let headers = response.headers;

    Object.keys(headers).forEach((raw) => {
        const lower = raw.toLowerCase();
        const pattern = /^x-amz-meta-header-/;
        if (lower.match(pattern)) {
            const key = lower.replace(pattern, "");
            headers[key] = [{
                key: key,
                value: headers[raw][0].value,
            }];
        }
    });

    return response;
};

S3 のメタデータは x-amz-meta- という接頭辞がついている
ヘッダにするメタデータにはさらに header- をつけることにした
headers には、[{ "key": "Name", "value": "Header" }] の形式でヘッダを指定する

この関数を Origin Response に設定する。

TOP

ディレクトリインデックスを要求する

CloudFront では、*/ へのリクエストを */index.html にしてくれる機能はない。（リダイレクトとかできるといいのに…）

なので、 Lambda@Edge を仕込むことにする。この記事を参考にした。

'use strict';

exports.handler = async (event) => {
    let request = event.Records[0].cf.request;
    request.uri = request.uri.replace(/\/$/, '/index.html');
    return request;
};