Cloud

Edge Functions Cloudflare Workers

📅 2026-02-09 | โดย อ.บอม กิตติทัศน์ เจริญพนาสิทธิ์ — SiamCafe.net Since 1997

Edge Functions Cloudflare Workers คืออะไร / ทำไมถึงสำคัญ

น้องๆ เคยเจอปัญหาเว็บโหลดช้าไหม? สมัยพี่ทำร้านเน็ตฯ นี่ตัวดีเลย! ลูกค้าบ่นกันระงม สมัยนั้นยังไม่มี Edge Functions แบบทุกวันนี้หรอกนะ ต้องแก้ปัญหาด้วยการ Optimize Server กันหัวแทบแตก

Edge Functions เนี่ยมันเหมือนมี Server ย่อยๆ กระจายอยู่ทั่วโลก (edge network) แทนที่จะต้องวิ่งไป Server หลักที่สิงคโปร์ หรือ อเมริกา ข้อมูลก็จะถูกประมวลผลใกล้ตัวผู้ใช้มากขึ้น โหลดเร็วกว่าเดิมเยอะ! Cloudflare Workers ก็คือ Platform ที่ให้เราเขียน Code ง่ายๆ (Javascript / Typescript) แล้วเอาไปรันบน Edge Network พวกนี้แหละ

ทำไมมันถึงสำคัญ? คิดง่ายๆ เว็บโหลดเร็วขึ้น User ก็ Happy, SEO ก็ดีขึ้น, แถมยังช่วยลด Load ของ Server หลักได้อีกด้วย Win-Win-Win! แถมยังเอาไปทำอะไรเจ๋งๆ ได้อีกเยอะ เช่น A/B Testing, Personalization, Security rules แบบ Custom

พื้นฐานที่ต้องรู้

Javascript / Typescript

อันนี้ขาดไม่ได้เลยน้อง! Cloudflare Workers เขียนด้วย Javascript หรือ Typescript ถ้าไม่เคยเขียนมาก่อน แนะนำให้ไปลองเล่นดูก่อนนะ มี Tutorial เพียบใน SiamCafe Blog ก็มีบทความ Javascript พื้นฐานอยู่ ลอง Search ดูได้

Fetch API

Fetch API เอาไว้เรียก API หรือดึงข้อมูลจากที่ต่างๆ ใน Javascript ถ้าเข้าใจ Fetch ก็จะเขียน Workers ได้คล่องขึ้นเยอะ เพราะ Workers ส่วนใหญ่ก็ต้องดึงข้อมูลจาก Backend มาแสดงผล

Promises

Promises คือ Concept ที่ช่วยให้เราจัดการกับ Asynchronous Operations ได้ง่ายขึ้น เช่น การเรียก API ที่อาจจะใช้เวลานาน Promises จะช่วยให้ Code เราไม่ Block และทำงานได้ลื่นไหล

วิธีใช้งาน / เริ่มต้นยังไง

เริ่มต้นใช้งาน Cloudflare Workers ไม่ยากอย่างที่คิด! แต่ก่อนอื่นต้องมี Account Cloudflare ก่อนนะ ถ้ายังไม่มีก็ไปสมัครซะ

ขั้นตอนปฏิบัติจริง

ติดตั้ง Cloudflare CLI (Wrangler)

Wrangler คือ Command-Line Interface (CLI) ที่เอาไว้จัดการ Workers ของเรา ติดตั้งได้ง่ายๆ ด้วย npm:

npm install -g @cloudflare/wrangler

ติดตั้งเสร็จแล้วก็ Login เข้า Cloudflare ด้วยคำสั่ง:

wrangler login

สร้าง Worker project

สร้าง Project ใหม่ด้วยคำสั่ง:

wrangler init my-worker

Wrangler จะสร้าง Folder ชื่อ `my-worker` ให้ ข้างในจะมีไฟล์ Javascript หลัก (index.js) และไฟล์ Config (wrangler.toml)

เขียน Code

เปิดไฟล์ `index.js` แล้วเขียน Code ของเราลงไป ตัวอย่างง่ายๆ คือการ Return ข้อความ "Hello World!":

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

async function handleRequest(request) {
  return new Response('Hello World!', {
    headers: { 'content-type': 'text/plain' },
  });
}

Deploy Worker

Deploy Worker ขึ้น Cloudflare ด้วยคำสั่ง:

wrangler publish

แค่นี้ Worker ของเราก็จะทำงานแล้ว! ลองเข้าไปที่ Domain ของเรา แล้วใส่ Route ที่เรากำหนดไว้ใน `wrangler.toml` ก็จะเห็นผลลัพธ์

เปรียบเทียบกับทางเลือกอื่น

Edge Functions ไม่ได้มีแค่ Cloudflare นะ ยังมีเจ้าอื่นๆ อีก เช่น Vercel Edge Functions, AWS Lambda@Edge แต่ละเจ้าก็มีข้อดีข้อเสียต่างกัน

Feature	Cloudflare Workers	Vercel Edge Functions	AWS Lambda@Edge
Pricing	เน้น Pay-as-you-go	รวมอยู่ใน Package	คิดตามการใช้งานจริง
Runtime	Javascript / Typescript	Javascript / Typescript	Node.js / Python
Complexity	ค่อนข้างง่าย	ง่ายมาก	ซับซ้อนกว่า
Integration	Cloudflare ecosystem	Vercel ecosystem	AWS ecosystem

เลือกใช้เจ้าไหนก็ขึ้นอยู่กับ Requirement และความถนัดของแต่ละคนนะ ถ้าเน้นความง่ายและ Integration กับ Vercel ก็ Vercel Edge Functions, ถ้าเน้นความยืดหยุ่นและ Integration กับ AWS ก็ AWS Lambda@Edge แต่ถ้าเน้นความคุ้มค่าและ Ecosystem ที่แข็งแกร่ง Cloudflare Workers ก็เป็นตัวเลือกที่ดี

สมัยพี่ทำร้านเน็ตฯ ต้อง Setup Server เองทั้งหมด เดี๋ยวนี้มี Cloudflare Workers ทำให้ชีวิตง่ายขึ้นเยอะ! ลองเอาไปประยุกต์ใช้ดูนะ น้องๆ จะได้เว็บที่แรง เร็ว เสถียรแน่นอน! อย่าลืมแวะไปดูบทความอื่นๆ ใน SiamCafe Blog ด้วยนะ มีอะไรใหม่ๆ อัพเดทตลอด

Best Practices / เคล็ดลับจากประสบการณ์

สมัยผมทำร้านเน็ต SiamCafe เนี่ย เรื่องความเร็วและความเสถียรนี่สำคัญสุดๆ ลูกค้าเล่นเกมอยู่แล้วหลุดนี่โดนด่าเละ Cloudflare Workers กับ Edge Functions ก็เหมือนกัน ต้อง optimize ให้ดี ไม่งั้นเจอปัญหา latency บานปลาย

3 เทคนิคที่ใช้ได้จริง

1. Caching ให้เป็นระบบ

Cache นี่แหละพระเอกตัวจริง สมัยร้านเน็ตผมก็ทำ Proxy Cache เองเลย (ใครทัน Squid บ้าง?)​ Edge Functions ก็เหมือนกัน ใช้ Cache API ของ Cloudflare ให้เต็มที่

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

async function handleRequest(request) {
  const cache = caches.default
  const cacheKey = request.url

  let response = await cache.match(cacheKey)

  if (response) {
    return response
  }

  response = await fetch(request)

  // Cache the response for 30 minutes
  response = new Response(response.body, response)
  response.headers.set('Cache-Control', 'max-age=1800')
  event.waitUntil(cache.put(cacheKey, response.clone()))

  return response
}

Code นี้คือตัวอย่างง่ายๆ ว่าเราจะ Cache response ยังไง อย่าลืมตั้ง Cache-Control ให้เหมาะสมด้วยนะ

2. Optimize Code ให้ไว

โค้ด Edge Functions ต้องเบาหวิว สมัยก่อนผม optimize เครื่องลูกข่ายในร้านเน็ตแทบตายกว่าจะเล่นเกมลื่น Cloudflare Workers ก็เหมือนกัน ยิ่งโค้ดซับซ้อนยิ่งช้า เลือกใช้ library ที่จำเป็นจริงๆ เท่านั้น

ถ้าต้อง process JSON เยอะๆ ลองใช้ JSON.parse() กับ JSON.stringify() ให้เป็นประโยชน์

3. Test อย่างละเอียด

อย่า deploy ขึ้น Production โดยไม่ Test! สมัยผมทำร้านเน็ตนี่ลองกับเครื่องตัวเองก่อนตลอด Cloudflare Workers ก็มี Environment ให้ Test ก่อน deploy จริง ลองใช้ให้เป็นประโยชน์ จะได้ไม่เจอปัญหาหน้างาน

ใช้ wrangler dev ในการ local development และ test ก่อน deploy ขึ้น Cloudflare

FAQ คำถามที่พบบ่อย

Edge Functions เหมาะกับงานแบบไหน?

เหมาะกับงานที่ต้องการความเร็วและอยู่ใกล้ผู้ใช้งาน เช่น A/B testing, personalization, redirect, authentication

Cloudflare Workers แพงไหม?

ขึ้นอยู่กับการใช้งาน ถ้าใช้เกิน Free Tier ก็ต้องจ่าย แต่ถ้า optimize ดีๆ ก็คุ้มค่า เพราะช่วยลด load ของ Server หลักได้เยอะ

Deploy Edge Functions ยากไหม?

ไม่ยากอย่างที่คิด ใช้ wrangler CLI ง่ายมาก แต่ต้องเข้าใจ concept ของ Cloudflare Workers ก่อน

Edge Functions ทำงานยังไง?

มันคือ JavaScript code ที่รันบน Cloudflare's edge network ทั่วโลก ทำให้ request ถูก process ใกล้ผู้ใช้งานมากขึ้น

สรุป

Cloudflare Workers กับ Edge Functions เป็นเครื่องมือที่ powerful มาก ถ้าใช้เป็นจะช่วยให้เว็บเราเร็วและเสถียรขึ้นเยอะ แต่ต้อง Optimize ให้ดี Test ให้ละเอียด แล้วจะคุ้มค่าแน่นอน

ลองเข้าไปดูข้อมูลเพิ่มเติมได้ที่ iCafeForex และ SiamCafe Blog นะครับ