コンテンツにスキップ

ローカル開発

本番環境にデプロイする前に、Dispatch Worker、user Worker、およびOutbound Workerをテストするために、開発とテストにはWranglerを使用できます。

ローカルモードでの wrangler dev によるプラットフォーム用ワーカーのサポートは実験的であり、将来的に変更される可能性があります。プラットフォーム用ワーカーをローカルで試すには、プレリリースブランチ wrangler@dispatch-namespaces-dev を使用してください。

1. ユーザーワーカーを作成する

Terminal window
npm create cloudflare@latest -- customer-worker-1

For setup, select the following options:

  • For What would you like to start with?, choose Hello Worldの例.
  • For Which template would you like to use?, choose Hello World Worker.
  • For Which language do you want to use?, choose JavaScript.
  • For Do you want to use git for version control?, choose Yes.
  • For Do you want to deploy your application?, choose No (we will be making some changes before deploying).

次に、新しく作成したディレクトリに移動します：

Terminal window
cd customer-worker-1

customer-worker-1の src/index.js ファイルを更新します：

export default {
  async fetch(request) {
    // インターネットへのサブリクエストを作成
    const response = await fetch("https://example.com");
    return new Response(
      `ユーザーワーカーがfetchから "${await response.text()}" を取得しました`,
    );
  },
};

customer-worker-1の wrangler.toml ファイルを更新し、dispatch namespaceを追加します：

# ... 上の他のコンテンツ ...


dispatch_namespace = "my-namespace"

2. Dispatch Workerを作成する

Terminal window
npm create cloudflare@latest -- dispatch-worker

For setup, select the following options:

  • For What would you like to start with?, choose Hello Worldの例.
  • For Which template would you like to use?, choose Hello World Worker.
  • For Which language do you want to use?, choose JavaScript.
  • For Do you want to use git for version control?, choose Yes.
  • For Do you want to deploy your application?, choose No (we will be making some changes before deploying).

次に、新しく作成したディレクトリに移動します：

Terminal window
cd dispatch-worker

dispatch-workerの src/index.js ファイルを更新します：

export default {
  async fetch(request, env) {
    // ユーザーワーカーを取得し、Outbound Workerがユーザーワーカーのサブリクエストをインターセプトする際に見るパラメータを指定
    const customerScript = env.DISPATCH_NAMESPACE.get(
      "customer-worker-1",
      {},
      {
        outbound: {
          paramCustomerName: "customer-1",
        },
      },
    );
    // ユーザーワーカーを呼び出す
    return await customerScript.fetch(request);
  },
};

dispatch-workerの wrangler.toml ファイルを更新し、dispatch namespaceバインディングを追加します：

# ... 上の他のコンテンツ ...


[[dispatch_namespaces]]
binding = "DISPATCH_NAMESPACE"
namespace = "my-namespace"
outbound = { service = "outbound-worker", parameters = ["paramCustomerName"] }

3. Outbound Workerを作成する

Terminal window
npm create cloudflare@latest -- outbound-worker

For setup, select the following options:

  • For What would you like to start with?, choose Hello Worldの例.
  • For Which template would you like to use?, choose Hello World Worker.
  • For Which language do you want to use?, choose JavaScript.
  • For Do you want to use git for version control?, choose Yes.
  • For Do you want to deploy your application?, choose No (we will be making some changes before deploying).

次に、新しく作成したディレクトリに移動します：

Terminal window
cd outbound-worker

outbound-workerの src/index.js ファイルを更新します：

export default {
  async fetch(request, env) {
    const { paramCustomerName } = env;
    // ディスパッチャーによって渡されたパラメータを使用して、このリクエストがどのユーザーのものであるかを知り
    // ユーザーワーカーにカスタムコンテンツを返す
    return new Response(
      `outboundによって ${paramCustomerName} のリクエストをインターセプトしました`,
    );
  },
};

4. ワーカーのローカル開発セッションを開始する

別々のターミナルで、各ワーカーのローカル開発セッションを開始します。

ディスパッチャーワーカーの場合：

Terminal window
cd dispatch-worker
npx wrangler@dispatch-namespaces-dev dev --port 8600

アウトバウンドワーカーの場合：

Terminal window
cd outbound-worker
npx wrangler@dispatch-namespaces-dev dev --port 8601

ユーザーワーカーの場合：

Terminal window
cd customer-worker-1
npx wrangler@dispatch-namespaces-dev dev --port 8602

5. リクエストをテストする

ディスパッチャーワーカーにリクエストを送信します：

Terminal window
curl http://localhost:8600
# -> ユーザーワーカーがfetchから "outboundによって customer-1 のリクエストをインターセプトしました" を取得しました
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings