コンテンツにスキップ

バインディング

バインディングは、あなたのページ関数がCloudflare開発者プラットフォーム上のリソースと対話することを可能にします。バインディングを使用して、あなたのページ関数をKV、Durable Objects、R2、およびD1などのCloudflareリソースと統合します。バインディングは、プロダクション環境とプレビュー環境の両方に設定できます。

このガイドでは、あなたのページ関数のためにバインディングを構成する方法を説明します。続行するには、すでにCloudflare開発者プラットフォームのリソースが設定されている必要があります。

ページ関数は、すべてのバインディングのサブセットのみをサポートしており、これらはこのページにリストされています。

KV名前空間

Workers KVは、Cloudflareのキー・バリュー・ストレージソリューションです。

あなたのKV名前空間をページ関数にバインドするには、wrangler.tomlまたはCloudflareダッシュボードでKV名前空間バインディングを構成できます。

Cloudflareダッシュボードを介してKV名前空間バインディングを構成するには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pagesを選択します。
  3. あなたのページプロジェクトを選択 > 設定 > 関数 > KV名前空間バインディング > バインディングを追加を選択します。
  4. プロダクションまたはプレビュー環境のいずれかでバインディングを設定するかを選択します。
  5. 変数名の下にバインディングに名前を付けます。
  6. KV名前空間の下で、希望する名前空間を選択します。プロダクションとプレビュー環境の両方について、ステップ5と6を繰り返す必要があります。
  7. バインディングを有効にするためにプロジェクトを再デプロイします。

以下は、あなたの関数でKVを使用する方法の例です。次の例では、あなたのKV名前空間バインディングはTODO_LISTと呼ばれ、関数コード内のcontext.envでバインディングにアクセスできます：

export async function onRequest(context) {
  const task = await context.env.TODO_LIST.get("Task:123");
  return new Response(task);
}

ローカルでKV名前空間と対話する

あなたは、次の2つの方法のいずれかでローカルでKV名前空間バインディングと対話できます：

  • あなたのページプロジェクトのwrangler.tomlファイルを構成し、npx wrangler pages devを実行します。
  • 引数をwrangler pages devに直接渡します。

Wrangler CLIに引数を渡してローカルでKV名前空間バインディングと対話するには、wrangler pages devコマンドに-k <BINDING_NAME>または--kv=<BINDING_NAME>を追加します。たとえば、あなたのKV名前空間がTODO_LISTバインディングを介して関数にバインドされている場合、次のようにローカル開発でKV名前空間にアクセスします：

Terminal window
npx wrangler pages dev <OUTPUT_DIR> --kv=TODO_LIST

Durable Objects

Durable Objects (DO)は、WebSocketの接続や状態の処理などの機能を支えるCloudflareの強い一貫性を持つデータストアです。

You must create a Durable Object Worker and bind it to your Pages project using the Cloudflare dashboard or your Pages project’s wrangler.toml. You cannot create and deploy a Durable Object within a Pages project.

あなたのDurable Objectをページ関数にバインドするには、wrangler.tomlまたはCloudflareダッシュボードでDurable Objectバインディングを構成できます。

Cloudflareダッシュボードを介してDurable Objectバインディングを構成するには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pagesを選択します。
  3. あなたのページプロジェクトを選択 > 設定 > 関数 > Durable Objectバインディング > バインディングを追加を選択します。
  4. プロダクションまたはプレビュー環境のいずれかでバインディングを設定するかを選択します。
  5. 変数名の下にバインディングに名前を付けます。
  6. Durable Object名前空間の下で、希望する名前空間を選択します。プロダクションとプレビュー環境の両方について、ステップ5と6を繰り返す必要があります。
  7. バインディングを有効にするためにプロジェクトを再デプロイします。

以下は、あなたの関数でDurable Objectsを使用する方法の例です。次の例では、あなたのDOバインディングはDURABLE_OBJECTと呼ばれ、関数コード内のcontext.envでバインディングにアクセスできます：

export async function onRequestGet(context) {
  const id = context.env.DURABLE_OBJECT.newUniqueId();
  const stub = context.env.DURABLE_OBJECT.get(id);


  // リクエストをDurable Objectに渡す
  return stub.fetch(context.request);
}

ローカルでDurable Object名前空間と対話する

あなたは、次の2つの方法のいずれかでローカルでDurable Objectバインディングと対話できます：

  • あなたのページプロジェクトのwrangler.tomlファイルを構成し、npx wrangler pages devを実行します。
  • 引数をwrangler pages devに直接渡します。

ローカルでDurable Object名前空間と対話するには、Durable ObjectをエクスポートしているWorkerのディレクトリでwrangler devを実行します。別のターミナルで、あなたのページプロジェクトのディレクトリでwrangler pages devを実行します。

Wrangler CLIを介してローカルでDurable Object名前空間と対話するには、wrangler pages devに--do <BINDING_NAME>=<CLASS_NAME>@<SCRIPT_NAME>を追加します。CLASS_NAMEはDurable Objectクラス名を示し、SCRIPT_NAMEはあなたのWorkerの名前を示します。

たとえば、あなたのWorkerがdo-workerと呼ばれ、DurableObjectExampleというDurable Objectクラスを宣言している場合、do-workerディレクトリでnpx wrangler devを実行してこのDurable Objectにアクセスします。同時に、あなたのページプロジェクトディレクトリでnpx wrangler pages dev <OUTPUT_DIR> --do MY_DO=DurableObjectExample@do-workerを実行します。関数コード内でMY_DOバインディングと対話するには、context.envを使用します（たとえば、context.env.MY_DO）。

R2バケット

R2は、開発者が大量の非構造化データをエグレス料金なしで保存できるCloudflareのBlobストレージソリューションです。

あなたのR2バケットをページ関数にバインドするには、wrangler.tomlまたはCloudflareダッシュボードでR2バケットバインディングを構成できます。

Cloudflareダッシュボードを介してR2バケットバインディングを構成するには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pagesを選択します。
  3. あなたのページプロジェクトを選択 > 設定 > 関数 > R2バケットバインディング > バインディングを追加を選択します。
  4. プロダクションまたはプレビュー環境のいずれかでバインディングを設定するかを選択します。
  5. 変数名の下にバインディングに名前を付けます。
  6. R2バケットの下で、希望するR2バケットを選択します。プロダクションとプレビュー環境の両方について、ステップ5と6を繰り返す必要があります。
  7. バインディングを有効にするためにプロジェクトを再デプロイします。

以下は、あなたの関数でR2バケットを使用する方法の例です。次の例では、あなたのR2バケットバインディングはBUCKETと呼ばれ、関数コード内のcontext.envでバインディングにアクセスできます：

export async function onRequest(context) {
  const obj = await context.env.BUCKET.get("some-key");
  if (obj === null) {
    return new Response("見つかりません", { status: 404 });
  }
  return new Response(obj.body);
}

ローカルでR2バケットと対話する

あなたは、次の2つの方法のいずれかでローカルでR2バケットバインディングと対話できます：

  • あなたのページプロジェクトのwrangler.tomlファイルを構成し、npx wrangler pages devを実行します。
  • 引数をwrangler pages devに直接渡します。

Wrangler CLIを介してローカルでR2バケットと対話するには、wrangler pages devコマンドに--r2=<BINDING_NAME>を追加します。あなたのR2バケットがBUCKETバインディングを介して関数にバインドされている場合、次のようにローカル開発でこのR2バケットにアクセスします：

Terminal window
npx wrangler pages dev <OUTPUT_DIR> --r2=BUCKET

このバインディングと対話するには、context.envを使用します（たとえば、context.env.BUCKET）。

D1データベース

D1は、Cloudflareのネイティブサーバーレスデータベースです。

あなたのD1データベースをページ関数にバインドするには、wrangler.tomlまたはCloudflareダッシュボードでD1データベースバインディングを構成できます。

Cloudflareダッシュボードを介してD1データベースバインディングを構成するには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pagesを選択します。
  3. あなたのページプロジェクトを選択 > 設定 > 関数 > D1データベースバインディング > バインディングを追加を選択します。
  4. プロダクションまたはプレビュー環境のいずれかでバインディングを設定するかを選択します。
  5. 変数名の下にバインディングに名前を付けます。
  6. D1データベースの下で、希望するD1データベースを選択します。プロダクションとプレビュー環境の両方について、ステップ5と6を繰り返す必要があります。
  7. バインディングを有効にするためにプロジェクトを再デプロイします。

以下は、あなたの関数でD1を使用する方法の例です。次の例では、あなたのD1データベースバインディングはNORTHWIND_DBと呼ばれ、関数コード内のcontext.envでバインディングにアクセスできます：

export async function onRequest(context) {
  // クエリを持つ準備されたステートメントを作成
  const ps = context.env.NORTHWIND_DB.prepare("SELECT * from users");
  const data = await ps.first();


  return Response.json(data);
}

ローカルでD1データベースと対話する

あなたは、次の2つの方法のいずれかでローカルでD1データベースバインディングと対話できます：

  • あなたのページプロジェクトのwrangler.tomlファイルを構成し、npx wrangler pages devを実行します。
  • 引数をwrangler pages devに直接渡します。

ローカルでD1データベースと対話するには、Wrangler CLIを介してwrangler pages devコマンドに--d1 <BINDING_NAME>=<DATABASE_ID>を追加します。

あなたのD1データベースがNORTHWIND_DBバインディングを介してページ関数にバインドされており、wrangler.tomlファイルのdatabase_idがxxxx-xxxx-xxxx-xxxx-xxxxの場合、次のようにローカル開発でこのデータベースにアクセスします：

Terminal window
npx wrangler pages dev <OUTPUT_DIR> --d1 NORTHWIND_DB=xxxx-xxxx-xxxx-xxxx-xxxx

このバインディングと対話するには、context.envを使用します（たとえば、context.env.NORTHWIND_DB）。

D1クライアントAPIドキュメントを参照して、D1バインディングで利用可能なAPIメソッドを確認してください。

ベクトル化インデックス

Vectorizeは、Cloudflareのネイティブベクトルデータベースです。

あなたのVectorizeインデックスをページ関数にバインドするには、wrangler.tomlまたはCloudflareダッシュボードでVectorizeインデックスバインディングを構成できます。

Cloudflareダッシュボードを介してVectorizeインデックスバインディングを構成するには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pagesを選択します。
  3. プロダクションまたはプレビュー環境のいずれかでバインディングを設定するかを選択します。
  4. あなたのページプロジェクトを選択 > 設定 > 関数 > Vectorizeインデックスバインディング > バインディングを追加を選択します。
  5. 変数名の下にバインディングに名前を付けます。
  6. Vectorizeインデックスの下で、希望するVectorizeインデックスを選択します。プロダクションとプレビュー環境の両方について、ステップ5と6を繰り返す必要があります。
  7. バインディングを有効にするためにプロジェクトを再デプロイします。

Vectorizeインデックスバインディングを使用する

ページ関数でVectorizeインデックスを使用するには、ページ関数コード内でVectorizeインデックスバインディングにアクセスできます。次の例では、あなたのVectorizeインデックスバインディングはVECTORIZE_INDEXと呼ばれ、ページ関数コード内のcontext.envでバインディングにアクセスできます。

// サンプルベクトル: 3次元の幅を持つ.
//
// 機械学習モデルからのベクトルは通常、約100から1536次元の幅を持ちます
// （またはそれ以上）。
const sampleVectors = [
  {
    id: "1",
    values: [32.4, 74.1, 3.2],
    metadata: { url: "/products/sku/13913913" },
  },
  {
    id: "2",
    values: [15.1, 19.2, 15.8],
    metadata: { url: "/products/sku/10148191" },
  },
  {
    id: "3",
    values: [0.16, 1.2, 3.8],
    metadata: { url: "/products/sku/97913813" },
  },
  {
    id: "4",
    values: [75.1, 67.1, 29.9],
    metadata: { url: "/products/sku/418313" },
  },
  {
    id: "5",
    values: [58.8, 6.7, 3.4],
    metadata: { url: "/products/sku/55519183" },
  },
];


export async function onRequest(context) {
  let path = new URL(context.request.url).pathname;
  if (path.startsWith("/favicon")) {
    return new Response("", { status: 404 });
  }


  // ベクトルをインデックスに挿入するのは一度だけで済みます
  if (path.startsWith("/insert")) {
    // サンプルベクトルをインデックスに挿入します
    // 実際のアプリケーションでは、これらのベクトルは機械学習（ML）モデルの出力であり、
    // Workers AI、OpenAI、またはCohereなどです。
    let inserted = await context.env.VECTORIZE_INDEX.insert(sampleVectors);


    // 成功裏に挿入したIDの数を返します
    return Response.json(inserted);
  }
}

Workers AI

Workers AIは、Cloudflareのグローバルネットワーク上でサーバーレスGPUによって駆動される機械学習モデルを実行することを可能にします。

Workers AIをPages Functionにバインドするには、wrangler.tomlまたはCloudflareダッシュボードでWorkers AIバインディングを設定できます。

Wranglerを使用してローカルで開発する際は、--aiフラグを使用してAIバインディングを定義できます。wrangler pages dev --ai AIを実行して、開発モードでWranglerを開始し、context.env.AIバインディングを公開します。

Cloudflareダッシュボードを介してWorkers AIバインディングを設定するには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pagesを選択します。
  3. Pagesプロジェクトを選択 > 設定 > 関数 > Workers AIバインディング > バインディングを追加を選択します。
  4. 本番またはプレビュー環境でバインディングを設定するかを選択します。
  5. 変数名の下にバインディングに名前を付けます。
  6. バインディングを有効にするためにプロジェクトを再デプロイします。

Workers AIバインディングの使用

Pages FunctionでWorkers AIを使用するには、Pages Functionコード内でWorkers AIバインディングにアクセスできます。以下の例では、Workers AIバインディングはAIと呼ばれ、Pages Functionコード内のcontext.envでアクセスできます。

export async function onRequest(context) {
  const input = { prompt: "Hello, Worldというフレーズの起源は何ですか" };


  const answer = await context.env.AI.run(
    "@cf/meta/llama-3.1-8b-instruct",
    input,
  );


  return Response.json(answer);
}

ローカルでWorkers AIバインディングと対話する

ローカルでWorkers AIバインディングと対話するには、次の2つの方法があります：

  • Pagesプロジェクトのwrangler.tomlファイルを設定し、npx wrangler pages devを実行します。
  • 引数を直接wrangler pages devに渡します。

ローカルで開発中にWrangler CLIを介してWorkers AIバインディングと対話するには、次のコマンドを実行します：

Terminal window
npx wrangler pages dev --ai=<BINDING_NAME>

サービスバインディング

サービスバインディングを使用すると、Pages Function内からWorkerを呼び出すことができます。

Pages FunctionをWorkerにバインドするには、wrangler.tomlまたはCloudflareダッシュボードを使用してサービスバインディングを設定します。

Cloudflareダッシュボードを介してサービスバインディングを設定するには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pagesを選択します。
  3. Pagesプロジェクトを選択 > 設定 > 関数 > サービスバインディング > バインディングを追加を選択します。
  4. 本番またはプレビュー環境でバインディングを設定するかを選択します。
  5. 変数名の下にバインディングに名前を付けます。
  6. サービスの下で、希望するWorkerを選択します。本番とプレビューの両方の環境でステップ5と6を繰り返す必要があります。
  7. バインディングを有効にするためにプロジェクトを再デプロイします。

以下は、Function内でサービスバインディングを使用する方法の例です。以下の例では、サービスバインディングはSERVICEと呼ばれ、Functionコード内のcontext.envでアクセスできます：

export async function onRequestGet(context) {
  return context.env.SERVICE.fetch(context.request);
}

ローカルでサービスバインディングと対話する

ローカルでサービスバインディングと対話するには、次の2つの方法があります：

  • Pagesプロジェクトのwrangler.tomlファイルを設定し、npx wrangler pages devを実行します。
  • 引数を直接wrangler pages devに渡します。

ローカルでサービスバインディングと対話するには、バインドしたいWorkerをwrangler devで実行し、並行して--service <BINDING_NAME>=<SCRIPT_NAME>を使用してwrangler pages devを実行します。ここで、SCRIPT_NAMEはWorkerの名前を示します。例えば、Workerの名前がmy-workerの場合、npx wrangler devを実行してWorkerを起動し、別のターミナルでnpx wrangler pages dev <OUTPUT_DIR> --service MY_SERVICE=my-workerを実行します。このバインディングと対話するには、context.envを使用します（例えば、context.env.MY_SERVICE）。

Cloudflareダッシュボードを介してサービスバインディングを設定した場合、--service <BINDING_NAME>=<SCRIPT_NAME>をwrangler pages devに追加する必要があります。ここで、BINDING_NAMEはサービスバインディングの名前で、SCRIPT_NAMEはWorkerの名前です。

例えば、ローカルで開発する場合、Workerの名前がmy-workerであれば、my-workerディレクトリでnpx wrangler devを実行します。別のターミナルで、Pagesプロジェクトディレクトリでnpx wrangler pages dev <OUTPUT_DIR> --service MY_SERVICE=my-workerを実行します。このサービスバインディングと対話するには、context.envを使用します（例えば、context.env.MY_SERVICE）。

キュー生産者

キュー生産者を使用すると、Pages Function内でキューにメッセージを送信できます。

Pages Functionにキューをバインドするには、wrangler.tomlまたはCloudflareダッシュボードを使用してキュー生産者バインディングを設定します：

Cloudflareダッシュボードを介してキュー生産者バインディングを設定するには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pagesを選択します。
  3. Pagesプロジェクトを選択 > 設定 > 関数 > キュー生産者バインディング > バインディングを追加を選択します。
  4. 本番またはプレビュー環境でバインディングを設定するかを選択します。
  5. 変数名の下にバインディングに名前を付けます。
  6. データセットの下に希望するデータセットを入力します。本番とプレビューの両方の環境でステップ5と6を繰り返す必要があります。
  7. バインディングを有効にするためにプロジェクトを再デプロイします。

以下は、Function内でキュー生産者バインディングを使用する方法の例です。この例では、バインディングはMY_QUEUEと呼ばれ、Functionコード内のcontext.envでアクセスできます：

export async function onRequest(context) {
  await context.env.MY_QUEUE.send({
    url: request.url,
    method: request.method,
    headers: Object.fromEntries(request.headers),
  });


  return new Response("送信しました！");
}

ローカルでキュー生産者バインディングと対話する

Pages Functionでキュー生産者バインディングを使用する場合、ローカルでキューにイベントを送信できます。ただし、Pages Functionでキューからイベントを消費することはできません。キューからイベントを消費するには、別の消費者Workerを作成し、キュー消費者ハンドラーを使用する必要があります。Wranglerは、同じキューにバインドされた別の生産者Functionと消費者Workerをローカルで実行することをサポートしていません。

アナリティクスエンジン

アナリティクスエンジンバインディングを使用すると、Pages Function内でアナリティクスを記述できます。

アナリティクスエンジンデータセットをPages Functionにバインドするには、wrangler.tomlまたはCloudflareダッシュボードを使用してアナリティクスエンジンバインディングを設定する必要があります：

Cloudflareダッシュボードを介してアナリティクスエンジンバインディングを設定するには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pagesを選択します。
  3. Pagesプロジェクトを選択 > 設定 > 関数 > アナリティクスエンジンバインディング > バインディングを追加を選択します。
  4. 本番またはプレビュー環境でバインディングを設定するかを選択します。
  5. 変数名の下にバインディングに名前を付けます。
  6. データセットの下に希望するデータセットを入力します。本番とプレビューの両方の環境でステップ5と6を繰り返す必要があります。
  7. バインディングを有効にするためにプロジェクトを再デプロイします。

以下は、Function内でアナリティクスエンジンバインディングを使用する方法の例です。以下の例では、バインディングはANALYTICS_ENGINEと呼ばれ、Functionコード内のcontext.envでアクセスできます：

export async function onRequest(context) {
  const url = new URL(context.request.url);


  context.env.ANALYTICS_ENGINE.writeDataPoint({
    indexes: [],
    blobs: [url.hostname, url.pathname],
    doubles: [],
  });


  return new Response("アナリティクスを記録しました");
}

ローカルでアナリティクスエンジンバインディングと対話する

ローカルでアナリティクスエンジンバインディングを使用することはできません。

環境変数

環境変数は、あなたのFunctionsによってアクセス可能な注入された値です。環境変数は、テキスト文字列やJSON値をあなたのPages Functionに添付することを可能にするバインディングの一種です。これはプレーンテキストとして保存されます。実行時およびビルド時に、Cloudflareダッシュボード内で本番環境とプレビュー環境の両方に直接環境変数を設定します。

Pagesプロジェクトに環境変数を追加するには、wrangler.tomlまたはCloudflareダッシュボードを使用できます。

Cloudflareダッシュボードを介して環境変数を構成するには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pagesを選択します。
  3. Pagesプロジェクトを選択 > 設定 > 環境変数を選択します。
  4. 本番および/またはプレビューの下で変数を追加を選択します。
  5. 変数名と値を設定した後、保存を選択します。

以下は、Function内で環境変数を使用する方法の例です。この例の環境変数はENVIRONMENTで、context.envで環境変数にアクセスできます：

export function onRequest(context) {
  if (context.env.ENVIRONMENT === "development") {
    return new Response("これはローカル環境です！");
  } else {
    return new Response("これはライブ環境です");
  }
}

環境変数をローカルで操作する

環境変数をローカルで操作する方法は2つあります：

  • Pagesプロジェクトのwrangler.tomlファイルを構成し、npx wrangler pages devを実行します。
  • wrangler pages devに直接引数を渡します。

Wrangler CLIを介してローカルで環境変数を操作するには、wrangler pages devコマンドに--binding=<ENVIRONMENT_VARIABLE_NAME>=<ENVIRONMENT_VARIABLE_VALUE>を追加します：

Terminal window
npx wrangler pages dev --binding=<ENVIRONMENT_VARIABLE_NAME>=<ENVIRONMENT_VARIABLE_VALUE>

シークレット

シークレットは、あなたのPages Functionに暗号化されたテキスト値を添付することを可能にするバインディングの一種です。シークレットを設定した後は見ることができず、context.envでプログラム的にのみアクセスできます。シークレットは、APIキーや認証トークンなどの機密情報を保存するために使用されます。

Pagesプロジェクトにシークレットを追加するには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pagesを選択します。
  3. Pagesプロジェクトを選択 > 設定を選択 > 環境変数を選択します。
  4. 本番および/またはプレビューの下で変数を追加を選択します。
  5. 暗号化を選択してシークレットを作成します。
  6. 保存を選択します。

シークレットは環境変数と同じ方法で使用します。WranglerまたはCloudflareダッシュボードでシークレットを設定する際は、それらのシークレットを使用するデプロイメントの前に行う必要があります。詳細については、環境変数を参照してください。

シークレットをローカルで操作する

ローカルで開発する際は、Pagesプロジェクトのルートディレクトリに.dev.varsファイルを作成してシークレットを追加します。その後、.dev.varsに以下のコードスニペットを追加します：

SECRET_NAME=<SECRET_VALUE>
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings