Cloudflare Workers を使って Web ページを段階的に移行したい

Web サービスリニューアルしたいことってありますよね？
ただ、一度に一気にリニューアルすると、想定していない不具合が出てきたり、今の運用どうするの？っていう問題があったりします。
そこで、 Cloudflare Workers を使って段階的に移行する方法を紹介します。

今回は、現行サービスを Cloudflare Proxy のオリジンとして設定してあることをベースとして、新しい部分は例えば Cloudflare Pages などで別ドメインでホストされているとします。
その場合、以下のように Cloudflare Workers でプロキシーしてあげることで、想定した動作を行うことが出来ます。

                                 +---- Old Pages --- www.natsuneko.cat (Current Origin)
                                 |
Internet -- Cloudflare Workers --+
                                 |
                                 +---- New Pages --- new.natsuneko.cat (New Origin)

ということで、これを実装していきましょう。
ちょっとでも楽に実装したいので Hono を使います。

$ pnpm create hono@latest

もろもろ作れたら、以下のように実装しましょう。

import { Hono } from "hono";

type Bindings = {
  NEW_ORIGIN: string;
};

const newUrls: RegExp[] = [/^\/articles(\/.*)?$/];

const app = new Hono<{ Bindings: Bindings }>();

app.get("*", async (c) => {
  const { path } = c.req;
  const isMigratedUrl = newUrls.some((url) => url.test(path));

  if (isMigratedUrl) {
    // New Origin へ
    return fetch(`${c.env.NEW_ORIGIN}${path}`);
  }

  // Old Origin へ
  return fetch(c.req.raw);
});

export default app;