Blockdit Logo
Blockdit Logo (Mobile)
สำรวจ
ลงทุน
คำถาม
เข้าสู่ระบบ
มีบัญชีอยู่แล้ว?
เข้าสู่ระบบ
หรือ
ลงทะเบียน
Shoper Gamer
•
ติดตาม
22 ส.ค. เวลา 16:45 • การศึกษา
Cloudflare Pages คืออะไร
โดย
ในยุคที่ทุกมิลลิวินาทีมีค่า การเลือกแพลตฟอร์มสำหรับโฮสต์เว็บไซต์หรือแอปพลิเคชันของคุณจึงเป็นเรื่องสำคัญไม่แพ้การพัฒนาโค้ดเอง หลายคนอาจเริ่มต้นจาก GitHub Pages ซึ่งเรียบง่าย แต่เมื่อโปรเจกต์ซับซ้อนขึ้น ต้องการฟีเจอร์เพิ่มเติม เช่น Serverless Functions หรือการรวมเข้ากับ CDN ระดับโลก ก็อาจต้องมองหาตัวเลือกที่ดีกว่า
นี่คือจุดที่ Cloudflare Pages เข้ามามีบทบาท ด้วยเครือข่าย CDN ที่ครอบคลุมกว่า 330 เมืองทั่วโลก และฟีเจอร์ระดับองค์กรที่พร้อมใช้งานได้ฟรี มันจึงกลายเป็นหนึ่งในแพลตฟอร์มที่นักพัฒนาให้ความสนใจเป็นอย่างมากในตอนนี้
- Cloudflare Pages Logo -
★
Cloudflare Pages คืออะไร?
Cloudflare Pages คือแพลตฟอร์มสำหรับ โฮสต์เว็บไซต์แบบ JAMstack ที่ออกแบบมาเพื่อให้นักพัฒนาสามารถ Deploy เว็บแอปพลิเคชันได้ทันทีบนเครือข่าย CDN ของ Cloudflare
ถ้าอธิบายง่ายๆ คือ พื้นที่สำหรับอัปโหลดเว็บไซต์ แต่มีความพิเศษคือมันเชื่อมต่อกับ GitHub หรือ GitLab ของคุณโดยตรง ทุกครั้งที่คุณ push โค้ดขึ้นไป Cloudflare Pages จะดึงโค้ดนั้นมาสร้าง (Build) และ Deploy ให้อัตโนมัติ โดยเว็บไซต์ของคุณจะพร้อมใช้งานผ่านโดเมนย่อย *.pages.dev ภายในไม่กี่วินาที
สิ่งที่ทำให้ Cloudflare Pages โดดเด่นคือการผสานรวมกับระบบนิเวศของ Cloudflare อย่างลงตัว นอกจากจะโฮสต์ไฟล์แบบ Static แล้ว คุณยังสามารถเพิ่มฟังก์ชัน Serverless (ที่เรียกว่า Pages Functions) เพื่อสร้างเว็บแอปพลิเคชันแบบ Full-Stack ได้อีกด้วย โดยไม่ต้องจัดการเซิร์ฟเวอร์เอง
💡 สรุปสั้นๆ: Cloudflare Pages คือแพลตฟอร์มโฮสต์เว็บไซต์ที่รวดเร็วและปลอดภัยสำหรับการ Deploy โปรเจกต์ JAMstack, Static Sites และแอป Full-Stack โดยเชื่อมต่อกับ Git และ Deploy อัตโนมัติบนเครือข่าย CDN ระดับโลก
★
Cloudflare Pages ทำงานอย่างไร?
การทำงานของ Cloudflare Pages มีจุดเด่นที่การทำงานร่วมกับ Git และประสิทธิภาพของเครือข่าย CDN
⚪ Deploy จาก Git: หัวใจหลักคือการเชื่อมต่อกับ Repository ของคุณ (GitHub, GitLab) เมื่อคุณ push การเปลี่ยนแปลงไปยัง Production Branch (เช่น main หรือ master) Cloudflare Pages จะเริ่มกระบวนการ Deploy โดยอัตโนมัติ
⚪ Build Pipeline: Cloudflare Pages จะดึงโค้ด ติดตั้ง dependencies และรัน Build Command ตามที่คุณกำหนด (เช่น npm run build) เพื่อสร้างไฟล์ Static ที่พร้อมใช้งาน สำหรับ Framework ยอดนิยม (React, Next.js, Docusaurus) มันยังมี Preset ที่ตั้งค่าไว้ให้แล้ว
⚪ Deploy และ Preview: หลังจาก Build สำเร็จ ไฟล์ทั้งหมดจะถูก Deploy ไปยังเครือข่าย CDN ของ Cloudflare ทุกครั้งที่มีการสร้าง Pull Request ใหม่ Pages จะสร้าง Preview Deployment ให้คุณอัตโนมัติ เป็น URL สำหรับทดสอบการเปลี่ยนแปลงก่อน Deploy จริง
⚪ Pages Functions: เป็นฟีเจอร์ที่ทรงพลังที่สุดที่ช่วยให้คุณเพิ่มโค้ดฝั่งเซิร์ฟเวอร์ (Serverless) ไปกับเว็บไซต์แบบ Static ได้ คุณสามารถเขียน API สร้างฟอร์มติดต่อ หรือทำงานที่ต้องเรียกใช้ฐานข้อมูล (เช่น D1, R2) โดยไม่ต้องรันเซิร์ฟเวอร์แยกต่างหาก
★
ประเภทของ Cloudflare Pages
แม้จะเป็นแพลตฟอร์มเดียว แต่เราสามารถแบ่งประเภทตามฟีเจอร์และราคา รวมถึงประเภทของโปรเจกต์ที่เหมาะสมได้ดังนี้ครับ
💰 จำแนกตามแผนราคา (Plans):
🧑🦱 แผนฟรี (Hobby/Free Plan): เหมาะสำหรับโปรเจกต์ส่วนตัว, บล็อก, หรือพอร์ตโฟลิโอ ให้สิทธิ์ในการ Deploy ไม่จำกัดจำนวนไซต์, ปริมาณแบนด์วิดท์ไม่จำกัด (Unlimited Bandwidth) ซึ่งเป็นจุดเด่นที่สุด, รองรับการ Build สูงสุด 500 ครั้งต่อเดือน และรองรับ Pages Functions 100,000 คำขอต่อวัน
💸 แผนโปร (Pro Plan): ราคา $5 ต่อเดือน (ถูกกว่า Vercel มาก) เพิ่มขีดจำกัดการ Build เป็นไม่จำกัด และ Pages Functions เป็น 10 ล้านคำขอต่อเดือน เหมาะสำหรับโปรเจกต์เชิงพาณิชย์หรือมีทราฟฟิกสูงขึ้น
🧑💻 จำแนกตามประเภทโปรเจกต์ที่รองรับ:
🧑🦱 Static Site: รองรับทุกอย่างตั้งแต่ HTML แบบธรรมดา ไปจนถึงเว็บไซต์ที่สร้างจาก Static Site Generator (SSG) และ Framework ต่างๆ เช่น React, Vue, Astro, SvelteKit
🛍️ Full-Stack App: ด้วย Pages Functions ทำให้คุณสามารถ Deploy แอปพลิเคชันที่มี Backend Logic ได้โดยตรงบน Edge Network
★
ประโยชน์ของ Cloudflare Pages
✅ ความเร็วสูง: ด้วยเครือข่าย CDN ที่มี Edge Location มากกว่า 330 เมืองทั่วโลก ทำให้หน้าเว็บโหลดเร็ว ไม่ว่าผู้ใช้จะอยู่ที่ไหน
✅ แบนด์วิดท์ไม่จำกัด (ฟรี!): นี่คือจุดขายที่สำคัญที่สุด Cloudflare Pages ให้ปริมาณแบนด์วิดท์ไม่จำกัดในทุกระดับแผน แม้แต่แผนฟรี ทำให้เหมาะกับเว็บไซต์ที่มีผู้เข้าชมสูง
✅ Deploy อัตโนมัติ: ทุกครั้งที่คุณ Push โค้ดระบบจะ Deploy ให้อัตโนมัติ ฟีเจอร์ Preview Deployment ช่วยให้ทำงานเป็นทีมได้อย่างปลอดภัย
✅ ปลอดภัยสูง: ได้รับการป้องกัน DDoS, WAF (Web Application Firewall) และ Bot Management ระดับเดียวกับที่ Cloudflare มีให้บริการเชิงพาณิชย์
✅ ผสานรวมกับระบบนิเวศ Cloudflare: เชื่อมต่อกับ D1 (ฐานข้อมูล Serverless), R2 (พื้นที่เก็บข้อมูล), Workers (คอมพิวติ้ง) เพื่อสร้างแอป Full-Stack ได้อย่างง่ายดาย
★
บัญชีฟรี (Hobby Plan) ทำอะไรได้บ้าง?
สำหรับนักพัฒนาที่ต้องการเริ่มต้นใช้งานฟรี แผนนี้ให้สิทธิประโยชน์ที่น่าสนใจมากครับ:
✅ ปริมาณแบนด์วิดท์: ไม่จำกัด
✅ จำนวนไซต์ที่ Deploy: ไม่จำกัด
✅ การ Build: 500 ครั้ง/เดือน
✅ Functions (Serverless): 100,000 คำขอ/วัน
✅ ขนาดไฟล์และแพ็คเกจ: รองรับการจัดเก็บไฟล์ขนาดใหญ่ระดับสเกลทั่วไปสำหรับการ Deploy Static Site ได้อย่างลงตัว
★
Cloudflare Pages VS Vercel
เมื่อเปรียบเทียบ Cloudflare Pages กับ Vercel (ผู้สร้าง Next.js) ในแต่ละประเด็น จะมีความแตกต่างสำคัญดังนี้ครับ
🫶 การสนับสนุน Next.js: Cloudflare Pages ทำได้ดีโดยต้องใช้ Adapter และอาจเจอ Edge Cases กับบางฟีเจอร์ใหม่ส่วน Vercel ทำได้ยอดเยี่ยมแบบ Zero Config รองรับ ISR และ Server Actions อย่างสมบูรณ์แบบ
💸 ราคาแผน Pro: Cloudflare Pages มีราคาเริ่มต้นเพียง $5 ต่อเดือนส่วน Vercel มีราคาอยู่ที่ $20 ต่อผู้ใช้ต่อเดือน
⚡ ปริมาณแบนด์วิดท์ในแผนฟรี: Cloudflare Pages ให้แบนด์วิดท์ไม่จำกัดส่วน Vercel จำกัดไว้ที่ 100 GB ต่อเดือน (หากเกินจะคิดเพิ่ม $40/TB)
🌏 เครือข่าย Edge Network: Cloudflare Pages ครอบคลุมมากกว่า 330 เมืองทั่วโลกส่วน Vercel มีเครือข่ายกระจายอยู่ประมาณ 100+ PoPs
💪 ฟีเจอร์เด่นและความเหมาะสม: Cloudflare Pages โดดเด่นเรื่องระบบความปลอดภัย (DDoS, WAF), ราคาประหยัด และการเชื่อมต่อกับระบบนิเวศ Cloudflare ส่วน Vercel โดดเด่นด้านประสบการณ์นักพัฒนา (DX), Developer Analytics และออกแบบมาตอบโจทย์ Next.js ดีที่สุด
★
ตัวอย่างการใช้งาน Cloudflare Pages
🧑💻 โปรเจกต์ Open Source: โฮสต์เอกสาร, Landing Page หรือเว็บไซต์โปรเจกต์ ด้วยแบนด์วิดท์ไม่จำกัด ไม่ต้องกังวลค่าใช้จ่ายเมื่อมีคนเข้าชมจำนวนมาก
🧑🎓 พอร์ตโฟลิโอและบล็อกส่วนตัว: Deploy ไซต์จาก Git ได้อัตโนมัติ มี Preview Deployment และโดเมนฟรี *.pages.dev
🛍️ แอป Full-Stack ขนาดเล็กถึงกลาง: ใช้ Pages Functions สร้าง API, จัดการ Authentication หรือเชื่อมต่อกับ D1/R2 โดยไม่ต้องเช่า VPS
★
ตัวอย่างการเริ่มต้นใช้งานง่ายๆ
# 1. สร้างโปรเจกต์ด้วย C3 (Create-Cloudflare CLI)
npm create cloudflare@latest my-app --framework=react --platform=pages
# 2. ตั้งค่า Git
git init
git add .
git commit -m "first commit"
# 3. เชื่อมต่อกับ GitHub
# 4. ไปที่ Cloudflare Dashboard -> Workers & Pages -> Create application
# 5. เลือก Pages -> Connect to Git และเลือก repository ของคุณ
# 6. ตั้งค่า Build command (ถ้ามี) แล้วกด Save and Deploy
แค่นี้เว็บของคุณก็จะถูก Deploy และใช้งานได้ทันทีที่โดเมนย่อย *.pages.dev ครับ
✏️ Shoper Gamer
>>
https://shopergamer.vercel.app
✓
[Shoper Gamer] Vercel คืออะไร 👇
>>
https://www.blockdit.com/posts/697b618ff5fddbe442e4e756
✓
[Shoper Gamer] Netlify คืออะไร 👇
>>
https://www.blockdit.com/posts/697b6b87a51fea21c9ebb806
✓
[Shoper Gamer] Leapcell คืออะไร 👇
>>
https://www.blockdit.com/posts/6a361e604bfea5150b57b7af
Credit :
👇
●
https://www.quora.com/What-is-Cloudflare-Pages
●
https://www.blockdit.com/posts/66f63a646b021e6933ca395a
●
https://community.cloudflare.com/t/vercel-vs-cloudflare-pages/320119
●
https://blog.vibecoder.me/vercel-vs-netlify-vs-cloudflare-pages
ข่าวรอบโลก
เทคโนโลยี
cloudflare
1 บันทึก
1
2
ดูเพิ่มเติมในซีรีส์
Website
1
1
2
โฆษณา
ดาวน์โหลดแอปพลิเคชัน
© 2026 Blockdit
เกี่ยวกับ
ช่วยเหลือ
คำถามที่พบบ่อย
นโยบายการโฆษณาและบูสต์โพสต์
นโยบายความเป็นส่วนตัว
แนวทางการใช้แบรนด์ Blockdit
Blockdit เพื่อธุรกิจ
ไทย