Astro Deploy บน Cloudflare Pages: ขั้นตอนทีละขั้น

ทำไมต้อง Cloudflare Pages

Cloudflare Pages เป็น hosting platform ที่

• ฟรี สำหรับ personal projects
• เร็ว ด้วย global CDN
• รองรับ SSR ผ่าน Cloudflare Workers

ติดตั้ง Cloudflare Adapter

npx astro add cloudflare

// astro.config.mjs
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server', // หรือ 'hybrid'
  adapter: cloudflare()
});

Deploy ผ่าน Git

1. Push code ขึ้น GitHub/GitLab
2. เข้า Cloudflare Dashboard → Pages
3. Connect to Git
4. ตั้งค่า Build:
   • Build command: npm run build
   • Build output: dist
5. Deploy!

Wrangler CLI

npm install -g wrangler
wrangler pages deploy dist

Environment Variables

// astro.config.mjs
export default defineConfig({
  adapter: cloudflare({
    platformProxy: {
      enabled: true // ใช้ Cloudflare bindings ใน dev
    }
  })
});

---
// ใช้ Cloudflare bindings
const { env } = Astro.locals.runtime;
const db = env.DB; // D1 Database
const kv = env.KV; // KV Store
---

wrangler.toml

name = "my-astro-site"
compatibility_date = "2024-01-01"

[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "xxx"

[[kv_namespaces]]
binding = "KV"
id = "xxx"

Static Site (ไม่ต้อง adapter)

// astro.config.mjs
export default defineConfig({
  output: 'static' // default
});

npm run build
wrangler pages deploy dist

Custom Domain

1. Cloudflare Dashboard → Pages → Custom domains
2. เพิ่ม domain
3. ตั้งค่า DNS CNAME record

สรุป

การ deploy Astro บน Cloudflare Pages ทำได้ง่ายมาก รองรับทั้ง static และ SSR ผ่าน Cloudflare Workers ฟรีและเร็วมากครับ