🛸

AWS Lambda Web Adapter + CloudFront構成のWebアプリでハマったこと

2025/05/05に公開

 TL;DRCloudFrontディストリビューションでキャッシュポリシーを CachingDisabled に設定しているとオリジン(アプリ側)にクエリパラメータが転送されない
キャッシュキーに クエリ文字列 を含めることでオリジンにクエリパラメータが転送される

 ハマったことAWS Lambda Web Adapter + CloudFrontでReac Router v7のアプリを動かそうとした時に、クエリパラメータが取得できないという問題に直面しました。(ローカル実行では取得できる)

export async function loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url);
  const q = url.searchParams.get("q");
  return { q } // 👈 `q` is undefined 🤔
}

export default Page() { ... }
また、クエリパラメータがアプリ側に渡ってこないため、React Router v7のLazy Route Discovery (Fog of War)がうまく動かず、画面遷移時に404が表示されていました。

CloudWatcheのログを確認すると、manifestのリクエスト時のversionとpパラメータがいません。。


本来であれば、__manifest?version=<VERSION>&p=<P>形式になるはず
https://remix.run/docs/en/main/guides/lazy-route-discovery

 原因Lambdaの前に置いてあるCloudFrontのキャッシュポリシーが CachingDisabled になっていたことが原因でした。
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/using-managed-cache-policies.html#managed-cache-policy-caching-disabled
キャッシュキー設定のクエリ文字列がすべてになっているキャッシュポリシーを作成し、対象ディストリビューションの ビヘイビア -> キャッシュキーとオリジンリクエスト で作成したキャッシュポリシーを設定することで、クエリパラメータがアプリ側に転送することができるようになりました。

TL;DR

ハマったこと

原因

Discussion