第 1 週 · HTTP 基礎與第一個 Worker
Cloudflare Workers 入門
用 npm create cloudflare 做出 Hello World，並在本機打開它。
正在打開這一關…
學習目標
- 說得出 Worker 是一段「有請求就回答」的程式，不用自己顧一台伺服器
- 能建立專案、看懂 wrangler.jsonc 的名字與相容日期
- 在本機用 Wrangler 看到哈囉世界
昨天你在自己的電腦跑了 JavaScript。Worker 把這種程式放到 Cloudflare 的網路上：有人連過來，平台就呼叫你的 fetch，你回一個 Response。你不用先租一台一直開著的電腦。
用生活例子理解
傳統伺服器像自己開店、自己顧燈。Worker 比較像共享廚房的一個爐位：訂單來了你做菜，沒訂單就不用站在爐子前面。
開發時仍在你的電腦上模擬這個爐位，工具叫做 Wrangler。設定檔是 wrangler.jsonc（可以寫註解的 JSON）。
兩個欄位現在就要認得：
name：這個 Worker 的名字。compatibility_date：你要哪一天的平台行為。新專案設成你開始寫的那天。本課範例用2026-10-30，因為這是 Wrangler 4.156 目前接受的最新日期。若終端機說日期比它還新，就改成它印出來的那個最新日期，不要留空白。main：進入點，也就是含有export default的那個檔案。
生活比喻：相容日期像食譜封面的版本。平台會慢慢改規矩。寫上日期，是告訴平台「請用這一天的規矩跑我的食譜」，避免哪天悄悄換了做法。
官方建立專案的指令是：
npm create cloudflare@latest畫面會問專案名稱、要哪一種範本。選 Hello World 與 JavaScript。若問要不要立刻佈署，先選不要，我們先在本機看。文字可能隨版本略有不同，抓住這三個選擇就好：Hello World、JavaScript、先在本機跑。
動手做
大約 30 分鐘。
- 找一個放練習的資料夾，執行
npm create cloudflare@latest。 - 專案名稱用
hello-worker。選 Hello World、JavaScript，先不要佈署。 cd hello-worker，打開package.json，確認有wrangler。- 打開
wrangler.jsonc，找到name、main、compatibility_date。 - 打開進入點（多半是
src/index.js或src/index.ts）。若範本是 TypeScript 也沒關係，你會看到同一個fetch。 - 執行
npm run dev或npx wrangler dev。終端機會印一個本機網址，通常是http://localhost:8787。 - 用瀏覽器打開它。再用 DevTools Network 看這一筆：方法、狀態碼、回應本文。
- 把回應文字改成「哈囉，我是你的名字」，存檔。Wrangler 會重新載入，重新整理瀏覽器確認。
先不要執行 wrangler deploy。佈署留到第 4 週，那時你知道自己在公開什麼。
案例
若你想自己對照，而不是只靠範本，最小可跑的一組長這樣。
{
"$schema": "./node_modules/wrangler/config-schema.json",
"name": "hello-worker",
"main": "src/index.js",
"compatibility_date": "2026-10-30"
}export default {
async fetch() {
// 任何路徑都先回同一句。明天再依路徑分流。
return new Response("哈囉，Worker\n", {
headers: { "content-type": "text/plain; charset=utf-8" },
});
},
};{
"name": "hello-worker",
"private": true,
"scripts": {
"dev": "wrangler dev"
},
"devDependencies": {
"wrangler": "^4.45.0"
}
}在這個資料夾執行 npm install，再 npm run dev。
常見錯誤
- 在沒有
package.json的資料夾執行npm run dev。先cd到專案裡。 - 手改舊教學裡的
addEventListener("fetch", ...)。那是已經不建議的 Service Worker 寫法。新程式用export default { fetch }。 - 相容日期空白或很舊，卻複製了新文件的語法。對不上時，先看你的
compatibility_date。 - 端口被占用。Wrangler 會改用別的埠，請看終端機印出的網址，不要死記 8787。
自我檢查
- Worker 的
fetch在什麼時候被呼叫？它要回傳什麼？ wrangler.jsonc裡的name與main各代表什麼？- 你本機打開的網址是什麼？Network 裡那一筆的狀態碼是多少？