Cloudflare Pages คืออะไร สร้างและ Deploy Static Website บน Cloudflare ได้อย่างไร

Categories

สำหรับนักพัฒนาที่ต้องการ Deploy Static Website หรือ Fullstack Application อย่างรวดเร็ว Cloudflare Pages คือคำตอบที่เหมาะสม เชื่อมต่อกับ Git Repository, รองรับ Framework หลายตัว และให้บริการ CDN ระดับโลกผ่าน Cloudflare Network ทำให้เว็บไซต์ของคุณเร็วและมีความปลอดภัย เหมาะสำหรับเว็บไซต์ที่ใช้ร่วมกับ Cloud VPS ของ ผู้ให้บริการโฮสติ้ง สำหรับ Backend Processing

Cloudflare Pages คืออะไร?

Cloudflare Pages เป็น Platform สำหรับ Build และ Deploy Static Website และ JAMstack Application ที่เชื่อมต่อกับ GitHub หรือ GitLab โดยตรง เมื่อ Push Code, Cloudflare Pages จะ Build และ Deploy อัตโนมัติทันที

ความสามารถหลัก อย่างเช่น:

  • Unlimited Bandwidth — ไม่จำกัด Bandwidth ใน Free Plan
  • Unlimited Sites — สร้างได้หลายเว็บไม่จำกัด
  • Custom Domain — เชื่อมโดเมนของตัวเองปราศจาค่าใช้งาน
  • HTTPS Automatic — SSL Certificate อัตโนมัติ
  • Preview Deployments — แต่ละ Branch ได้ URL สำหรับ Preview
  • Workers Integration — ใช้ Cloudflare Workers ร่วมกันได้เลย

Framework ที่รองรับ

Cloudflare Pages รองรับ Framework สำหรับ Build หลายตัว:

Framework Build Command Output Directory
Next.js npm run build .next / out
Nuxt.js npm run generate dist
Gatsby gatsby build public
Hugo hugo public
Astro astro build dist
SvelteKit npm run build .svelte-kit/cloudflare
React (CRA) npm run build build
Vue CLI npm run build dist

วิธีตั้งค่า Cloudflare Pages

  1. Login เข้า Cloudflare Dashboard
  2. ไปที่ Workers & Pages → Pages
  3. คลิก Create a project
  4. เชื่อมต่อ GitHub หรือ GitLab
  5. เลือก Repository ที่ต้องการ Deploy
  6. ตั้งค่า Build Settings (เลือ Framework หรือตั้งเอง)
  7. คลิก Save and Deploy

การใช้ Environment Variables

สามารถตั้งค่า Environment Variables สำหรับแต่ละ Environment บน Pages Settings:

  • Production Variables — ใช้ใน Production Branch
  • Preview Variables — ใช้ใน Preview Branches อื่นๆ
  • Encrypted Variables — เก็บ Secret Key, Token อย่างปลอดภัย

Cloudflare Pages กับ Workers: Full-Stack Application

การรวม Cloudflare Pages + Workers ช่วยให้สร้าง Full-Stack Application บน Edge ได้:

  • Pages — ใหบริการ Static Frontend (HTML, CSS, JS)
  • Functions (Workers ใน Pages) — API Routes บน Edge ในไดเรคทอรี /functions
  • D1 Database — SQLite ที่ทำงานบน Edge
  • R2 Storage — เก็บไฟล์และ Assets

ตัวอย่าง Pages Function สำหรับ API Route:

// functions/api/hello.js
export async function onRequest(context) {
  return new Response(JSON.stringify({
    message: 'Hello from Cloudflare Pages Function!',
    timestamp: new Date().toISOString(),
    region: context.request.cf.country
  }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

การใช้ Custom Domain บน Pages

  1. ไปที่ Pages Project → Custom domains
  2. คลิก Set up a custom domain
  3. ใส่ชื่อ Domain เช่น app.example.com
  4. ตั้งค่า CNAME Record ตามที่ Cloudflare แนะนำ
  5. รอ SSL Certificate ออก (5-10 นาที)

Cloudflare Pages กับ ผู้ให้บริการโฮสติ้ง

สำหรับเว็บไซต์ที่ใช้ Cloud VPS หรือ Cloud Hosting ของ ผู้ให้บริการโฮสติ้ง สำหรับ Backend สามารถใช้ Cloudflare Pages เป็น Frontend Layer ได้โดย:

  • เสิร์ฟ Frontend Static Files ผ่าน CDN ของ Cloudflare เพื่อความเร็วสูงสุด
  • API Calls จาก Frontend ไปยัง Backend บน VPS ผ่าน Cloudflare Proxy
  • Pages Functions จัดการ Auth, Rate Limiting ก่อนส่ง Request ไปยัง VPS
  • Deploy Frontend ผ่าน Git Push โดยไม่ต้อง SSH เข้า Server

สรุป

Cloudflare Pages เป็น Platform ที่ประสิทธิภาพสูงสุดสำหรับการ Deploy Static Website และ JAMstack Application ด้วยความเร็วของ Cloudflare CDN และความง่ายทำงานของ Git-based Workflow การผสานกับ Cloud VPS หรือ Cloud Hosting ของ ผู้ให้บริการโฮสติ้ง จะทำให้คุณได้สถาปัตย์ที่เร็วทังในภาคที่ Frontend และ Backend