🐺

CloudFrontで動的パスに対応する

2024/04/20に公開

AWS

はじめに

S3 & CloudFront で静的ホスティングの配信をした時に
動的ページの解決に CloudFront の Functions を使ってみた話

CloudFront Functions

Functionsに関してはこちら

ざっくりまとめると

ビューワーからリクエスト CloudFront を受信したとき (ビューワーリクエスト）
ビューワーにレスポンスを CloudFront 返す前 (ビューワーレスポンス）

上記タイミングで何かしたいときに利用できる関数

軽量で実行時間の短い関数を挟みたい時に使うことを推奨している

キャッシュキーの正規化: HTTP リクエスト属性 (ヘッダー、クエリ文字列、Cookie、さらには URL パス) を変換して、最適なキャッシュキーを作成できます。これにより、キャッシュのヒット率を向上させることができます。

ヘッダー操作: リクエストまたはレスポンスで HTTP ヘッダーを挿入、変更、または削除できます。たとえば、すべてのリクエストに True-Client-IP ヘッダーを追加できます。

ステータスコードの変更と本文の生成 — ヘッダーを評価し、カスタマイズされたコンテンツでビューワーに返すことができます。

URL リダイレクトまたは書き換え: リクエスト内の情報に基づいてビューワーを他のページにリダイレクトしたり、すべてのリクエストをあるパスから別のパスに書き換えたりできます。

リクエストの承認: 承認ヘッダーやその他のリクエストメタデータを調べることで、JSON ウェブトークン (JWT) などのハッシュ化された承認トークンを検証できます。

今回は Request に対してリダイレクトする対応をしていく

関数の作成

CloudFront > 関数を開き新規作成を押下 > cloudfront-js-2.0を選択（async/await搭載したやつ）

実際に実装を行う。下記はCross-Origin Resource Sharing (CORS) ヘッダーをリクエストに追加するサンプル

async function handler(event) {
    const request = event.request;
    const headers = request.headers;
    const host = request.headers.host.value;
   
   // If origin header is missing, set it equal to the host header.
   if (!headers.origin)
       headers.origin = {value:`https://${host}`};
       
   return request;
}

こんな感じで処理をかける

動的処理の追加を行う

同様に処理を書く

function handler(event, context, callback) {
    var request = event.request;
    const uri = request.uri;

    const pattern = /^\/hoge\/([a-zA-Z0-9]+)\/?$/;
    const match = uri.match(pattern);
    
    if (match) {
        // マッチした場合、URIを対応するindex.htmlにリライト
        request.uri = `/your/path/idnex.html`;
    }

    // 変更を適用してリクエストを続行
    return request;
}

最後に

JavaScriptで比較的容易に設定が可能なので便利な印象

他にも「S3場でのリダイレクト設定」&「フロント側でリダイレクト処理を組み込む」ような対応も選択肢にはあったが
CloudFrontのFunctionsを使うほうがシンプルかも

はじめに

CloudFront Functions

関数の作成

動的処理の追加を行う

最後に

Discussion