【Cloudflare Workers 】特定のページでリダイレクトする【Page Rulesと併用】

はじめに

こんにちは。 Cloudflare Pages でホスティング（デプロイ）したサイトから強制的に別のサイトへリダイレクトさせます。

設定のやり方

Cloudflare Workers は CDN 上で動くので、その場所で動かすプログラムを書きます。 そのプログラムでは、特定の URL と一致したら遷移する方法を取ります。

Cloudflare の UI（画面）は頻繁に変わりURL も変わることが多いため、使い方は公式ページでご覧ください。スクショは添付しません、ということです。

Cloudflare Workers©

Build your next application with Cloudflare Workers

https://workers.cloudflare.com/

const redirectHttpCode = 301;
const redirectMap = new Map([
  ["/attachments/path-hoge", "https://blog.cohu.dev/path-hoge"],
  // 必要に応じて書く
]);

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  const { pathname } = url;

  const targetUrl = redirectMap.get(pathname);
  if (targetUrl) {
    return Response.redirect(targetUrl, redirectHttpCode);
  }

  return fetch(request);
}

自分のサイトはページ数が少なく、愚直にパスをマップで書きました。ページ数が多い場合は、正規表現を使って Boolean を求め、リダイレクトさせれば OK です。

なぜこのやり方？

ページルールが使えなかったからです。もともと、以下の記事で書いたのですが、example.com からwww.example.comにリダイレクトさせています。

Cloudflareのページルールでrootドメインからwwwへリダイレクトする【Page Rules】

https://zenn.dev/cota_hu/articles/a0fabdbf35007e

ページルールは同時に 2 つ動かすことができないと推測しました。 そのため、ページルールで遷移したのちに、Workers で遷移するという手段を思いついた次第です。

リダイレクトの確認

https://wheregoes.com/trace/20222569712/からリダイレクトを確認します。

このサイトは複数回のリダイレクトも表示してくれて非常に便利ですよ。

おわりに

以上、Cloudflare Workers で強制的にリダイレクトさせる方法でした。

あまりにもページ数が多いサイトや、PV 数が多いサイトでは無料で行うことは困難な可能性があります。 そのため、作って半年くらいの個人サイトで使うのが便利だと感じました。