S3 Cloudfront Lambda Edgeでサブディレクトリへアクセス
February 03, 2019

DEVELOPMENT

web
js
aws
s3
cloudfront
lambda

サーバーレスで、静的サイトジェネレーターなどを使い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既存テンプレートから新しいロールを作成」 role
  • 続いてロール名を適当に入力し、「ポリシーテンプレート」で「Edge」と検索し「基本的な Lambda@Edge のアクセス権限 (CloudFront トリガーの場合)」を選択 role
  • 関数の作成ボタンで作成します。

コード

関数コード欄、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」欄の「トリガーを追加」をクリック role

まとめ

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

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

うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

🙏よかったらシェアお願いします🙏
WRITTEN BY
うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

CONACT
入力して下さい
Slack からもどうぞ

※お気軽にどうぞ!(6月20日まで有効!お早めに)

COPYRIGHT © 2020 UKAI CO., LTD. ALL RIGHTS RESERVED.