サーバーレスで、静的サイトジェネレーターなどを使いS3とCloudfrontを使って構築する際、

そのままではサブディレクトリへアクセスができません。

これはcloudfrontがパスまでの指定でのアクセスの場合、ファイル名がわからないからです。

これをLambdaのEdgeを使って、URLがディレクトリまでのアクセスの場合、ファイル名付きでリダイレクトしてあげるように設定してあげます。

その方法をご紹介します。

前提

S3とCloudFrontでwebを公開している

問題

https://xxxxxxxxxxxxxx.com/

とアクセスされたときは問題なく、直下のindex.htmlを探し当てられますが（CloudfrontのDefault Root Objecの設定で）、

それ以下

https://xxxxxxxxxxxxxx.com/dir/

と、アクセスされると、index.htmlが探し当てられなくて、正常にページを表示できません。

方法

Lambda Edgeで

https://xxxxxxxxxxxxxx.com/dir/

ときたら

https://xxxxxxxxxxxxxx.com/dir/index.html

にアクセスするようにします

手順

作成

Lambdaで設定をしていきます。

• LambdaをConsoleから開き、「関数の作成」
• 関数名、ランタイム（バージョン）を入力します。
• ロールは下記のように「AWS既存テンプレートから新しいロールを作成」
• 続いてロール名を適当に入力し、「ポリシーテンプレート」で「Edge」と検索し「基本的な Lambda@Edge のアクセス権限 (CloudFront トリガーの場合)」を選択
• 関数の作成ボタンで作成します。

コード

関数コード欄、index.jsを下記のようにします

'use strict';
exports.handler = (event, context, callback) => {

    // Extract the request from the CloudFront event that is sent to Lambda@Edge
    var request = event.Records[0].cf.request;

    // Extract the URI from the request
    var olduri = request.uri;

    // Match any '/' that occurs at the end of a URI. Replace it with a default index
    var newuri = olduri.replace(/\/$/, '\/index.html');

    // Replace the received URI with the URI that includes the index page
    request.uri = newuri;

    // Return to CloudFront
    return callback(null, request);

};

Cloudfrontと紐付ける

• ページ上部「アクション」から、「新しいバージョンの作成」
• 「Designer」欄の「トリガーを追加」をクリック

まとめ

いかがでしたか？ 意外と簡単にあっさりと設定できました。

お役に立てればと思います。