Cloudflare Workersで既存サイトのサブディレクトリにPagesを公開する

はじめに

#

既存のサイト（例: inakacloud.com）のドメインを活かしたまま、特定のサブディレクトリ（例: /typing-toeic/）だけ別のプロジェクト（Cloudflare Pagesなど）を表示させたい場合があります。

Cloudflare Workersを使用すれば、複雑なサーバー設定なしで簡単にこのルーティングを実現できます。

今回、以下にタイピングの練習サイトを作ってみました。Cloudflare Workersを使ってパスベースルーティングの設定をしましたので、備忘を残します。

※　現在は外していますので、上記URLにアクセスしても404エラーになります。

実現したい構成

#

• inakacloud.com/* → Hugoで作成したメインサイト（既存）
• inakacloud.com/typing-toeic/* → Cloudflare Pagesで作成したタイピングアプリ（新規）

1. Cloudflare Pages の準備

#

まず、サブディレクトリで公開したいコンテンツを通常通り Pages にデプロイします。

Viteなどのビルドツールを使っている場合、Base URL をサブディレクトリ名に合わせます。

// vite.config.ts の例
export default defineConfig({
  base: '/typing-toeic/',
  // ...
})

2. Cloudflare Workers によるプロキシ設定

#

新しい Worker を作成し、リクエストを Pages へ転送するコードを記述します。

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const PAGES_URL = "https://your-project.pages.dev"; // Pagesのドメイン

    // `/typing-toeic` へのアクセスを `/typing-toeic/` へリダイレクト（スラッシュ補完）
    if (url.pathname === '/typing-toeic') {
      return Response.redirect(request.url + '/', 301);
    }

    if (url.pathname.startsWith('/typing-toeic/')) {
      // Pages側にはプレフィックスを除いたパスでリクエストを送る
      let path = url.pathname.replace('/typing-toeic/', '/');
      if (path === '') path = '/';

      const targetUrl = new URL(path + url.search, PAGES_URL);
      let response = await fetch(targetUrl, request);

      // SPAフォールバック & 静的ファイルの404回避
      if (response.status === 404 && !url.pathname.endsWith('.xml') && !url.pathname.endsWith('.txt')) {
        return fetch(new URL('/index.html', PAGES_URL), request);
      }
      return response;
    }

    // それ以外は通常通り（既存サイト）を表示
    return fetch(request);
  },
};

3. ルーティング（Routes）の設定

#

作成した Worker をドメインに紐付けます。

1. Cloudflareダッシュボードで ドメイン > 自分のドメイン を選択。
2. 左メニューの Workers ルート をクリック。
3. ルートを追加 を選択。
   • ルート: example.com/typing-toeic*
   • Worker: 上記で作成したプロキシ用Workerを選択

これで、サブディレクトリへのアクセス時のみ Worker が起動し、Pages のコンテンツを透過的に表示するようになります。

まとめ

#

この方法を使えば、メインサイトのドメインパワーを維持したまま、特定のパスだけ最新のフロントエンドフレームワークで構築したアプリを共存させることができます。 Cloudflare Workersでは初めて実装してみましたが、設定も容易でした。サブドメインで運用するバージョンと効果を比較していきたいと思います。

感想

#

AWSでもCloudFrontで似たように設定できますが、Cloudflareはすごいです！自分くらいの利用なら無料でも十分事足りてしまいます。AWSだとランニングコスト結構かかるんですが、、、本当に便利になりましたね。