はじめに

CloudflareのCDNサービスについて調べたとき、CloudflareにWorkersというサービスがあることを知りました。
せっかくだったのでCloudflare Workersを少し触ってみました。

サインアップ

まず、Cloudflareにサインアップします。
無料のプランがあるので、気軽く試してみることができると思います。（クレジットカード登録も不要でした。）
Cloudflare Workersのサイトは以下のリンクを参照してください。

サインアップ後、ログインして、更新が必要なアカウントの設定（例えば、サブドメイン名など）は修正します。

ダッシュボードからプロジェクト作成

Workersのダッシュボード画面から「Workers & Pages」をクリックします。
「Workers & Pages」画面では、今まで作成したプロジェクトの一覧確認や新規プロジェクトの新規作成やデプロイなどの操作が可能です。
例えば、以下のような画面から新規プロジェクトの作成が可能です。

CLIツールを利用してプロジェクト作成

CLIツールを利用してプロジェクトを生成することもできます。
Cloudflareは、Wranglerというツールを使って、プロジェクト管理ができます。

0. 構築環境

試してみた環境は以下のようになります。

Ubuntu 22.04
Node.js 21.7.3
npm 10.5.0

1. プロジェクト作成

まずは、npm経由でプロジェクトを新規作成します。（yarnでも生成可能です。）
適切なパスで、以下のコマンドを実行します。

$ npm create cloudflare@latest

いくつか質問が出ますが、以下のように入力して、プロジェクトを作成しました。

╰ In which directory do you want to create your application? also used as application name
  ./first

コマンド実行時、パス入力を特にしなかった場合、プロジェクト名を聞きます。
プロジェクト名はfirstにしました。

╰ What type of application do you want to create?
  ● "Hello World" Worker
  ○ "Hello World" Worker (Python)
  ○ Website or web app
  ○ Example router & proxy Worker
  ○ Scheduled Worker (Cron Trigger)
  ○ Queue consumer & producer Worker
  ○ Co-ordination / multiplayer API (using Durable Objects)
  ○ API starter (OpenAPI compliant)
  ○ Worker built from a template hosted in a git repository

作成するアプリケーションの種類を選びます。
"Hello World" Workerを選択しました。

╰ Do you want to use TypeScript?
  Yes / No

TypeScriptの使用するか聞きます。
Yesを選択しました。

╰ Do you want to use git for version control?
  Yes / No

バージョン管理でGitを使うか聞きます。
Yesを選択しました。

╰ Do you want to deploy your application?
  Yes / No

今のアプリケーションをデプロイするか聞きます。
もし、Yesを選択したとき、Wranglerのログインをしていない場合、ログインを先に進みます。

2. ローカル環境で動作確認

以下のコマンドを実行することで、ローカル環境で動作確認することが可能です。

$ npx wrangler dev

コマンド実行すると、ローカル環境でアプリケーションが起動します。
アプリケーションが起動後、curlコマンドでアプリケーションにリクエストを投げると、レスポンスが返されます。

$ curl http://localhost:8787
Hello World!

3. コード修正

プロジェクトフォルダ内のsrc/index.tsにコードが書いているので、適切に修正します。
今回は、レスポンスメッセージHello World!をHello Worker!に修正してファイルを保存しました。

export default {
	async fetch(request, env, ctx): Promise<Response> {
		// Hello World! -> Hello Worker!
		return new Response('Hello Worker!');
	},
} satisfies ExportedHandler<Env>;

4. デプロイ

コードの作成を完了し、問題なければデプロイをします。

$ npx wrangler deploy

デプロイが完了後、またcurlコマンドでリクエストを投げると、レスポンスが返されます。

$ curl https://first.foo-bar.workers.dev
Hello Worker!

また、以下のようにCloudflareのダッシュボードで、デプロイしたアプリケーションが表示されます。

さいごに

Cloudflare Workersプロジェクトを新規作成して、コード修正し、デプロイまでやってみました。
今回はCloudflare Workersを初めて触ってみたので、まだわからないことが多いのですが、いろいろ学んでみたいと思います。

Cloudflare Workersを触ってみた