高度なモード

高度なモードでは、/functions ディレクトリではなく、_worker.js ファイルを使用して Pages Functions を開発できます。

既存のアプリケーションにとって、Pages Functions の組み込みファイルパスベースのルーティングおよびミドルウェアシステムは望ましくない場合があります。複雑で Pages のファイルベースのルーティングシステムに分割するのが難しい Worker があるかもしれません。このような場合、Pages は Pages プロジェクトの出力ディレクトリに _worker.js ファイルを定義する機能を提供します。

_worker.js ファイルを使用する場合、/functions ディレクトリ全体は無視され、そのルーティングおよびミドルウェアの特性も含まれます。代わりに、_worker.js ファイルがデプロイされ、Module Worker 構文を使用して記述する必要があります。Module 構文を使用したことがない場合は、JavaScript モジュールに関するブログ記事 ↗を参照して詳細を学んでください。Module 構文を使用することで、JavaScript フレームワークは Pages の出力ディレクトリの内容の一部として Worker を生成できます。

関数の設定

高度なモードでは、あなたの関数がドメインへのすべての受信 HTTP リクエストを完全に制御します。あなたの関数は、プロジェクトの静的アセットにリクエストを行うか、転送する必要があります。これを怠ると、壊れた動作や望ましくない動作が発生します。あなたの関数は Module 構文で記述する必要があります。

出力ディレクトリに _worker.js ファイルを作成した後、次のコードスニペットを追加します：

JavaScript
TypeScript

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    if (url.pathname.startsWith('/api/')) {
      // TODO: ここにカスタム /api/* ロジックを追加します。
      return new Response('Ok');
    }
    // それ以外の場合は、静的アセットを提供します。
    // これがないと、Worker はエラーを返し、アセットは提供されません。
    return env.ASSETS.fetch(request);
  },
}

// 注意: TS を JS にコンパイルし、`_worker.js` ファイルとして出力する必要があります。`_worker.ts` は読み込みません。

interface Env {
  ASSETS: Fetcher;
}

export default {
  async fetch(request, env): Promise<Response> {
    const url = new URL(request.url);
    if (url.pathname.startsWith('/api/')) {
      // TODO: ここにカスタム /api/* ロジックを追加します。
      return new Response('Ok');
    }
    // それ以外の場合は、静的アセットを提供します。
    // これがないと、Worker はエラーを返し、アセットは提供されません。
    return env.ASSETS.fetch(request);
  },
} satisfies ExportedHandler<Env>;

上記のコードでは、/api/ に向けられたすべてのリクエストに対して応答を返すように関数を設定しています。それ以外の場合、関数は静的アセットを返すことになります。

env.ASSETS.fetch() 関数を使用すると、特定のリクエストに対してアセットを返すことができます。
env は、環境変数とバインディングを含むオブジェクトです。
ASSETS は、関数と Pages のアセット提供リソース間の通信を可能にするデフォルトの関数バインディングです。
fetch() は、Pages のアセット提供リソースに対する呼び出しを行い、要求されたアセットを提供します。

Workers からの移行

既存の Worker を Pages プロジェクトに移行するには、Worker コードをコピーして新しい _worker.js ファイルに貼り付けます。その後、静的アセットを処理するために、次のコードスニペットを _worker.js に追加します：

return env.ASSETS.fetch(request);

関数のデプロイ

新しい関数を設定したり、Worker を _worker.js に移行した後は、_worker.js ファイルが Pages プロジェクトの出力ディレクトリに配置されていることを確認してください。高度なモードを有効にするために、Git 統合を通じてプロジェクトをデプロイします。

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings