Table of contents
Intro
สวัสดีครับ บทความนี้จะพามารู้จักกับ Cloudflare Pages (https://pages.cloudflare.com) ที่จริงบริการนี้มีมานานแล้ว ส่วนตัวใช้งานแล้วมองว่าดีมากเลยอยากจะเขียนบทความการใช้งานไว้สักหน่อย โดย Blog ของผม https://blog.2my.xyz ตอนนี้ก็ใช้บริการของ Cloudflare Pages เหมือนกัน 😊
เกี่ยวกับ Cloudflare Pages
Cloudflare Pages คือ ตัวช่วย Deploy ของ Frontend ให้ง่ายขึ้นแล้วก็ได้ URL สำหรับ Production ทันที สำหรับสาย JAMstack platform เช่น HTML, React, Vue, Next.js, หรือ Gatsby 🚀
ข้อดี
ที่จริงผมใช้มาแล้วทั้ง https://vercel.com และ https://www.netlify.com ทั้งหมดก็เป็นบริการช่วย Deploy สำหรับ Frontend ทั้งหมดก็คล้าย ๆ กันไม่ได้แตกต่างกันมาก แต่มาชอบ Cloudflare Pages มากกว่าและย้ายมาใช้บริการนี้ถาวรแทน เพราะ
- Cloudflare’s edge network (ข้อนี้สำคัญมาก เพราะทำให้เว็บเข้าเร็วมาก ๆ ต่างกับของบริการค่ายอื่น)
- ฟรี Preview control
- ฟรี Web analytics
- ฟรี Unlimited requests
- ฟรี Unlimited bandwidth
- ถ้าชี้ DNS มาที่ Cloudflare อยู่แล้วยิ่งง่าย เพราะมีการตั้งค่า CNAME ให้อัตโนมัติ
ข้อเสีย
- ตอนนี้ Integrated ได้แค่กับ Github (อัปเดท ณ ตอนนี้ใช้กับ Gitlab ได้แล้ว)
- จะได้ URL: xxx.pages.dev (และไม่สามารถแก้ไขภายหลังได้) แต่ไม่ใช่ปัญหามากเพราะใช้ Custom Domain name อยู่แล้ว
การใช้งาน
1. Choose repository
1.1 เมื่อสมัครสมาชิกเรียบร้อยแล้ว ให ้กด Create a Project
1.2 เชื่อมต่อกับ Github Account
จากนั้นเลือก Repository
ที่ต้องการแล้วกดที่ปุ่ม Begin setup
2. Set up builds and deployments
2.1 กำหนดชื่อช่อง Project name (เมื่อ Deploy ระบบเสร็จจะได้ URL xxx.pages.dev)
2.2 จากนั้นเลือก Branch ของ Git สำหรับ Production
2.3 ในหัวข้อ Build settings เลือก Frontend Framework ที่เราใช้
2.4 กำหนดค่าอื่น ๆ ได้หากต้องการเช่น Environment variables
3. Deploy site
3.1 รอระบบกำลัง Building และ Deploy เมื่อเสร็จแล้วจะได้ URL และพร้อมใช้งานทันที 😊
คำอธิบายเพิ่มเติม (เมื่อ Deploy เสร็จ)
Automatic deployments enabled
คือ การ Deploy อัตโนมัติเมื่อการ Push หรือมี Code อัปเดตใหม่ที่ Branch ProductionDomains
คือ URL สำหรับ Production8a83521f.kongvut.pages.dev
คือ URL สำหรับ Previews ต้องใช้รหัสผ่านของ Admin ในการเข้าถึง (อย่าลืมไปเปิด Access policy ในหน้า Settings)