なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2023/06/21

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;

まぁやってることとしては単純ですね。
リクエストされたパスが newUrls の正規表現に引っかかったら新しい方へ、そうでなければ古い方 (オリジン) に受け流すというだけですね。
こんな単純なスクリプトで動くので、 Cloudflare Workers も Hono もとても便利。

ということで、メモでした。