Cloudflare Pages คือบริการ deploy เว็บจาก GitHub/GitLab ที่เหมาะกับ static site และ frontend framework เพราะทุกครั้งที่เรา push โค้ดขึ้น branch ที่ตั้งไว้ Cloudflare จะ build และ deploy ให้โดยอัตโนมัติ แถมยังมี preview URL สำหรับ branch หรือ pull request ก่อนปล่อยขึ้น production
โปรเจคนี้ใช้ Astro และมี Cloudflare adapter อยู่แล้ว ดังนั้น workflow ที่แนะนำคือให้ GitHub เป็นแหล่งโค้ดหลัก แล้วให้ Cloudflare Pages ดึง repo ไป build ด้วยคำสั่งของโปรเจคโดยตรง วิธีนี้เหมาะกับ portfolio, landing page, blog, dashboard frontend หรือเว็บที่มี API endpoint เล็ก ๆ ผ่าน Pages Functions
1. เตรียมโปรเจคก่อนขึ้น Cloudflare Pages
ก่อนกด deploy ให้เช็คบนเครื่องตัวเองก่อนว่าโปรเจค build ผ่านจริง เพราะ Cloudflare จะทำงานคล้ายเครื่อง build อีกเครื่องหนึ่ง ถ้าในเครื่องเรายัง build ไม่ผ่าน บน Cloudflare ก็มักจะ fail ด้วยเช่นกัน
npm install
npm run build
สำหรับ Astro ปกติผลลัพธ์หลัง build จะอยู่ในโฟลเดอร์ dist ส่วนโปรเจคนี้มี
@astrojs/cloudflare อยู่ใน dependencies แล้ว จึงพร้อมสำหรับ Pages/Workers runtime
ถ้าเป็นโปรเจค static ล้วนก็ยังใช้ output directory เป็น dist ได้เหมือนกัน
2. สร้าง Pages project และเชื่อม GitHub
เข้า Cloudflare Dashboard แล้วไปที่ Workers & Pages จากนั้นเลือก Create application แล้วเลือก Pages และ Connect to Git ถ้าเป็นครั้งแรก Cloudflare จะให้ติดตั้ง GitHub App เพื่อขอสิทธิ์เข้าถึง repository
- เลือก GitHub account หรือ organization ที่มี repo ของเรา
- เลือก repository ที่ต้องการ deploy เช่น
Project-For-Presentation - เลือก production branch เช่น
main - ตั้ง Framework preset เป็น
Astroหรือเลือก None แล้วกรอกเอง - ตั้ง Build command เป็น
npm run build - ตั้ง Build output directory เป็น
dist - กด Save and Deploy แล้วรอ build แรกจนเสร็จ
ให้ตั้ง Root directory ให้ตรงกับโฟลเดอร์ที่มี package.json ของเว็บ
เช่น apps/portfolio ไม่อย่างนั้น Cloudflare อาจหา script build ไม่เจอ
3. ตั้งค่า Environment Variables และ Secrets
ถ้าเว็บมีค่าที่ไม่ควรเขียนลงโค้ด เช่น webhook URL, token, API key หรือ Measurement ID ให้ตั้งใน Cloudflare Pages แทน โดยเข้า Pages project แล้วไปที่ Settings → Variables and Secrets จากนั้นเพิ่ม key/value ที่ต้องใช้
| ตัวแปร | ใช้ทำอะไร | แนะนำ |
|---|---|---|
PUBLIC_GA_ID | Google Analytics 4 | ใส่เป็น variable ธรรมดาได้ |
PUBLIC_GSC_VERIFICATION | Google Search Console verification | ใส่เป็น variable ธรรมดาได้ |
DISCORD_WEBHOOK_URL | ส่งแจ้งเตือนผู้เข้าชมผ่าน API | ควรตั้งเป็น secret |
หลังเพิ่มตัวแปรแล้วให้ redeploy หนึ่งครั้ง เพราะค่าที่ใช้ตอน build หรือ runtime จะถูกผูกกับ deployment ถ้าเปลี่ยนค่าแล้วหน้าเว็บยังเหมือนเดิม ให้ไปที่ Deployments แล้วกด Retry deployment
4. ใช้ Preview Deployments ให้เป็น
จุดที่ทำให้ Cloudflare Pages ใช้งานสนุกคือ preview deployment: เมื่อเปิด pull request หรือ push branch ที่เปิด preview ไว้ Cloudflare จะสร้าง URL แยกให้ทดสอบก่อน merge เข้า production branch ทำให้ลอง UI, modal, animation หรือบทความใหม่ได้โดยไม่กระทบเว็บจริง
สร้าง branch ใหม่ เช่น feature/blog-deploy-guide
push branch แล้วเปิด pull request บน GitHub
รอ Cloudflare Pages สร้าง preview URL และ status check
ตรวจหน้าเว็บจริงบน preview แล้วค่อย merge เข้า main
5. ปัญหาที่เจอบ่อยและวิธีแก้
Build failed เพราะหา command ไม่เจอ
เช็คว่า Cloudflare อยู่ถูก root directory และใน package.json มี script
"build": "astro build" หรือไม่ ถ้าใช้ npm ให้ build command เป็น npm run build
Deploy สำเร็จแต่หน้าเว็บ 404
เช็ค output directory ว่าเป็น dist และ build log มีการสร้างไฟล์ในโฟลเดอร์นั้นจริง
ถ้าใช้ Astro adapter แบบ server output ให้ตรวจว่า adapter/config ตรงกับ runtime ที่ deploy
Environment variables ไม่ทำงาน
ตรวจชื่อ key ให้ตรงทั้งตัวพิมพ์เล็ก/ใหญ่ และดูว่าใส่ไว้ใน production หรือ preview environment ถูกฝั่งหรือไม่
ถ้าเป็นค่าลับให้ใช้ Secret และอย่า commit ไฟล์ .env ขึ้น GitHub
อยากหยุด deploy ชั่วคราว
เข้า Pages project แล้วไปที่ Settings → Builds → Branch control เพื่อปิด automatic deployment ของ production หรือ preview branch ได้
แหล่งอ้างอิงหลัก
บทความนี้อิงจากเอกสารทางการของ Cloudflare Pages เรื่อง Git integration, GitHub integration, Astro framework guide และ Variables/Secrets เพื่อให้ขั้นตอนตรงกับ workflow ปัจจุบัน