Cloudflare Workers 入門【はじめからそうやって教えてくれればいいのに！】

はじめに

この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にも Web に関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！

https://www.youtube.com/watch?v=ijjNvTKl5eg

Cloudflare Workers とは？

Cloudflare Workers とは、一言で言うと、Cloudflare のエッジで動くサーバーレスの JavaScript 実行環境のことです。

...と言っても、これだけだとよくわからないですよね。だから、今回は初めて触る人でもわかるように、順序だててわかりやすく解説していきます。

Cloudflare Workers 理解するための道のり

Cloudflare Workers を理解するためには以下の3つのキーワードを理解することが重要です。

• CDN
• エッジコンピューティング
• JavaScript 実行環境

この記事ではこの3つのキーワードを1つ1つ解説した後、最後にデモという形で実際にコードを書いて Cloudflare Workers にデプロイする一連の流れを説明します。

CDN とは

まずは、1つ目のキーワード、「CDN」についてです。

CDNとは、Content Delivery Network の略で、インターネット上でコンテンツを効率よく配信するためのネットワークのことです。

例えば、日本からアメリカの Web サイトにアクセスすることを考えてみましょう。

日本からアメリカのサーバーにリクエストを送ると、距離が遠すぎてレスポンスが遅くなってしまいます。そうすると、Web サイトが表示されるまでに時間がかかり、とても不便です。

この問題を解決するために、CDN を使います。CDN を使うと、キャッシュしたコンテンツをユーザーに近いサーバーから配信することができます。

先ほどと同じ例で、具体的な流れを説明していきます。先ほど、ユーザーは、アメリカのサーバーに対して直接リクエストを送っていました。

ですが、CDN を使うことで、ユーザーのリクエストはアメリカのサーバーではなく、一番近い場所（例えば日本）のサーバーに届けられます。このサーバーはキャッシュと呼ばれる仕組みを使って、アメリカの Web サイトのコンテンツを素早く返すことができます。

このアメリカのサーバーのように、大元のデータを保存しているサーバーのことを「オリジンサーバー」と呼び、キャッシュしたコンテンツを配信しているサーバーを「エッジサーバー」もしくは「キャッシュサーバー」と呼びます。

このエッジサーバーは世界中にたくさん配置されていて、ユーザーはどの場所にいても一番近いエッジサーバーからコンテンツを取得できます。

有名な CDN サービスの例として、今回のテーマに関連する Cloudflare をはじめとした、以下のようなサービスがあります。

• Cloudflare
• Amazon CloudFront
• Fastly
• Akamai

エッジコンピューティングとは

エッジコンピューティングとは、ユーザーに近いエッジロケーションでデータ処理を行う技術のことです。

先ほどの CDN の説明で、「エッジサーバー」というものが登場しました。実はこのエッジサーバーは、データをキャッシュするだけではなく、アプリケーションのコードを実行することもできます。

具体的には、通常、データの配信元であるオリジンサーバーで実行される処理を、ユーザーに近いエッジサーバーで実行します。そうすることで、ユーザーとサーバーの間の通信距離が短くなり、パフォーマンスが向上します。

そのため、エッジコンピューティングは近年注目されていて、様々なサービスが提供されています。具体的には、今回のテーマである「Cloudflare Workers」をはじめとして、以下のようなサービスがあります。

• Cloudflare Workers
• CloudFront Functions
• Fastly Compute
• Deno Deploy

ただし、このようなサービスは制限が強く、重過ぎる処理を実行することができません。例えば Cloudflare Workers は以下のように、CPUの利用時間やメモリーなどに制限があります。

• Limits | Cloudflare Workers docs

つまり、エッジコンピューティングは、時間がかかる処理ではなく、JSONを返したり、リダイレクト、ヘッダの書き換え、Basic認証など、ちょっとしたことをするのに向いています。

JavaScript 実行環境とは

JavaScript 実行環境とは、JavaScriptを動かすために必要な環境のことです。

例えば、車を動かすためには、エンジンという部品が必要です。それと同じで、JavaScriptを動かすためにも、エンジンと呼ばれるソフトウェアが必要です。

このエンジンをはじめとする、様々な機能を詰め込んだ環境のことを「JavaScript実行環境」と呼びます。

以下のように、JavaScript 実行環境はいくつか種類があって、今回のテーマである「Cloudflare Workers」もこの内の1つです。

• ブラウザ
• Node.js
• Deno
• Cloudflare Workers

ちなみに、先ほど JavaScript 実行環境には「エンジン」があると説明しましたが、Cloudflare Workers では「V8」と呼ばれるエンジンが使われています。V8 は、ブラウザの Chrome や Node.js でも使われていて、高速で動作します。

また、V8 には「Isolate」と呼ばれる機能があり、Cloudflare Workers ではこの機能を使うことでコールドスタートの問題を解決しています。

Cloudflare Workers の使い方

準備

アカウントを作成する

使い始める前に、まずは Cloudflare のアカウントを作成しておいてください。以下のページから、プランを選択することでアカウントを作ることができます。

• アプリケーションサービスプラン | 料金設定 | Cloudflare

今回は無料の「Free」プランでOKです。

プロジェクトを作成する

アカウントを作成したら、プロジェクトを作成します。

npm create cloudflare@latest コマンドを実行します。いくつか質問が表示されるので、次のように答えます。

• アプリケーションをどのディレクトリに作成しますか？（In which directory do you want to create your application?）
  • ./my-first-worker
• 何から始めますか？（What would you like to start with?）
  • Hello World Example
• どのテンプレートを使用しますか?（Which template would you like to use?）
  • Hello World Worker
• どの言語を使用しますか？（Which language do you want to use?）
  • TypeScript
• バージョン管理に git を使いたいですか？（Do you want to use git for version control?）
  • Yes（どちらでも好きな方を選んでください）
• アプリケーションをデプロイしますか？（Do you want to deploy your application?）
  • No（後で自分でデプロイするので、ここでは No を選んでください）

プロジェクトが作成出来たら、起動してみましょう。

cd my-first-worker
npm start

ブラウザで、http://localhost:8787 にアクセスすると「Hello World!」と表示されるはずです。

これで準備は完了です。早速、プロジェクトの中身をみながら解説していきます。

コードを読んでみる

まずは、my-first-worker/src/index.ts の中身をみてみましょう。

src/index.ts

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

このファイルには、メインとなるロジックが書かれています。具体的には、クライアントからのHTTPリクエストを受けて、「Hello World!」と返す処理が書かれています。

試しに 'Hello World!' の部分を好きな文字列に変更してみましょう。

src/index.ts

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

再度ブラウザでレスポンスを確認してみると、レスポンス内容が変わっていることがわかります。

Wrangler

次は、package.json を開いてみましょう。

package.json

{
	"scripts": {
		"deploy": "wrangler deploy",
		"dev": "wrangler dev",
		"start": "wrangler dev",
		"test": "vitest",
		"cf-typegen": "wrangler types"
	}
}

npm scripts で wrangler というものが使われていることがわかります。この wrangler は Cloudflare が提供しているコマンドラインツールで、Cloudflare Workers をコマンドで操作することができます。

例えば npm start を実行すると wrangler dev というコマンドが実行されます。これは、ローカルサーバーを起動してくれるものです。

ほかにも Wrangler を使うと、デプロイやログイン、設定の管理などが簡単に行えます。

デプロイ

最後にデプロイを試してみましょう。

まずは、wrangler コマンドを使ってログインします。

npx wrangler login

ブラウザが起動して認可画面が表示されるので、「Allow」を押して許可します。

ログインが完了したら、npm run deploy を実行してデプロイします。完了すると、デプロイ先のURLが出力されるので、アクセスしてみましょう。

先ほど設定したレスポンスが表示されていることが確認できます。

ちなみに、デプロイしたアプリケーションは、Cloudflare のダッシュボード上で「Workers & Pages 」ページで確認できます。

おわりに

この記事の他にも、「100秒で理解する」というシリーズを書いています。よかったら見てください！

• 100秒で理解するHTTP Cookie
• 100秒で理解するCDN
• 100秒で理解する仮想DOM
• 100秒で理解するBun
• 100秒で理解するPromise
• 100秒で理解するESM（ESModules）