🌥

Cloudflare PagesのFunctionsを使ってステータスコードを上書きする

2023/01/12に公開

Cloudflare

tech

Cloudflare Pagesは静的なファイルの配信だけではなく、Functionsと呼ばれる機能を使うとCDNエッジでなんらかの処理を実行することができる機能があります。

また、 _middleware.js という名前のファイルを配置することで、通常のリクエストとレスポンスの間に介入してさまざまな処理を実行することができます。公式のExamplesではCORSヘッダーの付与を行なっています。

このようにヘッダーの書き換えなどに関する例はあるのですが、ステータスコードの書き換えをやっている例がなく(そもそもやりたいシチュエーションがあまり多くはなさそう)調べながらやったのでこちらにメモとして残しておきます。

結論としてはmiddlewareに以下の処理を記載することで実現可能でした。(以下の例はTypeScriptを用いています。TypeScriptを利用するための設定はドキュメントにあります)

export const onRequestGet: PagesFunction = async (context) => {
  const original = await context.env.ASSETS.fetch(context.request) // クライアントがリクエストしてきたパスの内容をfetch
  return new Response(original.body, {status: 404}) // fetchした内容をbodyとして返しつつ、statusを404に設定する
}

この例では、このミドルウェアが適用されるルートの全てのレスポンスが404となります。

2行目の context.env.ASSETS.fetch(context.request) がミソで、ここを fetch(context.request) というようにしてしまうと、再帰的にmiddlewareが呼び出されて、再帰呼び出しの上限に到達したというようなエラーが出てしまいます。

余談

筆者はこれを何に使っているかという話を最後に。

Cloudflare Pagesではルートに404.htmlという名前のHTMLを置いておくことで、存在しないリソースへのリクエストがあった際にその内容を404として返してくれるという挙動があります。(ドキュメント)

しかし、/404へ直接アクセスした時にステータスコードが200のまま404ページの内容が返却されてしまうことがなんとなく気になったため、前述のmiddlewareを /functions/404/_middleware.ts に配置することで、 /404 に直接アクセスした時にステータスコードが200のまま404ページの内容が返ってしまう事象を回避しています。

余談

Discussion