Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

ルーティング

最終更新 Markdown で表示Agent セットアップ

Functions はファイルベースのルーティングを使います。/functions ディレクトリ構造が、Functions が実行される指定ルートを決めます。プロジェクトの用途に応じて、必要な階層数の /functions ディレクトリを作成できます。次のディレクトリを確認してください。

  • ...
  • functions
    • index.js
    • helloworld.js
    • howdyworld.js
    • fruits
      • index.js
      • apple.js
      • banana.js

上記のファイル構造に基づいて、次のルートが生成されます。これらのルートは、訪問者が URL にアクセスしたときに呼び出される /functions ファイルへ、URL パターンを対応付けます。

ファイルパス ルート
/functions/index.js example.com
/functions/helloworld.js example.com/helloworld
/functions/howdyworld.js example.com/howdyworld
/functions/fruits/index.js example.com/fruits
/functions/fruits/apple.js example.com/fruits/apple
/functions/fruits/banana.js example.com/fruits/banana

一致する Function がない場合は、静的アセットがあればそこにフォールバックします。それ以外の場合、Function は Pages の静的アセット向けの デフォルトのルーティング動作 にフォールバックします。

動的ルート

動的ルートを使うと、パラメーター化されたセグメントで URL を照合できます。動的なアプリケーションを構築する場合に役立ちます。ファイル名を変更して、1 つのパスに対応する動的な値を受け取れます。

単一パスセグメント

動的ルートを作成するには、ファイル名を 1 組の括弧で囲みます。例: /users/[user].js。これにより、単一パスセグメントのプレースホルダーを作成します。

パス 一致するか
/users/nevi はい
/users/daniel はい
/profile/nevi いいえ
/users/nevi/foobar いいえ
/nevi いいえ

複数パスセグメント

ファイル名を 2 組の括弧で囲むと(例: /users/[[user]].js)、/users/ 以降の任意の深さのルートに一致します。

パス 一致するか
/users/nevi はい
/users/daniel はい
/profile/nevi いいえ
/users/nevi/foobar はい
/users/daniel/xyz/123 はい
/nevi いいえ

動的ルートの例

次の /functions/ ディレクトリ構造を確認してください。

  • ...
  • functions
    • date.js
    • users
      • special.js
      • [user].js
      • [[catchall]].js

次のリクエストは次のファイルに一致します。

リクエスト ファイル
/foo 静的アセットがあればそこにルーティングされます。
/date /date.js
/users/daniel /users/[user].js
/users/nevi /users/[user].js
/users/special /users/special.js
/users/daniel/xyz/123 /users/[[catchall]].js

プレースホルダー([user])に一致する URL セグメントは、リクエストの context オブジェクトで利用できます。context.params オブジェクトを使い、特定のファイル名プレースホルダーに一致した値を見つけられます。

単一の URL セグメントに一致するファイル(括弧が 1 組)では、値は文字列として返されます。

export function onRequest(context) {
	return new Response(context.params.user);
}

上記のロジックは、/users/daniel へのリクエストで daniel を返します。

複数の URL セグメントに一致するファイル(括弧が 2 組)では、値は配列として返されます。

export function onRequest(context) {
	return new Response(JSON.stringify(context.params.catchall));
}

上記のロジックは、/users/daniel/xyz/123 へのリクエストで ["daniel", "xyz", "123"] を返します。

Functions 呼び出しルート

純粋な静的プロジェクトでは、Pages は無制限の無料リクエストを提供します。ただし、Pages プロジェクトに Functions を追加すると、デフォルトですべてのリクエストが Function を呼び出します。無制限の無料静的リクエストを引き続き受けるには、_routes.json ファイルを作成してプロジェクトの静的ルートを除外します。Pages CI または Wrangler でプロジェクトを公開するとき、プロジェクトに functions ディレクトリが検出されると、このファイルは自動生成されます。

_routes.json ファイルを作成する

Function が呼び出されるタイミングを制御するには、_routes.json ファイルを作成します。プロジェクトのビルドディレクトリに置きます。

デフォルトのビルドディレクトリ

人気のフレームワークとツール向けの標準的なビルドコマンドとディレクトリです。

フレームワーク / ツールビルドコマンドビルドディレクトリ
React (Vite)npm run builddist
Gatsbynpx gatsby buildpublic
Next.js (Static HTML Export)npx next buildout
Nuxt.jsnpm run builddist
Qwiknpm run builddist
Remixnpm run buildbuild/client
Sveltenpm run buildpublic
SvelteKitnpm run build.svelte-kit/cloudflare
Vuenpm run builddist
Analognpm run builddist/analog/public
Astronpm run builddist
Angularnpm run builddist/cloudflare
Brunchnpx brunch build --productionpublic
Docusaurusnpm run buildbuild
Elder.jsnpm run buildpublic
Eleventynpx @11ty/eleventy_site
Ember.jsnpx ember-cli builddist
GitBooknpx gitbook-cli build_book
Gridsomenpx gridsome builddist
Hugohugopublic
Jekylljekyll build_site
MkDocsmkdocs buildsite
Pelicanpelican contentoutput
React Staticreact-static builddist
Slate./deploy.shbuild
Uminpx umi builddist
VitePressnpx vitepress build.vitepress/dist
Zolazola buildpublic

このファイルには 3 つのプロパティがあります。

  • version: スキーマのバージョンを定義します。現在スキーマは 1 バージョンだけです(version 1)。将来さらに追加される可能性があり、後方互換を目指します。
  • include: Functions が呼び出すルートを定義します。ワイルドカード動作に対応します。
  • exclude: Functions が呼び出さないルートを定義します。ワイルドカード動作に対応します。exclude は常に include より優先されます。

構成の例

次は _routes.json の例です。

{
	"version": 1,
	"include": ["/*"],
	"exclude": []
}

この _routes.json は、すべてのルートで Functions を呼び出します。

次は別の _routes.json ファイルの例です。/build ディレクトリ内のルートは Function を呼び出さず、Functions 呼び出し料金は発生しません。

{
	"version": 1,
	"include": ["/*"],
	"exclude": ["/build/*"]
}

Fail open / closed

Workers Free プランでは、Pages Functions リクエストの日次無料枠を使い切ったときの Pages の動きを設定できます。たとえば Pages Functions で認証チェックやその他の重要な機能を実行している場合、枠を使い切ったときに Pages プロジェクトを無効にしたいことがあります。

  1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗
  2. Pages プロジェクトを選びます。

  3. Settings > Runtime > Fail open / closed を開きます。

「Fail open」は、通常なら Pages Functions が先に実行される場合でも、静的アセットの配信を続けることを意味します。「Fail closed」は、静的アセットではなくエラーページを返すことを意味します。

Pages Functions の日次リクエスト上限は、Workers Standard にアップグレードすると完全になくせます。

上限

Functions 呼び出しルートには次の上限があります。

  • include ルールは少なくとも 1 つ必要です。
  • include/exclude ルールの合計は 100 を超えてはいけません。
  • 各ルールは 100 文字を超えてはいけません。

役に立ちましたか?