Workers とは？
Cloudflare Workers は、Cloudflare 社が提供しているサーバレスプラットフォームで、Web リクエストに応じたレスポンスを返すサービスを簡単に構築することができます。 Workers は世界中に配置されたエッジサーバーで実行されるため、クライアントからの要求に高速に応答することができます。 Azure Functions や AWS Lambda と同じようなサービスですが、それらに比べて Workers は、より高速かつ安価という特徴を持っています。 毎日 10 万リクエストまで無料 で使えるので、趣味用途であれば、無料枠だけでいろいろ試せます。
本記事の作業を進めるには、あらかじめ Cloudflare のアカウントを作成しておく必要があります。 下記から無料で作成できます。
Wrangler をインストールする
Worker の開発やデプロイには、wrangler という公式のコマンドラインツールを使用します。
Node.js の npm コマンドを使って、次のようにインストールできます。
$ npm install wrangler -g
Cloudflont へのアクセスを許可する (wrangler login)
wrangler コマンドを実行できるようになったら、wrangler login を実行して、Cloudflare のアカウントと関連づけます。
$ wrangler login
⛅️ wrangler 2.6.2
-------------------
Attempting to login via OAuth...
Web ブラウザーが自動的に開いて、Wrangler から Cloudflare のデータにアクセスしてよいか尋ねられるので Allow ボタンを押して許可します。
これで、wrangler の各種コマンドを実行できるようになります。
サインインした状態で wrangler whoami コマンドを実行すると、どの Cloudflare ユーザーでサインインしているかを確認できます。
$ wrangler whoami
⛅️ wrangler 2.6.2
-------------------
Getting User settings...
👋 You are logged in with an OAuth Token, associated with the email 'XXXX@gmail.com'!
┌──────────────────────────┬──────────────────────────────────┐
│ Account Name │ Account ID │
├──────────────────────────┼──────────────────────────────────┤
│ XXXX@gmail.com's Account │ a79fd54644844825ded71b264152dc7c │
└──────────────────────────┴──────────────────────────────────┘
🔓 Token Permissions: If scopes are missing, you may need to logout and re-login.
Scope (Access)
- account (read)
- user (read)
- workers (write)
- workers_kv (write)
- workers_routes (write)
- workers_scripts (write)
- workers_tail (read)
- d1 (write)
- pages (write)
- zone (read)
- offline_access
Worker プロジェクトを作成する (wrangler init)
wranger init <プロジェクト名> を実行すると、Worker プロジェクトのテンプレートコードを生成できます（いわゆる scaffold 処理です）。
$ wrangler init hello
⛅️ wrangler 2.6.2
-------------------
Using npm as package manager.
✨ Created hello/wrangler.toml
Would you like to use git to manage this Worker? (y/n)
✨ Initialized git repository at hello
No package.json found. Would you like to create one? (y/n)
✨ Created hello/package.json
Would you like to use TypeScript? (y/n)
✨ Created hello/tsconfig.json
Would you like to create a Worker at hello/src/index.ts?
None
❯ Fetch handler
Scheduled handler
次のような質問をされますが、基本はすべて Enter でデフォルトのまま進めていけば OK です。
- Git リポジトリとして初期化するか？（デフォルト: Yes）
- package.json ファイルを作成するか？（デフォルト: Yes）
- TypeScript を使用するか？（デフォルト: Yes）
- どのタイプのハンドラーコードを生成するか？（デフォルト: Fetch handler）
プロジェクトの初期化が終了すると次のようなファイルが配置されます。
hello/
+-- .git/
+-- .gitignore
+-- node_modules/
+-- package-lock.json
+-- package.json
+-- src/index.tsx
+-- tsconfig.json
+-- wrangler.toml
開発用のローカルサーバーを起動する (wrangler dev)
wrangler init によって生成される src/index.ts ファイルは次のような感じの実装になっています。
HTTP リクエストを受けて Hello World! というレスポンスを返すだけですね。
export default {
async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
return new Response("Hello World!")
}
}この Worker 実装をローカルサーバーでテストするには、wrangler dev コマンドを実行します。
package.json で NPM スクリプトが定義されているので npm start でも OK です（wrangler コマンドをローカルインストールした場合は npm start を使います）。
$ wrangler dev
⛅️ wrangler 2.6.2
-------------------
⬣ Listening at http://0.0.0.0:8787
- http://127.0.0.1:8787
- http://192.168.1.7:8787
Total Upload: 0.19 KiB / gzip: 0.16 KiB
╭────────────────────────────────────────────────────────────────────────────────────────────────╮
│ [b] open a browser, [d] open Devtools, [l] turn on local mode, [c] clear console, [x] to exit │
╰────────────────────────────────────────────────────────────────────────────────────────────────╯
デフォルトでは http://localhost:8787 でアクセス可能なローカルサーバーが起動します。
コンソール上で B キーを入力すると、Web ブラウザでページを開くことができます。
次のように表示されれば成功です。
Cloudflare Workers へのデプロイ (wrangler publish)
ローカルサーバーでの動作確認が済んだら、wrangler publish コマンドで Cloudflare Workers へデプロイできます。
$ wrangler publish
⛅️ wrangler 2.6.2
-------------------
Total Upload: 0.19 KiB / gzip: 0.16 KiB
Uploaded hello (0.61 sec)
Published hello (3.81 sec)
https://hello.<ユーザー名>.workers.dev
Current Deployment ID: b7e28af5-f244-422b-ae64-00bd796e536eデプロイは一瞬で完了して、自動的に https://<プロジェクト名>.<ユーザー名>.workers.dev という URL が割り当てられます。
デフォルトで公開状態になるので、Web ブラウザや curl コマンドでアクセスすれば、Hello World! というレスポンスが返ってきます。
$ curl https://hello.XXXX.workers.dev
Hello World!
デプロイまでとても簡単にできました！ ٩(๑❛ᴗ❛๑)۶ わーぃ
ちなみに、デプロイ先の Worker 名は --name オプションで変更できます。
$ wrangler publish --name hello-stg
あとかたづけ (wrangler delete)
Cloudflare Workers は呼び出しごとの従量課金なので、Worker をたくさん作って放置しておいても特にお金はかかりませんが、不要な Worker は削除しておいた方がよいでしょう。
Worker の削除には、wrangler delete コマンドを使用します。
$ wrangler delete
⛅️ wrangler 2.6.2
-------------------
Are you sure you want to delete hello? This action cannot be undone. (y/n)
Successfully deleted hello
スッキリスッキリ ( ⁎ᵕᴗᵕ⁎ )