Cloudflare Pages
มันคืออะไร
Cloudflare Pages คือแพลตฟอร์มโฮสติ้งสำหรับเว็บไซต์ — ตั้งแต่ไฟล์สแตติกธรรมดาไปจนถึงแอปแบบ full-stack คุณเชื่อมต่อ (โฟลเดอร์ออนไลน์ที่เก็บประวัติของโค้ดคุณ) จากนั้น Pages จะรันคำสั่งบิลด์ของคุณ แล้วให้บริการผลลัพธ์นั้นผ่าน CDN ของ Cloudflare (Content Delivery Network — เครือข่ายเซิร์ฟเวอร์ทั่วโลกที่เก็บสำเนาไฟล์ของคุณไว้ใกล้ผู้เข้าชมแต่ละคน) เส้นทางที่เป็นไดนามิกและ (Application Programming Interface — จุดเชื่อมต่อที่ซอฟต์แวร์อื่นเรียกใช้เพื่อคุยกับแอปของคุณ) จะรันเป็น Pages Functions ซึ่งเบื้องหลังก็คือ Workers นั่นเอง ดังนั้นโปรเจกต์เดียวสามารถเป็นได้ทั้งเว็บสแตติกและแบ็กเอนด์ในตัว
จุดแข็ง
- ขับเคลื่อนด้วย Git: ทุกครั้งที่ push จะบิลด์และดีพลอยให้อัตโนมัติ พร้อม preview แยกตามแต่ละ
- ไฟล์สแตติกถูกส่งได้เร็วและฟรีจาก CDN ทั่วโลก
- Pages Functions เพิ่มลอจิกฝั่งเซิร์ฟเวอร์ได้ โดยใช้ bindings (การเชื่อมต่อสำเร็จรูป) แบบเดียวกับ Workers — D1 (ฐานข้อมูล ), R2 (พื้นที่เก็บไฟล์), KV (คลังข้อมูลแบบ key-value เหมือนพจนานุกรมขนาดใหญ่ที่จับคู่ label กับ value)
- แผนฟรีให้มาแบบใจกว้าง และแบนด์วิดท์ไม่จำกัด
- Rollback ทำได้ในคลิกเดียว — ทุกการดีพลอยจะถูกเก็บไว้
ข้อแลกเปลี่ยน
- สภาพแวดล้อมสำหรับบิลด์มีข้อจำกัดด้านเวลาและทรัพยากร โปรเจกต์ที่บิลด์ใหญ่มากอาจช้า
- Functions สืบทอด runtime ของ Workers ดังนั้นข้อจำกัดแบบ non-Node เดียวกันก็ยังใช้ได้
- สำหรับแบ็กเอนด์ที่เป็นไดนามิกล้วนและทำงานตลอดเวลา Workers ธรรมดาอาจเหมาะสมกว่า
- การตั้งค่าบิลด์สำหรับเฟรมเวิร์กที่ไม่ค่อยพบเห็นบางครั้งต้องปรับแต่งด้วยมือ
ควรใช้เมื่อไหร่
ใช้ Pages สำหรับเว็บไซต์การตลาด, เอกสาร, บล็อก, SPA (single-page app — เว็บไซต์ที่โหลดครั้งเดียวแล้วอัปเดตในหน้าเดิมโดยไม่ต้องโหลดหน้าใหม่ทั้งหมด) และเฟรมเวิร์กแบบ full-stack (Next.js, Astro, SvelteKit) ในกรณีที่คุณต้องการดีพลอยแบบอิงกับ Git โฮสติ้งสแตติกฟรี และมี server function ให้เลือกใช้ได้ในที่เดียว
เข้ากับ vibe coding แค่ไหน
Pages เหมาะกับ vibe coding เพราะการดีพลอยทั้งหมดคือ "เชื่อมต่อ repo แล้ว push" เอเจนต์สามารถตั้งค่าคำสั่งบิลด์ ไดเรกทอรีผลลัพธ์ และตัวแปรสภาพแวดล้อม จากนั้นดีพลอยด้วย Wrangler หรือสั่งให้บิลด์ผ่าน Git ก็ได้ เคล็ดลับ: บอกเอเจนต์ว่าคุณใช้เฟรมเวิร์กอะไรและต้องการ Functions หรือไม่ เพื่อให้มันเลือก adapter และไดเรกทอรีผลลัพธ์ที่ถูกต้อง คุณยังสามารถดีพลอยไดเรกทอรีที่บิลด์ไว้แล้วได้โดยตรงด้วย
# wrangler.toml — Pages project config
name = "my-site"
pages_build_output_dir = "dist"
[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "your-d1-id"
# Deploy a prebuilt output directory
npx wrangler pages deploy dist --project-name my-site