Workers Sites から Pages への移行

このチュートリアルでは、既存の Cloudflare Workers Sites ↗ アプリケーションを Cloudflare Pages に移行する方法を学びます。

前提条件として、Wrangler ↗ を使用して作成された Cloudflare Workers Sites プロジェクトを持っている必要があります。

Cloudflare Pages は、サイトを提供するためのあらゆる側面に対して組み込みのデフォルトを提供します。カスタムキャッシュロジックなど、Worker のカスタム動作を Functions を使用して Cloudflare Pages プロジェクトに移植できます。これにより、使いやすいファイルベースのルーティングシステムが実現します。また、カスタムヘッダーやリダイレクトを Pages に移行することもできます。

すでにかなり複雑な Worker を持っている場合や、Pages のファイルベースのルーティングシステムに分割するのが面倒な場合もあるでしょう。そのような場合、Pages では、Pages プロジェクトの出力ディレクトリに _worker.js ファイルを定義する機能を開発者に提供しています。

ノート

_worker.js ファイルを使用する場合、全体の /functions ディレクトリは無視されます。これには、そのルーティングおよびミドルウェアの特性が含まれます。代わりに、_worker.js ファイルはそのままデプロイされ、Module Worker 構文を使用して記述する必要があります。

Cloudflare Pages に移行することで、プレビュー展開や追加の設定なしでの自動ブランチデプロイなどの機能にアクセスできるようになります。

不要なコードの削除

Workers Sites プロジェクトは、以下の要素で構成されています。

1. 静的サイトツールを使用して構築されたアプリケーション、または静的な HTML、CSS、JavaScript ファイルのコレクション。
2. 静的サイトツールを使用している場合、静的プロジェクトが HTML、CSS、JavaScript ファイルをビルドするビルドディレクトリ（wrangler.toml で bucket と呼ばれる）。
3. そのビルドディレクトリを提供するための Worker アプリケーション。ほとんどのプロジェクトでは、これは workers-site ディレクトリである可能性が高いです。

Cloudflare Pages に移行する際は、Workers アプリケーションと関連する wrangler.toml 設定ファイルやビルド出力を削除します。代わりに、build コマンド（ある場合）と、プロジェクトのディレクトリ内の wrangler.toml ファイルからの bucket フィールドまたはビルドディレクトリをメモして記録します。

ヘッダーとリダイレクトの移行

出力ディレクトリに _redirects ファイルを作成することで、リダイレクトを Pages に移行できます。Pages は現在、進んだリダイレクトに対して限られたサポートを提供しています。将来的には、より多くのサポートが追加される予定です。サポートされているタイプのリストについては、リダイレクトのドキュメントを参照してください。

ノート

プロジェクトは、2,000 の静的リダイレクトと 100 の動的リダイレクトに制限され、合計で 2,100 のリダイレクトになります。各リダイレクト宣言には 1,000 文字の制限があります。形式が不正な定義は無視されます。同じソースパスに対して複数のリダイレクトがある場合、最上部のリダイレクトが適用されます。

静的リダイレクトは、_redirects ファイル内の動的リダイレクトの前に配置してください。

_redirects ファイルに加えて、Cloudflare は Bulk Redirects も提供しており、Pages によって設定された 2,100 のリダイレクトルールの制限を超えるリダイレクトを処理します。

カスタムヘッダーも、出力ディレクトリ内の _headers ファイルに移動できます。重要な点は、_headers ファイルで定義されたカスタムヘッダーは、Function ルートが URL パターンに一致しても、現在は Functions からのレスポンスに適用されないことです。ヘッダーの取り扱いについて詳しくは、ヘッダーを参照してください。

新しい Pages プロジェクトの作成

git プロバイダーへの接続

build command と build directory を別の場所に記録したら、アプリケーションから他のすべてを削除し、新しいバージョンのプロジェクトを git プロバイダーにプッシュします。以前に保存した build command と build directory を使用して、Cloudflare Pages にプロジェクトを追加するための スタートガイドに従ってください。

Pages プロジェクトにカスタムドメインを使用することを選択した場合、現在デプロイされている Workers アプリケーションと同じカスタムドメインに設定できます。カスタムドメインの追加の手順に従って、Pages プロジェクトにカスタムドメインを追加してください。

ノート

デプロイする前に、古い Workers ルートを削除して、リクエストを Cloudflare Pages に送信する必要があります。

直接アップロードの使用

Workers サイトにカスタムビルド設定がある場合、Direct Uploadを使用して、事前にビルドされたアセットを Pages に持ち込むことができます。さらに、Wrangler CLI またはドラッグアンドドロップオプションを使用して、ウェブサイトのアセットを Cloudflare のグローバルネットワークに直接提供できます。

これらのオプションを使用すると、CLI またはダッシュボードから新しいプロジェクトを作成して名前を付けることができます。プロジェクトのデプロイが完了したら、カスタムドメインの追加の手順に従って、Pages プロジェクトにカスタムドメインを設定できます。

古いアプリケーションのクリーンアップとドメインの割り当て

Pages アプリケーションをデプロイした後、Worker を削除するには：

1. Cloudflare ダッシュボード ↗にログインし、アカウントを選択します。
2. Workers & Pages に移動し、Overview で Worker を選択します。
3. Manage > Delete Worker に移動します。

Workers アプリケーションが削除されると、リクエストは Pages アプリケーションに送信されます。このガイドを完了することで、Workers Sites プロジェクトを Cloudflare Pages に正常に移行しました。