コンテンツにスキップ

ルーティング

関数はファイルベースのルーティングを利用します。あなたの /functions ディレクトリ構造が、関数が実行される指定されたルートを決定します。プロジェクトのユースケースに応じて、必要なだけのレベルを持つ /functions ディレクトリを作成できます。以下のディレクトリを確認してください：

|---- …
|---- functions
      |___ index.js
      |___ helloworld.js
      |___ howdyworld.js
      |___ fruits
            |___ index.js
            |___ apple.js
            |___ banana.js

上記のファイル構造に基づいて、以下のルートが生成されます。これらのルートは、訪問者がURLにアクセスしたときに呼び出される /functions ファイルにURLパターンをマッピングします：

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

関数が一致しない場合、静的アセットが存在すればそれにフォールバックします。そうでなければ、関数はページの静的アセットのデフォルトルーティング動作にフォールバックします。

動的ルート

動的ルートを使用すると、パラメータ化されたセグメントを持つURLと一致させることができます。これは、動的アプリケーションを構築している場合に便利です。ファイル名を変更することで、単一のパスにマッピングされる動的値を受け入れることができます。

単一パスセグメント

動的ルートを作成するには、ファイル名の周りに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"] を返します。

関数の呼び出しルート

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

_routes.json ファイルの作成

関数が呼び出されるタイミングを制御するために、_routes.json ファイルを作成します。このファイルは、プロジェクトの出力ディレクトリに配置する必要があります。

このファイルには、3つの異なるプロパティが含まれます：

  • version: スキーマのバージョンを定義します。現在、スキーマのバージョンは1つのみですが、将来的に追加する可能性があり、後方互換性を目指しています。
  • include: 関数によって呼び出されるルートを定義します。ワイルドカードの動作を受け入れます。
  • exclude: 関数によって呼び出されないルートを定義します。ワイルドカードの動作を受け入れます。exclude は常に include よりも優先されます。

設定の例

以下は、_routes.json の例です。

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

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

以下は、別の _routes.json ファイルの例です。/build ディレクトリ内の任意のルートは関数を呼び出さず、関数の呼び出し料金も発生しません。

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

制限

関数の呼び出しルートには以下の制限があります：

  • 少なくとも1つのインクルードルールが必要です。
  • インクルード/エクスクルードルールの合計は100を超えてはなりません。
  • 各ルールは100文字を超えてはなりません。
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings