เพิ่มความเร็วให้เว็บด้วย Edge Computing และ Cloudflare Workers สำหรับมือใหม่

9 นาที 14 views บันทึกเป็น PDF
เพิ่มความเร็วให้เว็บด้วย Edge Computing และ Cloudflare Workers สำหรับมือใหม่

อยากให้เว็บโหลดไวขึ้นไหม? มาเรียนรู้การใช้ Cloudflare Workers เพื่อประมวลผลข้อมูลใกล้ตัวผู้ใช้ (Edge Computing) พร้อมวิธีติดตั้งและเริ่มโปรเจกต์แรกแบบง่าย ๆ

ทำไมความเร็วถึงเป็นเรื่องคอขาดบาดตายในโลกโปรแกรมมิ่ง

ในยุคที่ทุกคนใจร้อน การรอโหลดหน้าเว็บเกิน 2 วินาทีอาจทำให้คนกดปิดหนีได้ทันที สำหรับคนหัดเขียนโค้ดอย่างเรา Edge Computing (การประมวลผลข้อมูลที่ขอบเครือข่ายใกล้ตัวผู้ใช้) จึงเป็นหัวใจสำคัญที่ทำให้แอปพลิเคชันตอบสนองได้ทันใจ ลองนึกภาพว่าคุณสั่งอาหารจากร้านหน้าปากซอย กับสั่งจากร้านที่อยู่อีกจังหวัดหนึ่ง แน่นอนว่าร้านใกล้บ้านย่อมส่งถึงมือคุณได้เร็วกว่า นี่คือหลักการทำงานของเทคโนโลยีนี้ครับ

ปกติเวลาเราเขียนเว็บ แอปจะไปวางอยู่ที่เซิร์ฟเวอร์หลักเพียงแห่งเดียว เช่น อยู่ที่อเมริกา ถ้าคนใช้ในไทยกดเข้ามา ข้อมูลต้องเดินทางข้ามโลกไปกลับหลายรอบ ทำให้เกิด Latency (ระยะเวลาที่ข้อมูลเดินทางไป-กลับจนกว่าจะได้รับคำตอบ) ที่สูงจนรู้สึกได้ ยิ่งถ้าแอปของคุณมีคนใช้งานพร้อมกันเยอะ ๆ เซิร์ฟเวอร์หลักก็อาจจะรับมือไม่ไหวและทำงานช้าลงไปอีก

การขยับเอาโค้ดไปรันที่ Cloudflare Workers ซึ่งกระจายอยู่ทั่วโลกกว่า 300 จุดช่วยแก้ปัญหานี้ได้ แทนที่ข้อมูลต้องวิ่งไปอเมริกา มันจะถูกประมวลผลที่จุดที่ใกล้กับผู้ใช้ที่สุดในประเทศไทยเลย ทำให้ความเร็วเพิ่มขึ้นอย่างมหาศาล นี่คือทักษะที่โปรแกรมเมอร์ยุคใหม่ควรรู้ เพื่อสร้างแอปที่ใช้งานได้ลื่นไหลไม่ว่าจะอยู่ที่ไหนบนโลกก็ตาม

รู้จักกับ Cloudflare Workers: เซิร์ฟเวอร์ที่ไร้ขอบเขต

Cloudflare Workers คือแพลตฟอร์มแบบ Serverless (รูปแบบการเขียนโปรแกรมที่ให้เราเขียนแค่โค้ด โดยไม่ต้องจัดการเครื่องเซิร์ฟเวอร์เอง) ที่ให้คุณส่งโค้ด JavaScript หรือ TypeScript ไปรันบนโครงข่ายของ Cloudflare ได้โดยตรง โค้ดของคุณจะพร้อมทำงานทันทีโดยไม่ต้องรอเปิดเครื่องหรือตั้งค่าระบบปฏิบัติการที่ยุ่งยากเหมือนการเช่าเซิร์ฟเวอร์ทั่วไป

ความเจ๋งของมันคือการรันด้วย V8 Isolates (เทคโนโลยีที่แยกหน่วยความจำของโค้ดแต่ละชุดออกจากกันอย่างปลอดภัย) ทำให้ใช้ทรัพยากรน้อยมากและเริ่มต้นทำงานได้เร็วสุด ๆ ในระดับหลักไม่กี่มิลลิวินาที ต่างจากระบบเดิมที่อาจต้องใช้เวลาหลักร้อยมิลลิวินาทีในการเตรียมตัว นี่คือเหตุผลที่มันเหมาะกับการทำแอปที่ต้องการความไวสูง เช่น ระบบจัดการเนื้อหา หรือการดึงข้อมูลจากฐานข้อมูลมาแสดงผล

สำหรับมือใหม่ การเริ่มใช้เครื่องมือนี้ถือเป็นการเปิดโลกสู่ระบบ Distributed Systems (ระบบที่กระจายการทำงานไปหลายที่) ซึ่งเป็นมาตรฐานของการทำซอฟต์แวร์ระดับโลก คุณไม่จำเป็นต้องเก่งเรื่องเครือข่ายมาก่อน แค่เริ่มจากการเขียนฟังก์ชันง่าย ๆ เพื่อรับและส่งข้อมูล คุณก็สามารถสร้างแอปที่รองรับผู้ใช้งานทั่วโลกได้แล้วครับ

เริ่มต้นติดตั้งเครื่องมือและสร้างโปรเจกต์แรก

ก่อนจะเริ่มเขียนโค้ด เราต้องเตรียม Wrangler (เครื่องมือจัดการโปรเจกต์ Cloudflare ผ่านบรรทัดคำสั่ง) ให้พร้อมก่อน นี่คือตัวช่วยที่จะทำให้เราอัปโหลดโค้ดขึ้นระบบได้ง่าย ๆ เพียงแค่พิมพ์คำสั่งใน Terminal (หน้าจอสำหรับพิมพ์คำสั่งคอมพิวเตอร์) ของคุณเอง

ขั้นตอนแรกให้เปิด Terminal แล้วพิมพ์คำสั่ง npm install -g wrangler เพื่อติดตั้งโปรแกรมลงในเครื่องของคุณ หลังจากนั้นให้ทำการล็อกอินด้วยคำสั่ง wrangler login ระบบจะเปิดเบราว์เซอร์ให้คุณยืนยันตัวตน เมื่อเสร็จแล้วคุณก็พร้อมที่จะสร้างโปรเจกต์แรกด้วยการพิมพ์คำสั่งด้านล่างนี้ครับ

การใช้เครื่องมือผ่าน Command Line อาจดูน่ากลัวในช่วงแรก แต่เชื่อเถอะว่ามันคือทางลัดที่เร็วที่สุดในการทำงานของโปรแกรมเมอร์มืออาชีพ หากเจอบั๊กหรือข้อความแจ้งเตือนสีแดงตอนติดตั้ง ลองเช็กว่าคุณติดตั้ง Node.js (ซอฟต์แวร์ที่ช่วยให้รัน JavaScript บนเครื่องคอมพิวเตอร์ได้) เวอร์ชันล่าสุดหรือยัง ถ้าผ่านจุดนี้ไปได้ คุณก็ผ่านด่านแรกของเส้นทางนี้แล้ว

# สร้างโปรเจกต์ใหม่จากเทมเพลตมาตรฐาน
wrangler generate my-edge-api-worker https://github.com/cloudflare/workers-sdk/templates/hello-world
cd my-edge-api-worker

คำสั่ง wrangler generate ทำหน้าที่ดึงโครงสร้างไฟล์พื้นฐานมาให้เราเริ่มเขียนโค้ดได้ทันที ส่วน cd คือการเปลี่ยนเข้าไปในโฟลเดอร์ของโปรเจกต์ ผลลัพธ์ที่ได้คือคุณจะมีโฟลเดอร์ชื่อ my-edge-api-worker ที่มีไฟล์โค้ดเริ่มต้นพร้อมให้เราแก้ไขได้ทันทีครับ

เขียนโค้ดจัดการคำขอเพื่อเพิ่มประสิทธิภาพ

เมื่อเข้ามาในโปรเจกต์แล้ว คุณจะเห็นไฟล์ชื่อ src/index.ts นี่คือที่ที่เราจะเขียนตรรกะการทำงานของแอป ตัวอย่างด้านล่างนี้คือการรับคำขอจากผู้ใช้และตอบกลับด้วยข้อความที่ระบุว่าผู้ใช้มาจากประเทศไหน โดยใช้ข้อมูลจากตัวแปร request.cf ที่ Cloudflare เตรียมไว้ให้

การเข้าใจเรื่อง Request (คำขอที่ส่งจากเบราว์เซอร์ผู้ใช้เข้ามาที่เซิร์ฟเวอร์) และ Response (คำตอบที่เซิร์ฟเวอร์ส่งกลับไปให้เบราว์เซอร์) คือหัวใจของการพัฒนาเว็บ หากคุณเข้าใจว่าข้อมูลวิ่งผ่านตัวแปรเหล่านี้อย่างไร คุณจะสามารถควบคุมการทำงานของแอปได้ดั่งใจ ไม่ว่าจะเปลี่ยนข้อความ หรือส่งข้อมูลที่ต่างกันไปตามตำแหน่งที่ตั้งของผู้ใช้

จุดที่มือใหม่มักพลาดคือการลืมจัดการเรื่อง Compatibility Date (วันที่กำหนดเวอร์ชันความสามารถของระบบ) ในไฟล์ wrangler.toml ซึ่งสำคัญมากเพื่อให้โค้ดของคุณรันได้บนสภาพแวดล้อมที่ถูกต้อง อย่าลืมตรวจสอบไฟล์นี้ทุกครั้งก่อน Deploy (เอาโค้ดขึ้นเซิร์ฟเวอร์จริง) เพื่อป้องกันบั๊กที่เกิดจากการใช้ฟีเจอร์ที่ไม่รองรับครับ

export default {
  async fetch(request): Promise<Response> {
    // ดึงข้อมูลตำแหน่งที่ตั้งจาก Cloudflare
    const country = request.cf?.country || "Unknown";
    
    // ส่งข้อความตอบกลับพร้อมระบุประเทศผู้ใช้
    return new Response(`สวัสดีจากที่ขอบเครือข่าย! คุณมาจากประเทศ: ${country}`);
  },
}

โค้ดนี้ใช้ export default เพื่อกำหนดจุดเริ่มทำงานของ Worker เมื่อมีคนเรียกใช้งาน ฟังก์ชัน fetch จะถูกเรียกขึ้นมาทำงานโดยอัตโนมัติ request.cf?.country คือการดึงรหัสประเทศของผู้ใช้ที่ระบบ Cloudflare ตรวจจับได้ ผลลัพธ์ที่คุณจะเห็นบนหน้าจอคือข้อความ "สวัสดีจากที่ขอบเครือข่าย! คุณมาจากประเทศ: TH" หากคุณรันในประเทศไทยครับ

เทคนิคการทำ Cache เพื่อลดภาระเซิร์ฟเวอร์

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

สำหรับการตั้งค่า คุณสามารถเข้าไปที่ไฟล์ wrangler.toml แล้วเพิ่มกฎการแคชเข้าไป วิธีนี้ช่วยลด Origin Fetch (การดึงข้อมูลจากแหล่งกำเนิดหลัก) ได้มหาศาล ทำให้เว็บไซต์ของคุณยังทำงานได้รวดเร็วแม้เซิร์ฟเวอร์หลักจะกำลังยุ่งหรือมีคนเข้าใช้งานพร้อมกันเป็นจำนวนมาก นี่คือวิธีที่นักพัฒนาใช้ในการประหยัดทรัพยากรและเงินค่าเซิร์ฟเวอร์ไปในตัว

ข้อควรระวังคืออย่าแคชข้อมูลที่เป็นความลับส่วนตัว เช่น ข้อมูลล็อกอินหรือประวัติการสั่งซื้อของผู้ใช้ เพราะอาจทำให้คนอื่นเห็นข้อมูลนั้นได้ถ้าแคชผิดจุด ให้เลือกแคชเฉพาะข้อมูลสาธารณะที่เหมือนกันสำหรับทุกคน เช่น รูปภาพสินค้า หรือบทความในบล็อก หากทำตามนี้ได้ แอปของคุณจะเป็นระบบที่ทั้งเร็วและปลอดภัยในคราวเดียวกัน

สรุป: ก้าวแรกสู่การเป็นนักพัฒนาสาย Edge

การเรียนรู้เรื่อง Edge Computing อาจดูเป็นเรื่องไกลตัวในตอนเริ่มต้น แต่เมื่อคุณเข้าใจแล้วว่ามันคือการเอาโค้ดไปวางไว้ใกล้คนใช้ที่สุด คุณจะเห็นโอกาสมากมายในการสร้างแอปที่เหนือกว่าคู่แข่ง นี่ไม่ใช่เรื่องของการทำแอปให้ซับซ้อน แต่คือการทำแอปให้ "ส่งถึงมือผู้ใช้" ได้เร็วที่สุดเท่าที่จะเป็นไปได้

สมมติว่าคุณกำลังทำแอปทำนายสภาพอากาศแทนที่จะให้คนรอโหลดข้อมูลจากเซิร์ฟเวอร์กลางที่อยู่ไกล การใช้ Worker ที่อยู่ใกล้ตัวผู้ใช้จะทำให้ข้อมูลแสดงผลทันทีที่เปิดแอป ความประทับใจนี้เองที่จะทำให้ผู้ใช้กลับมาใช้แอปของคุณซ้ำแล้วซ้ำอีก นี่คือความแตกต่างระหว่างแอปทั่วไปกับแอปที่พัฒนาโดยโปรแกรมเมอร์ที่เข้าใจเรื่องประสิทธิภาพ

จากนี้ไปเมื่อคุณเขียนโปรแกรม ให้ลองตั้งคำถามเสมอว่า "ถ้ามีคนใช้แอปเราจากอีกซีกโลกหนึ่ง เขาจะรู้สึกอย่างไร" การมองผ่านมุมนี้จะทำให้คุณค่อย ๆ พัฒนาทักษะการออกแบบระบบให้เก่งขึ้นเรื่อย ๆ จนกลายเป็นโปรแกรมเมอร์มืออาชีพที่ใคร ๆ ก็อยากร่วมงานด้วย ขอให้สนุกกับการเขียนโค้ดและทดลองสิ่งใหม่ ๆ ในทุก ๆ วันครับ


ที่มา: Edge Computing in Practice: Lowering Latency with Cloudflare Workers — DEV Community

แชร์บทความ

Facebook X LINE

บทความที่เกี่ยวข้อง

จัดการเซิร์ฟเวอร์ผ่าน VS Code ให้ง่ายขึ้นด้วย Easy SSH พร้อมฟีเจอร์โหลดไฟล์ผ่านคลิกเดียว

จัดการเซิร์ฟเวอร์ผ่าน VS Code ให้ง่ายขึ้นด้วย Easy SSH พร้อมฟีเจอร์โหลดไฟล์ผ่านคลิกเดียว

เบื่อไหมที่ต้องสลับหน้าจอไปมาเพื่อจัดการเซิร์ฟเวอร์? มาลองใช้ Easy SSH ปลั๊กอิน VS Code ที่ช่วยให้คุณรีโมทผ่าน Terminal ได้สะดวก แถมโหลดไฟล์ได้ง่ายแค่กด Ctrl+click

ที่มา: DEV Community

35 minutes ago 11 นาที
0 views
วิธีดึงข้อมูลราคาจาก Google Hotels ด้วย API สำหรับนักพัฒนา

วิธีดึงข้อมูลราคาจาก Google Hotels ด้วย API สำหรับนักพัฒนา

อยากทำแอปท่องเที่ยวแต่ดึงข้อมูลราคาจาก Google Hotels ไม่ได้? มาดูวิธีใช้ Apify Actor ช่วยดึงข้อมูลแบบอัตโนมัติด้วย Python ง่ายๆ ไม่ต้องกลัวเว็บพัง

ที่มา: DEV Community

4 hours ago 8 นาที
3 views
วิธีเช็กความพร้อมโปรเจกต์ก่อนปล่อยงานจริงด้วย ReleaseReady

วิธีเช็กความพร้อมโปรเจกต์ก่อนปล่อยงานจริงด้วย ReleaseReady

เคยไหม? โค้ดรันได้ในเครื่องแต่พอปล่อยจริงกลับพัง! มาดูวิธีตรวจสอบความพร้อมของโปรเจกต์ก่อนอัปขึ้น GitHub ด้วยเครื่องมือ ReleaseReady กัน

ที่มา: DEV Community

7 hours ago 9 นาที
4 views