高度なモード

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

既存のアプリケーションでは、Pages Functions の組み込みのファイルパスベースのルーティングとミドルウェアシステムが適さない場合があります。Worker が複雑で、Pages のファイルベースルーティングに分割しにくいこともあります。そのような場合、Pages プロジェクトの出力ディレクトリに _worker.js ファイルを定義できます。

_worker.js ファイルを使うと、ルーティングとミドルウェアの特性を含む /functions ディレクトリ全体が無視されます。代わりに _worker.js ファイルがデプロイされ、Module Worker 構文 で書く必要があります。Module 構文を使ったことがない場合は、JavaScript modules のブログ記事 ↗ を参照してください。Module 構文を使うと、JavaScript フレームワークが Pages の出力ディレクトリの一部として Worker を生成できます。

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

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

export default {
	async fetch(request, env) {
		const url = new URL(request.url);
		if (url.pathname.startsWith("/api/")) {
			// TODO: Add your custom /api/* logic here.
			return new Response("Ok");
		}
		// Otherwise, serve the static assets.
		// Without this, the Worker will error and no assets will be served.
		return env.ASSETS.fetch(request);
	},
};

// Note: You would need to compile your TS into JS and output it as a `_worker.js` file. We do not read `_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: Add your custom /api/* logic here.
			return new Response("Ok");
		}
		// Otherwise, serve the static assets.
		// Without this, the Worker will error and no assets will be served.
		return env.ASSETS.fetch(request);
	},
} satisfies ExportedHandler<Env>;

上記のコードでは、/api/ 向けのすべてのリクエストにレスポンスを返すよう Function を設定しています。それ以外のリクエストでは、静的アセットを返します。

• env.ASSETS.fetch() 関数で、指定したリクエストのアセットを返せます。
• env は、環境変数とバインディングを含むオブジェクトです。
• ASSETS は、Function と Pages のアセット配信リソース間の通信を可能にする、デフォルトの Function バインディングです。
• fetch() は Pages のアセット配信リソースを呼び出し、要求されたアセットを配信します。

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

return env.ASSETS.fetch(request);

新しい Function をセットアップしたあと、または Worker を _worker.js に移行したあと、_worker.js ファイルが Pages プロジェクトの出力ディレクトリにあることを確認します。Git 連携でプロジェクトをデプロイすると、高度なモードが有効になります。