วิธีตั้งค่า Cloudflare Pages พร้อม Functions เพื่อสร้างเว็บไซต์สเตติกแบบ Server‑less อย่างปลอดภัย

Overview — Overview

Cloudflare Pages เป็นแพลตฟอร์มที่ให้บริการโฮสต์เว็บไซต์สเตติกได้อย่างเร็วและปลอดภัย การเพิ่ม Functions เข้าไปทำให้เราสามารถรันโค้ดฝั่งเซิร์ฟเวอร์แบบ Server‑less ได้โดยไม่ต้องจัดการเครื่องเซิร์ฟเวอร์เอง บทความนี้จะอธิบายขั้นตอนตั้งค่าตั้งแต่เริ่มต้นจนพร้อมใช้งานในรูปแบบที่เข้าใจง่ายและสแกนเร็ว

• Pages จัดการส่วน UI/UX ของเว็บไซต์สเตติก
• Functions ทำงานเป็น API endpoint ที่เรียกได้จากฝั่งไคลเอ็นต์หรือ webhook
• การรวมกันทำให้เรามี Full‑stack static site ที่มีความปลอดภัยสูง

**Tip: เริ่มต้นด้วยการสร้าง repository บน GitHub หรือ GitLab แล้วเชื่อมต่อกับ Cloudflare เพื่อใช้ระบบ CI/CD อัตโนมัติ

Prerequisites — Prerequisites

ก่อนลงมือทำ ควรตรวจสอบว่ามีเครื่องมือและสิทธิ์ที่จำเป็นครบถ้วนแล้วหรือยัง

• บัญชี Cloudflare ที่เปิดใช้งาน Pages และ Workers (Functions)
• Repository โค้ดของเว็บไซต์สเตติกบน GitHub, GitLab หรือ Bitbucket
• Node.js เวอร์ชันล่าสุดสำหรับการรันสคริปต์ build (ถ้าใช้เฟรมเวิร์กเช่น Astro, Next.js)

Tip: หากต้องการเปิดใช้งาน Zero Trust** ให้สมัครแผน Business หรือ Enterprise ของ Cloudflare เพื่อเข้าถึงฟีเจอร์ Access Control

Create Project — Create Project

ขั้นตอนแรกคือสร้างโปรเจคบน Cloudflare Pages แล้วเชื่อมต่อกับ repository

• เข้าสู่ Dashboard > Pages > Create a project
• เลือก Connect to Git แล้วเลือก provider (GitHub/GitLab/Bitbucket)
• ระบุ Repository ที่ต้องการใช้และกำหนดชื่อโปรเจค

Tip: ตั้งค่า Branch** เป็น `main` หรือ `master` ตามที่คุณใช้เป็นสาขาหลัก เพื่อให้ระบบอัตโนมัติทำงานเมื่อมีการ push

Enable Functions — Enable Functions

หลังจากสร้าง Pages แล้ว ให้เปิดใช้งาน Functions (Workers) สำหรับโครงการเดียวกัน

• ไปที่ Dashboard > Workers & Pages > Create a Worker
• ตั้งชื่อเช่น `api` หรือ `functions` แล้วเลือก Bind to your Pages project
• เลือก Add binding Pages Functions แล้วระบุชื่อโปรเจคที่สร้างไว้

**Tip: ใช้รูปแบบไฟล์ `*.js` หรือ `*.ts` ภายในโฟลเดอร์ `functions/` ของ repository เพื่อให้ระบบดึงมาเป็น endpoint โดยอัตโนมัติ

Build Settings — Build Settings

กำหนดขั้นตอนการ build ที่เหมาะกับเฟรมเวิร์กหรือ static site generator ที่ใช้

• ในหน้า Pages project เลือก Settings > Build configuration
• ระบุ Framework preset (เช่น Astro, Hugo, VuePress) หรือเลือก Custom หากต้องการกำหนดเอง
• ใส่คำสั่ง `npm run build` และตำแหน่งโฟลเดอร์ผลลัพธ์ เช่น `dist/`

Tip: เพิ่มไฟล์ `.cloudflare/pages-config.json` เพื่อระบุค่า trailingSlash, cleanUrls หรือ headers** ที่ต้องการปรับแต่ง

Security — Security

เพื่อให้เว็บไซต์และ Functions ปลอดภัย ควรตั้งค่าการเข้าถึงและป้องกันการโจมตี

• เปิดใช้งาน **WAF (Web Application Firewall) ใน Cloudflare Dashboard
• กำหนด Access Policies ให้เฉพาะผู้ใช้ที่ได้รับอนุญาตเท่านั้นสามารถเรียก Functions ได้
• ใช้ Environment Variables สำหรับคีย์ API หรือข้อมูลลับโดยไม่ต้องใส่ในโค้ด

Tip: ใช้ Rate Limiting** เพื่อป้องกันการโจมตีแบบ DDoS ที่อาจเข้าถึง endpoint ของ Functions

Testing & Debugging — Testing

หลังตั้งค่าเสร็จ ควรตรวจสอบว่าทุกอย่างทำงานตามคาด

• เปิด Pages Preview เพื่อดูเว็บไซต์สเตติกในสภาพแวดล้อม staging
• ใช้ Workers Dev หรือ `wrangler dev` เพื่อตรวจสอบการตอบสนองของ Functions ในเครื่อง local
• ตรวจสอบ Logs ของ Workers ผ่าน Dashboard > Workers > Logs

**Tip: หากเจอข้อผิดพลาดจาก CORS ให้ตั้งค่า Header `Access-Control-Allow-Origin: *` (หรือระบุโดเมนที่ต้องการ) ในไฟล์ `functions/_middleware.ts`

Versioning & CI/CD — Versioning

การจัดการเวอร์ชันช่วยให้ปล่อยฟีเจอร์ใหม่ได้อย่างมั่นใจ

• ทุกครั้งที่ push ไปยังสาขา `main` ระบบจะทำ Automatic Deploy ให้กับ Pages และ Functions พร้อมกัน
• ใช้ Git tags หรือ Release notes เพื่อระบุ version ของเว็บไซต์
• หากต้องการ deploy แบบ staging ให้สร้างสาขาใหม่แล้วตั้งค่า Deploy preview ใน Settings

Tip: ตั้งค่า Protected Branches** บน GitHub เพื่อตรวจสอบโค้ดด้วย Pull Request ก่อนทำการ Deploy ไปยัง production

Summary — Summary

การใช้ Cloudflare Pages ร่วมกับ Functions ให้คุณสร้างเว็บไซต์สเตติกแบบ Server‑less ที่ปลอดภัยและเร็วได้ในไม่กี่ขั้นตอน

• เชื่อมต่อ repository สร้าง Pages project เปิดใช้งาน Functions
• กำหนด build config, ตั้งค่า security (WAF, Access Policies) และใช้ environment variables เพื่อปกป้องข้อมูลสำคัญ
• ตรวจสอบด้วย preview, dev tools และ logs ก่อนทำการ Deploy จริง
• ใช้ระบบ CI/CD ของ Git เพื่อให้เวอร์ชันใหม่ ๆ ปรากฏบน production อย่างอัตโนมัติ

Tip สุดท้าย: ติดตามเอกสารอัพเดตของ Cloudflare อยู่เสมอ เพราะฟีเจอร์ใหม่เช่น Pages Functions v2** จะทำให้การพัฒนาแอปแบบ Server‑less ง่ายและปลอดภัยยิ่งขึ้น