Zenn
🦁

Cloudflare Workersとは何か中学生でもわかるように説明する

に公開
Cloudflare
Serverless
Edge
Cloudflare Workers
tech

Cloudflare Workers とは？

はじめに

Web アプリや API を作るとき、普通はサーバーを用意してコードを動かす。でも、そのために VPS（仮想サーバー）を契約したり、Docker を使って環境を構築するのは面倒。

Cloudflare Workers は、サーバーを管理しなくてもコードを実行できるプラットフォーム だ。サーバーレス（Serverless）っていう技術を使っていて、Cloudflare のグローバルなネットワーク上でコードを動かせる。

Cloudflare Workers の仕組み

Cloudflare Workers は、エッジコンピューティングを活用して、世界中の Cloudflare データセンターでコードを実行する。通常の Web サーバーとは違い、特定のサーバーにアクセスするのではなく、ユーザーに最も近い Cloudflare のエッジサーバーで処理が行われる。

これにより、

  • 低レイテンシ（遅延の少ない処理）
  • スケールが簡単（アクセスが増えても自動対応）
  • サーバー管理不要

といったメリットがある。

Workers の実行環境は V8（Chrome の JavaScript エンジン）をベースにしていて、JavaScript や TypeScript のコードを実行できる。

できること

1. HTTP リクエストの処理

Cloudflare Workers は、HTTP リクエストを受け取って処理できる。

addEventListener("fetch", event => {
  event.respondWith(new Response("Hello, World!", { status: 200 }));
});

このコードをデプロイすると、どこからアクセスしても "Hello, World!" というレスポンスを返すサーバーが作れる。

2. API の作成

Cloudflare Workers は、外部の API と連携したり、独自の API を作ったりできる。

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();
  return new Response(JSON.stringify(data), {
    headers: { "Content-Type": "application/json" }
  });
}

これは、外部の API からデータを取得して、そのままレスポンスとして返すシンプルな API の例。

3. HTML の書き換え

Cloudflare Workers は、Web ページの HTML を動的に変更することもできる。

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  let response = await fetch(request);
  let text = await response.text();
  text = text.replace(/Hello/g, "Hi");
  return new Response(text, {
    headers: response.headers
  });
}

このコードを使えば、Web サイトの内容を動的に書き換えたり、広告を削除したりもできる。

4. Cloudflare D1 や KV、R2 との連携

Cloudflare Workers は、Cloudflare の他のサービスと連携できる。

  • D1（サーバーレスデータベース）
  • KV（Key-Value ストレージ）
  • R2（オブジェクトストレージ）

例えば、D1 を使って簡単なデータベース操作をすることも可能。

import { DB } from "@cloudflare/d1";

export default {
  async fetch(request, env) {
    const db = new DB(env.DB);
    const { results } = await db.prepare("SELECT * FROM users").all();
    return new Response(JSON.stringify(results), {
      headers: { "Content-Type": "application/json" }
    });
  }
};

これは D1 からデータを取得するシンプルな例。

料金体系

Cloudflare Workers は、無料枠があるが、使用量に応じた課金モデルも用意されている。

無料プランと有料プラン

指標 Free プラン Paid プラン ($5/月)
リクエスト数 100,000 リクエスト/月 1,000,000 リクエスト/月
CPU 実行時間 10ms/リクエスト、合計30秒/日 50ms/リクエスト、合計2,000,000ms
ストレージ KV 1GB 無料 KV 10GB 無料
D1 との統合 利用可 利用可

無料プランでは 1 ヶ月に 100,000 リクエストまで処理可能。それ以上使いたい場合は有料プランに移行する。

サイトに書いてある例では1500万リクエストあったとしても、$8で運用できるとのことなのでとてもリーズナブルだと思う。

参考: https://developers.cloudflare.com/workers/platform/pricing/

まとめ

Cloudflare Workers は、

  • サーバーレスでコードを実行できる
  • エッジコンピューティングを活用し、高速・低レイテンシ
  • API 作成や HTML の書き換えが簡単
  • Cloudflare の他のサービスと統合可能
  • 無料プランもあり、コストを抑えつつ試せる

Discussion