Skip to content

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

CLI

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

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

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

前提条件

  1. Cloudflare アカウント ↗ に登録します。
  2. Node.js ↗ をインストールします。

Node.js のバージョンマネージャー

権限の問題を避け、Node.js のバージョンを切り替えられるよう、Volta ↗ や nvm ↗ などの Node バージョンマネージャーを使います。このガイドの後半で説明する Wrangler には、Node バージョン 16.17.0 以降が必要です。

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

ターミナルを開き、C3 を実行して Worker プロジェクトを作成します。C3（create-cloudflare-cli） ↗ は、Cloudflare 向けの新しいアプリケーションのセットアップとデプロイを支援するコマンドラインツールです。

npm create cloudflare@latest -- my-first-worker

セットアップでは、次のオプションを選びます。

  • What would you like to start with? では、Hello World example を選びます。
  • Which template would you like to use? では、Worker only を選びます。
  • Which language do you want to use? では、JavaScript を選びます。
  • Do you want to use git for version control? では、Yes を選びます。
  • Do you want to deploy your application? では、No を選びます（デプロイ前にいくつか変更します）。

これで新しいプロジェクトが用意できました。そのプロジェクトフォルダーに移動します。

cd my-first-worker

C3 が作成したファイル

プロジェクトディレクトリには、C3 が次のファイルを生成しています。

すでに Git リポジトリにプロジェクトがある場合

C3 はテンプレートから新しいプロジェクトを作るほか、既存の Git リポジトリから新しいプロジェクトを作ることもできます。既存の Git リポジトリから新しいプロジェクトを作るには、ターミナルを開いて次を実行します。

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

<SOURCE> には次のいずれかを指定できます。

  • user/repo（GitHub）
  • [email protected]: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）

既存のテンプレートフォルダーには、Cloudflare Workers の要件を満たすために、少なくとも次のファイルが必要です。

2. Wrangler CLI で開発する

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

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

npx wrangler dev

Wrangler を初めて使う場合は、Web ブラウザーが開き、Cloudflare アカウントにログインできます。

http://localhost:8787 ↗ を開いて Worker を確認します。

ブラウザーで問題が起きた場合

この手順で問題がある場合、またはブラウザー画面を使えない場合は、wrangler login のドキュメントを参照してください。

3. コードを書く

新しいプロジェクトが生成され、動作しているので、コードの記述と編集を始められます。

src/index.js ファイルを探します。index.js には次のコードが入っています。

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

コードの説明

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

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

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

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

この fetch() ハンドラー は、Worker が HTTP リクエストを受け取ったときに呼ばれます。エクスポートするオブジェクトに追加のイベントハンドラーを定義し、別の種類のイベントに応答できます。たとえば scheduled() ハンドラー を追加すると、Cron Trigger からの Worker 呼び出しに応答できます。

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

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

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

現在の index.js の内容を、出力テキストを変えた次の内容に置き換えます。

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

ファイルを保存し、ページを再読み込みします。Worker の出力が新しいテキストに変わります。

変更が表示されない場合

Worker の出力が変わらない場合は、次を確認してください。

  1. index.js への変更を保存したこと。
  2. wrangler dev が実行中であること。
  3. ブラウザーを再読み込みしたこと。

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

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

npx wrangler deploy

サブドメインやドメインを設定していない場合、Wrangler は公開時にセットアップを求めます。

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

523 エラーが表示される場合

*.workers.dev サブドメインを初めて公開したときに 523 エラー が出る場合は、1 分ほど待つと解消します。

次のステップ

さらに進めるには、次を試してください。

役に立ちましたか？