Cloudflare Workers を試す

Cloudflare Pagesではなく、Workersも検討してね、という注釈が出ていたので試す。

https://developers.cloudflare.com/workers/get-started/guide/

cloudflare Workerのプロジェクトを作成。

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

Need to install the following packages:
create-cloudflare@2.50.7
Ok to proceed? (y) y

> npx
> create-cloudflare my-first-worker

──────────────────────────────────────────────────────────────────────────────────────────────────────────
👋 Welcome to create-cloudflare v2.50.7!
🧡 Let's get started.
📊 Cloudflare collects telemetry about your usage of Create-Cloudflare.

Learn more at: https://github.com/cloudflare/workers-sdk/blob/main/packages/create-cloudflare/telemetry.md
──────────────────────────────────────────────────────────────────────────────────────────────────────────

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./my-first-worker
│
├ What would you like to start with?
│ category Hello World example
│
├ Which template would you like to use?
│ type Worker only
│
├ Which language do you want to use?
│ lang JavaScript
│
├ Copying template files
│ files copied to project directory
│
├ Updating name in `package.json`
│ updated `package.json`
│
├ Installing dependencies
│ installed via `npm install`
│
╰ Application created

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `npm install wrangler --save-dev`
│
├ Retrieving current workerd compatibility date
│ compatibility date 2025-08-03
│
├ Do you want to use git for version control?
│ yes git
│
├ Initializing git repo
│ initialized git
│
├ Committing new files
│ git commit
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run deploy`
│
╰ Done

────────────────────────────────────────────────────────────
🎉  SUCCESS  Application created successfully!

💻 Continue Developing
Change directories: cd my-first-worker
Start dev server: npm run start
Deploy: npm run deploy

📖 Explore Documentation
https://developers.cloudflare.com/workers

🐛 Report an Issue
https://github.com/cloudflare/workers-sdk/issues/new/choose

💬 Join our Community
https://discord.cloudflare.com
────────────────────────────────────────────────────────────

❯ pwd
/Users/zatsutaru/git_work/cloudflare-worker-test/my-first-worker
❯ ls
node_modules      package-lock.json package.json      src               test              vitest.config.js  wrangler.jsonc

以下が自動生成される

wrangler.jsonc：Wrangler の設定ファイル。
index.js（/src内）：「Hello World!」を表示する最小限の ESモジュール構文で書かれた Worker 。
package.json：最小限の Node.js 依存関係設定ファイル。
package-lock.json：npm のやつ。
node_modules：npm のやつ。

wrangler.jsonc の内容をみて見る。

/**
 * For more details on how to configure Wrangler, refer to:
 * https://developers.cloudflare.com/workers/wrangler/configuration/
 */
{
    "$schema": "node_modules/wrangler/config-schema.json",
    "name": "my-first-worker",
    "main": "src/index.js",
    "compatibility_date": "2025-08-03",
    "observability": {
        "enabled": true
    }
    /**
     * Smart Placement
     * Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
     */
    // "placement": { "mode": "smart" },

    /**
     * Bindings
     * Bindings allow your Worker to interact with resources on the Cloudflare Developer Platform, including
     * databases, object storage, AI inference, real-time communication and more.
     * https://developers.cloudflare.com/workers/runtime-apis/bindings/
     */

    /**
     * Environment Variables
     * https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
     */
    // "vars": { "MY_VARIABLE": "production_value" },
    /**
     * Note: Use secrets to store sensitive data.
     * https://developers.cloudflare.com/workers/configuration/secrets/
     */

    /**
     * Static Assets
     * https://developers.cloudflare.com/workers/static-assets/binding/
     */
    // "assets": { "directory": "./public/", "binding": "ASSETS" },

    /**
     * Service Bindings (communicate between multiple Workers)
     * https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings
     */
    // "services": [{ "binding": "MY_SERVICE", "service": "my-service" }]
}

Wranger コマンドを使うようなので、Wrangler を入れる

wrangler dev の実行

❯ npx wrangler dev

 ⛅️ wrangler 4.27.0
───────────────────
╭──────────────────────────────────────────────────────────────────────╮
│  [b] open a browser [d] open devtools [c] clear console [x] to exit  │
╰──────────────────────────────────────────────────────────────────────╯
⎔ Starting local server...
[wrangler:info] Ready on http://localhost:8787

ローカルでデプロイができたので、curl を実行して確認してみる。

❯ curl localhost:8787
Hello World!%

index.jsを編集したら反映されることを確認する。

Hello World!
Hello Worker!

index.js 編集後の確認

❯ curl localhost:8787
Hello Worker!%

いい感じ。

cloudflare にデプロイしてみる。

wrangler deploy の実行

❯ npx wrangler deploy

 ⛅️ wrangler 4.27.0
───────────────────
Attempting to login via OAuth...
Opening a link in your default browser: XXXXXX
Successfully logged in.
Total Upload: 0.19 KiB / gzip: 0.16 KiB
Uploaded my-first-worker (1.32 sec)
Deployed my-first-worker triggers (0.93 sec)
  https://my-first-worker.example-user.workers.dev
Current Version ID: b354278b-3ce2-4957-98ed-7422a25377b5

alt text

デプロイ後の動作確認

❯ curl https://my-first-worker.example-user.workers.dev
Hello Worker!%

デプロイが楽な上に高速です。 Jekyll + GitHub Pages だとどうしてもビルド/デプロイ周りで結構かかってしまうので記事が増えると辛いので、GitHub Pagesから切り替えることを検討してもよさそうです。

Cloudflare Pagesでデプロイする

小さなJSX要素のMDXデモ

画像・表・脚注の表示検証