Cloudflare Workers: ขึ้นเว็บแรกฟรีบน Cloudflare ทีละคำสั่ง

อยากเอาโค้ดขึ้นอินเทอร์เน็ตให้เพื่อนเปิดดูได้ สมัยก่อนต้องเช่าเซิร์ฟเวอร์ ติดตั้งระบบ เปิดพอร์ต แล้วคอยดูแลไม่ให้มันล่ม แค่จะโชว์หน้า Hello World หน้าเดียวก็เป็นงานใหญ่แล้วครับ

Cloudflare Workers ให้เราส่งไปแค่โค้ด แล้ว Cloudflare เอาไปรันให้บนเครื่องของเขาที่กระจายอยู่ทั่วโลก เราไม่ต้องมีเซิร์ฟเวอร์ของตัวเองเลย และเริ่มใช้ได้ฟรี บทความนี้จะพาสร้าง Worker ตัวแรก ลองรันบนเครื่อง แก้ให้ตอบเป็น JSON แล้ว deploy ขึ้นเน็ตจริง ได้ลิงก์ไปส่งให้เพื่อนเปิดได้เลยครับ

จบบทความนี้คุณจะ:

• อธิบายได้ว่า Worker คืออะไร และคำว่า edge หมายถึงอะไร
• รู้ว่าแพ็กเกจฟรีของ Cloudflare ให้อะไรบ้าง
• สร้างโปรเจกต์ด้วย npm create cloudflare แล้วรันบนเครื่องด้วย npx wrangler dev
• เขียน Worker ที่อ่าน URL แล้วตอบกลับเป็น JSON
• deploy ขึ้น workers.dev และอัปเดตเวอร์ชันใหม่ได้เอง

ถ้าอยากเห็นภาพรวมก่อน ดูคลิปสั้นนี้ได้เลย ยาวแค่ 1 นาทีครับ

Worker คือร้านสาขาที่เปิดทุกเมือง

ลองนึกถึงร้านกาแฟที่มีสาขาเดียวอยู่กลางกรุงเทพฯ ลูกค้าจากเชียงใหม่หรือต่างประเทศอยากกินก็ต้องเดินทางไกล ร้านก็ต้องดูแลเองทุกอย่าง ตั้งแต่เครื่องชงไปจนถึงไฟดับ นี่คือภาพของ เซิร์ฟเวอร์ของเราเอง ที่ตั้งอยู่ที่เดียว

ทีนี้ลองนึกถึงแฟรนไชส์ที่มีซุ้มอยู่ทุกเมือง ใช้สูตรเดียวกันทุกสาขา ลูกค้าเดินไปซุ้มที่ใกล้บ้านที่สุดได้เลย ส่วนเจ้าของสูตรไม่ต้องไปเฝ้าซุ้มเอง Worker ก็คือสูตรนั้นครับ เราเขียนโค้ดครั้งเดียว Cloudflare ก๊อปไปไว้ที่ศูนย์ข้อมูลของเขาทั่วโลก ใครเปิดเว็บจากที่ไหน ก็ได้คำตอบจากจุดที่ใกล้คนนั้นที่สุด จุดที่อยู่ใกล้ผู้ใช้แบบนี้เรียกว่า edge (ขอบของเครือข่าย)

Worker เหมาะกับงานแบบไหน Worker ถนัดงานที่ตอบเร็วๆ ต่อคำขอหนึ่งครั้ง เช่น API เล็กๆ หน้าเว็บ หรือการแปลงข้อมูลก่อนส่งต่อ แต่ไม่เหมาะกับงานที่ต้องคำนวณหนักนานๆ เพราะแพ็กเกจฟรีจำกัดเวลาที่ CPU ทำงานต่อคำขอไว้ไม่มาก (ดูตัวเลขในหัวข้อถัดไป)

ของฟรีที่ Cloudflare ให้

ข่าวดีคือของพื้นฐานที่ต้องใช้ขึ้นเว็บ Cloudflare ให้ใช้ฟรีหลายอย่าง ตัวเลข ณ ตอนเขียน (ต.ค. 2026) เป็นแบบนี้

ตัวเลขพวกนี้อ่านยังไง

• 100,000 requests ต่อวัน คือมีคนเรียก Worker ได้หนึ่งแสนครั้งต่อวัน ตัวนับเริ่มใหม่ตอนเที่ยงคืนเวลา UTC ซึ่งตรงกับ 7 โมงเช้าเวลาไทย
• CPU 10 ms คือเวลาที่ CPU ลงมือคำนวณจริง ไม่นับเวลาที่นั่งรอข้อมูลจากที่อื่น งานอย่างตอบข้อความหรือ JSON ใช้น้อยกว่านี้มาก
• GB-month คือหน่วยของพื้นที่เก็บไฟล์ เก็บ 10 GB ไว้ตลอดเดือนก็ยังอยู่ในโควตาฟรี ส่วน egress คือค่าส่งข้อมูลออกไปหาคนดาวน์โหลด ซึ่ง R2 ไม่คิด

ถ้ายังไม่แน่ใจว่า DNS ทำหน้าที่อะไร อ่านพื้นฐานได้ที่ DNS คืออะไร ครับ

ศัพท์ที่ต้องรู้

เตรียมเครื่อง

ต้องมีสองอย่างครับ

1. บัญชี Cloudflare ฟรี สมัครได้ที่ dash.cloudflare.com/sign-up
2. Node.js รุ่น LTS โปรแกรมที่ทำให้รัน JavaScript นอกเบราว์เซอร์ได้ ทั้งตัวช่วยสร้างโปรเจกต์และ Wrangler ต้องใช้มัน

เปิด Terminal แล้วเช็กว่ามี Node.js แล้วหรือยัง

node -v

v22.22.0

เช็กว่าได้แล้ว: มีเลขรุ่นขึ้นมา (เลขของคุณอาจต่างไป) ถ้าขึ้นว่าไม่รู้จักคำสั่ง ให้ติดตั้งรุ่น LTS จาก nodejs.org แล้วปิด Terminal เปิดใหม่หนึ่งครั้ง

ผู้ใช้ Windows อ่านตรงนี้ก่อน ถ้า PowerShell ขึ้นว่า running scripts is disabled ตอนพิมพ์ npm หรือ npx ให้พิมพ์ npm.cmd และ npx.cmd แทน เช่น npx.cmd wrangler dev ผลเหมือนกันทุกอย่าง เพราะเป็นแค่อีกรูปแบบของคำสั่งเดียวกันที่ PowerShell ไม่บล็อก

สร้างโปรเจกต์ด้วย npm create cloudflare

ก่อนลงมือ ดูภาพรวมของเส้นทางทั้งหมดก่อนครับ ทุกครั้งที่ทำ Worker จะวนอยู่กับ 4 ขั้นนี้

ขั้นแรก Cloudflare มีตัวช่วยสร้างโปรเจกต์ชื่อ C3 (create-cloudflare) ที่จะถามเราทีละข้อแล้วเตรียมไฟล์ให้ครบ

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

my-first-worker คือชื่อโฟลเดอร์และชื่อ Worker ส่วน -- คือบอก npm ว่าคำที่ตามมาให้ส่งต่อให้ C3 ไม่ใช่ของ npm ตอบคำถามตามนี้

• What would you like to start with? เลือก Hello World example
• Which template would you like to use? เลือก Worker only
• Which language do you want to use? เลือก JavaScript
• Do you want to use git for version control? ตอบ Yes
• Do you want to add an AGENTS.md file...? ตอบ Yes เป็นไฟล์อธิบายโปรเจกต์ให้เครื่องมือ AI อ่าน ไม่มีผลกับการทำงานของโค้ด
• Do you want to deploy your application? ตอบ No เพราะเราจะลองบนเครื่องและแก้โค้ดก่อน

ถ้าเผลอเลือกผิดข้อ กด Ctrl+C ยกเลิก ลบโฟลเดอร์ my-first-worker ทิ้ง แล้วรันคำสั่งใหม่ได้เลย ไม่มีอะไรเสียหาย

ในโฟลเดอร์ที่ได้ ไฟล์ที่เราจะยุ่งด้วยมีแค่สองไฟล์

• src/index.js โค้ดของ Worker ทั้งหมดอยู่ที่นี่
• wrangler.jsonc ไฟล์ตั้งค่า มี name (ชื่อ Worker ซึ่งจะกลายเป็นส่วนหนึ่งของ URL) main (ไฟล์โค้ดที่จะรัน) และ compatibility_date (วันที่ที่บอกว่าให้รันด้วยพฤติกรรมของระบบ ณ วันไหน ระบบใส่ให้เองตอนสร้าง)

รันบนเครื่องด้วย wrangler dev

ก่อนเอาขึ้นเน็ตจริง เราลองรันในเครื่องตัวเองก่อนเสมอ เหมือนชิมสูตรในครัวที่บ้านก่อนส่งไปทุกสาขา

cd my-first-worker
npx wrangler dev

[wrangler:info] Ready on http://localhost:8787
[b] open a browser  [d] open devtools  [c] clear console  [x] to exit

เปิดเบราว์เซอร์ไปที่ http://localhost:8787 (หรือกด B ใน Terminal) ถ้าเป็นการใช้ Wrangler ครั้งแรก อาจมีหน้าต่างเบราว์เซอร์เด้งขึ้นมาให้ล็อกอินบัญชี Cloudflare ด้วย ล็อกอินให้เรียบร้อยแล้วกลับมาที่ Terminal

เช็กว่าได้แล้ว: หน้าเว็บขึ้นคำว่า Hello World!

โค้ดที่ทำให้เห็นคำนี้อยู่ใน src/index.js (ตัดคอมเมนต์ด้านบนออก)

export default {
  async fetch(request, env, ctx) {
    return new Response("Hello World!");
  },
};

โค้ดสั้นแต่มีครบทุกอย่างครับ

• export default { ... } ส่งของชิ้นนี้ให้ Cloudflare รู้ว่านี่คือ Worker ของเรา
• async fetch(request, env, ctx) ฟังก์ชันที่ถูกเรียก ทุกครั้งที่มีคำขอเข้ามา request คือใบสั่งของลูกค้า env คือของที่ผูกไว้กับ Worker เช่นฐานข้อมูล (ตอนนี้ยังไม่มี) ส่วน ctx ใช้กับงานเบื้องหลัง ซึ่งยังไม่ต้องสนใจ
• new Response("Hello World!") สร้างคำตอบเป็นข้อความธรรมดาส่งกลับไป

ลองเปลี่ยน "Hello World!" เป็นข้อความอื่น เซฟ แล้วรีเฟรชเบราว์เซอร์ จะเห็นข้อความใหม่ทันทีโดยไม่ต้องปิดเปิด wrangler dev ใหม่

แก้ให้อ่าน URL แล้วตอบเป็น JSON

Worker ที่ตอบคำเดิมทุกครั้งยังไม่ค่อยมีประโยชน์ ลองทำให้มันเป็น API เล็กๆ ที่ดูว่าผู้ใช้เปิด path ไหน แล้วตอบต่างกัน แทนที่โค้ดใน src/index.js ทั้งหมดด้วยโค้ดนี้

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
 
    if (url.pathname === "/") {
      return new Response("Hello from my first Worker!");
    }
 
    if (url.pathname === "/api/hello") {
      const name = url.searchParams.get("name") || "เพื่อน";
      return Response.json({
        message: `สวัสดี ${name}`,
        path: url.pathname,
        time: new Date().toISOString(),
      });
    }
 
    return Response.json(
      { error: "Not found", path: url.pathname },
      { status: 404 },
    );
  },
};

อ่านทีละส่วนครับ

• new URL(request.url) แยก URL ที่ผู้ใช้เปิดออกเป็นชิ้นๆ ให้หยิบใช้ง่าย
• url.pathname คือส่วนหลังชื่อโดเมน เช่น / หรือ /api/hello เราใช้มันตัดสินว่าจะตอบอะไร เหมือนพนักงานดูว่าลูกค้าสั่งเมนูไหน
• url.searchParams.get("name") อ่านค่าหลังเครื่องหมาย ? เช่น ?name=กุ้ง ถ้าไม่ได้ใส่มา จะใช้คำว่า เพื่อน แทน
• Response.json(...) แปลงออบเจกต์เป็น JSON และตั้งหัวข้อบอกเบราว์เซอร์ว่านี่คือ JSON ให้เอง เราไม่ต้องเรียก JSON.stringify เอง
• { status: 404 } path ที่เราไม่รู้จัก ตอบกลับพร้อมรหัส 404 ให้โปรแกรมที่เรียกรู้ว่าไม่มีของนี้ (อ่านเรื่องรหัสพวกนี้เพิ่มได้ที่ HTTP Status Code)

เซฟแล้วลองเปิด http://localhost:8787/api/hello?name=กุ้ง

{"message":"สวัสดี กุ้ง","path":"/api/hello","time":"2026-10-22T03:15:42.000Z"}

เช็กว่าได้แล้ว: เปิด / ได้ข้อความ เปิด /api/hello ได้ JSON และลองเปิด /abc ได้ JSON ที่มี "error":"Not found" ส่วนเวลาใน time จะเป็นเวลาที่คุณเปิดจริง ในรูปแบบเวลา UTC

ทำไมเวลาไม่ตรงกับนาฬิกาบ้านเรา toISOString() ให้เวลาแบบ UTC เสมอ ซึ่งช้ากว่าเวลาไทย 7 ชั่วโมง เป็นมาตรฐานที่ API ส่วนใหญ่ใช้ เพราะคนเรียกอยู่ได้ทุกประเทศ ฝั่งที่เอาไปแสดงผลค่อยแปลงเป็นเวลาท้องถิ่นเอง

Deploy ขึ้นเน็ตจริง

ชิมแล้วอร่อย ได้เวลาเปิดร้านจริงครับ กด Ctrl+C (หรือ X) เพื่อหยุด wrangler dev ก่อน แล้วรัน

npx wrangler deploy

ครั้งแรกจะมีสองเรื่องที่อาจเกิดขึ้น

1. ล็อกอิน ถ้ายังไม่เคยล็อกอิน Wrangler จะเปิดเบราว์เซอร์ให้ยืนยันว่าอนุญาตให้ Wrangler จัดการบัญชี Cloudflare ของเรา
2. ตั้งชื่อโดเมนย่อย workers.dev ถ้าบัญชียังไม่มี Wrangler จะถามให้ตั้งชื่อ ชื่อนี้ใช้กับทุก Worker ในบัญชี เลือกชื่อที่จำง่ายและไม่ซ้ำกับคนอื่น

Uploaded my-first-worker (1.20 sec)
Deployed my-first-worker triggers (0.80 sec)
  https://my-first-worker.ชื่อของคุณ.workers.dev

ลิงก์ที่ได้ประกอบจากสองส่วน คือชื่อ Worker (my-first-worker จาก wrangler.jsonc) กับชื่อโดเมนย่อยของบัญชีเรา

เช็กว่าได้แล้ว: เปิดลิงก์นั้นบนมือถือหรือส่งให้เพื่อนเปิด แล้วลองต่อท้ายด้วย /api/hello?name=เพื่อน จะได้ JSON แบบเดียวกับในเครื่อง

เปิดครั้งแรกเจอ Error 523 ถ้าเพิ่งตั้งโดเมนย่อย workers.dev เป็นครั้งแรก แล้วเปิดลิงก์ทันทีเจอหน้า Error 523 ไม่ต้องตกใจ ระบบกำลังตั้งค่าโดเมนย่อยให้อยู่ รอประมาณ 1 นาทีแล้วรีเฟรช จะหายไปเอง

อัปเดตเวอร์ชันใหม่

การอัปเดตง่ายมากครับ แก้โค้ดใน src/index.js ลองกับ npx wrangler dev ให้แน่ใจว่าใช้ได้ แล้ว npx wrangler deploy อีกครั้ง Worker ทุกสาขาจะเปลี่ยนเป็นเวอร์ชันใหม่ให้เอง เราไม่ต้องไล่อัปเดตเครื่องไหนเลย

จำง่ายๆ ว่า แก้ในเครื่องไม่มีผลกับเว็บจริงจนกว่าจะ deploy ถ้าแก้แล้วเว็บจริงยังเหมือนเดิม ให้เช็กก่อนว่า deploy หรือยัง ส่วนถ้า deploy ไปแล้วพัง ย้อนกลับไปเวอร์ชันก่อนหน้าได้ด้วย npx wrangler rollback

นอกจากนี้ ในแดชบอร์ดของ Cloudflare หัวข้อ Workers จะเห็น my-first-worker พร้อมจำนวนคำขอที่เข้ามา ไว้ดูว่ามีคนใช้เท่าไรและยังอยู่ในโควตาฟรีไหม

เจอปัญหา ลองเช็กตามนี้

ไปต่อ

• เก็บไฟล์ด้วย R2 เช่น รูปหรือไฟล์ให้ดาวน์โหลด อ่านที่ developers.cloudflare.com/r2
• เก็บข้อมูลเป็นตารางด้วย D1 ฐานข้อมูลที่ Worker เรียกใช้ได้ผ่าน env อ่านที่ developers.cloudflare.com/d1
• ใช้โดเมนของตัวเอง ย้าย DNS ของโดเมนมาไว้ที่ Cloudflare แล้วผูกโดเมนเข้ากับ Worker แทน workers.dev ถ้ายังไม่คุ้นกับ DNS เริ่มที่ DNS คืออะไร
• คู่มือทั้งหมดของ Workers อยู่ที่ developers.cloudflare.com/workers

สรุป

• Worker คือโค้ดที่ Cloudflare รันให้ที่ edge ใกล้ผู้ใช้ทั่วโลก ไม่ต้องมีเซิร์ฟเวอร์ของตัวเอง เหมือนสูตรที่ส่งไปทุกสาขา
• แพ็กเกจฟรี ณ ตอนเขียน ให้ Workers 100,000 requests ต่อวัน และ CPU 10 ms ต่อ request พร้อม DNS, R2 และ D1 แบบฟรี
• สร้างโปรเจกต์ด้วย npm create cloudflare@latest -- my-first-worker และลองในเครื่องด้วย npx wrangler dev ที่ localhost:8787
• ทุกคำขอวิ่งเข้าฟังก์ชัน fetch ใช้ new URL(request.url) ดู path แล้วตอบด้วย new Response() หรือ Response.json()
• npx wrangler deploy ส่งขึ้น workers.dev อัปเดตก็ deploy ซ้ำ ถ้าเจอ 523 ครั้งแรกให้รอสักนาที

พร้อมแล้วก็ไปทำ Quiz ท้ายบทด้านล่างเพื่อรับ XP ได้เลยครับ