コンテンツにスキップ

CLI

Wranglerを使用して、Cloudflare Developer Platform CLIで最初のWorkerをセットアップしてデプロイします。

このガイドでは、最初のWorkerのセットアップとデプロイの手順を説明します。

前提条件

  1. Sign up for a Cloudflare account ↗.
  2. Install npm ↗.
  3. Install Node.js ↗.

Node.js version manager

Use a Node version manager like Volta ↗ or nvm ↗ to avoid permission issues and change Node.js versions. Wrangler, discussed later in this guide, requires a Node version of 16.17.0 or later.

1. 新しいWorkerプロジェクトを作成する

C3 (create-cloudflare-cli) ↗は、Cloudflareに新しいアプリケーションをセットアップしてデプロイするためのコマンドラインツールです。

ターミナルウィンドウを開き、C3を実行してWorkerプロジェクトを作成します：

Terminal window
npm create cloudflare@latest -- my-first-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 my-first-worker

C3が作成したファイルは何ですか？

プロジェクトディレクトリ内に、C3が以下のファイルを生成します：

  1. wrangler.toml: あなたのWrangler設定ファイル。
  2. index.js（/src内）: ESモジュール構文で書かれた最小限の「‘Hello World!‘」Worker。
  3. package.json: 最小限のNode依存関係設定ファイル。
  4. package-lock.json: npmのpackage-lock.jsonに関するドキュメント ↗を参照してください。
  5. node_modules: npmのnode_modulesに関するドキュメント ↗を参照してください。

すでにgitリポジトリにプロジェクトがある場合はどうなりますか？

C3テンプレートから新しいプロジェクトを作成するだけでなく、C3はGitリポジトリから新しいプロジェクトを作成することもサポートしています。Gitリポジトリから新しいプロジェクトを作成するには、ターミナルを開いて次のコマンドを実行します：

Terminal window
npm create cloudflare@latest -- --template <SOURCE>

<SOURCE>は次のいずれかである必要があります：

  • user/repo（GitHub）
  • git@github.com:user/repo
  • https://github.com/user/repo
  • user/repo/some-template（サブディレクトリ）
  • user/repo#canary（ブランチ）
  • user/repo#1234abcd（コミットハッシュ）
  • bitbucket:user/repo（Bitbucket）
  • gitlab:user/repo（GitLab）

最低限、テンプレートフォルダーには以下が含まれている必要があります：

  • package.json
  • wrangler.toml
  • src/内にwrangler.tomlから参照されるWorkerスクリプト

2. Wrangler CLIで開発する

Workersコマンドラインインターフェース、Wranglerを使用すると、作成、テスト、およびデプロイができます。C3はデフォルトでプロジェクトにWranglerをインストールします。

最初のWorkerを作成したら、プロジェクトディレクトリでwrangler devコマンドを実行して、Workerの開発用ローカルサーバーを起動します。これにより、開発中にローカルでWorkerをプレビューできます。

Terminal window
npx wrangler dev

Wranglerを以前に使用したことがない場合、Cloudflareアカウントでログインするためにウェブブラウザを開こうとします。

http://localhost:8787 ↗にアクセスして、Workerを表示します。

ブラウザの問題？

このステップで問題が発生した場合やブラウザインターフェースにアクセスできない場合は、wrangler loginのドキュメントを参照してください。

3. コードを書く

新しいプロジェクトが生成され、実行中になったので、コードの記述と編集を開始できます。

src/index.jsファイルを見つけます。index.jsには以下のコードが記載されます：

元のindex.js
export default {
  async fetch(request, env, ctx) {
    return new Response("Hello World!");
  },
};

コードの説明

このコードブロックは、いくつかの異なる部分で構成されています。

更新されたindex.js
export default {
  async fetch(request, env, ctx) {
    return new Response("Hello World!");
  },
};

export defaultは、JavaScriptモジュール ↗を定義するために必要なJavaScript構文です。Workerは、Workerが処理すべきイベントに対応するプロパティを持つオブジェクトのデフォルトエクスポートを持つ必要があります。

index.js
export default {
  async fetch(request, env, ctx) {
    return new Response("Hello World!");
  },
};

このfetch()ハンドラーは、WorkerがHTTPリクエストを受信したときに呼び出されます。異なるタイプのイベントに応答するために、エクスポートされたオブジェクトに追加のイベントハンドラーを定義できます。たとえば、Cron Triggerを介してWorkerの呼び出しに応答するために、scheduled()ハンドラーを追加します。

さらに、fetchハンドラーには常に3つのパラメーターが渡されます：request、env、context。

index.js
export default {
  async fetch(request, env, ctx) {
    return new Response("Hello World!");
  },
};

Workersランタイムは、fetchハンドラーがResponseオブジェクトまたはResponseオブジェクトで解決されるPromiseを返すことを期待しています。この例では、文字列「“Hello World!“」を持つ新しいResponseを返します。

現在のindex.jsファイルの内容を以下の内容に置き換え、出力テキストを変更します。

index.js
export default {
  async fetch(request, env, ctx) {
    return new Response("Hello Worker!");
  },
};

その後、ファイルを保存してページをリロードします。Workerの出力が新しいテキストに変更されます。

変更が表示されない？

Workerの出力が変更されない場合は、次のことを確認してください：

  1. index.jsへの変更を保存しましたか。
  2. wrangler devが実行中ですか。
  3. ブラウザをリロードしましたか。

4. プロジェクトをデプロイする

Wranglerを使用して、*.workers.devサブドメインまたはカスタムドメインにWorkerをデプロイします。

Terminal window
npx wrangler deploy

サブドメインやドメインを設定していない場合、Wranglerは公開プロセス中に設定を促します。

Workerを<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.devでプレビューします。

エラーが発生していますか？

最初に*.workers.devサブドメインにプッシュするとき、DNSが伝播する間に523エラーが表示されることがあります。これらのエラーは、1分ほどで解決されるはずです。

次のステップ

さらに進むために：

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings