Deploy บน Cloudflare Workers, Testing & สรุปรายวิชา

1. Cloudflare Workers Deployment — wrangler deploy

Cloudflare Workers คือ Serverless Runtime ที่รันโค้ด JavaScript ใกล้กับผู้ใช้มากที่สุด ผ่าน Edge Network ของ Cloudflare ซึ่งมีมากกว่า 300 จุดทั่วโลก ข้อดีเมื่อเทียบกับ Server แบบเดิมคือ ไม่มี Cold Start แบบ Traditional Serverless, Latency ต่ำมาก, และ Scale อัตโนมัติโดยไม่ต้องตั้งค่า

เครื่องมือหลักในการ Deploy คือ Wrangler CLI ซึ่งเป็น Command-line Tool ของ Cloudflare ใช้สำหรับ Develop, Test, และ Deploy Workers พร้อมทั้งจัดการ Secrets และ KV Storage

• wrangler.toml — ไฟล์ Config หลักของโปรเจกต์ Workers ระบุ name, main entry, compatibility_date และ bindings ต่างๆ เช่น Environment Variables หรือ KV Namespace
• npx wrangler dev — รัน Workers ในเครื่องแบบ Local Development มี Hot Reload และ Simulate Edge Environment ได้ใกล้เคียงกับ Production มากที่สุด
• npx wrangler deploy — Deploy โค้ดขึ้น Cloudflare Network จริง ใช้เวลาไม่กี่วินาที และ Rollback ทันทีหากมีปัญหา

  โครงสร้าง Deploy Pipeline — Cloudflare Workers
  ─────────────────────────────────────────────────
  Local Dev               Cloudflare Edge
  ─────────────────       ─────────────────────────
  wrangler.toml           workers.dev Domain
  src/index.js    ──────► bookeasy-api.your-name
  .dev.vars                 .workers.dev
  (local secrets)
                          Cloudflare Pages
  bookeasy/               ─────────────────────────
  dist/           ──────► bookeasy.pages.dev
  (Vite build)
  ─────────────────────────────────────────────────

2. Environment Variables บน Production — Wrangler Secrets

ใน Development เราเก็บ Credentials เช่น Supabase URL หรือ API Key ไว้ในไฟล์ .dev.vars ซึ่งไม่ควร Commit ขึ้น Git แต่บน Production เราต้องใช้ Wrangler Secrets ซึ่งเก็บค่า Encrypted ใน Cloudflare Dashboard และ Inject ให้ Workers ณ Runtime โดยอัตโนมัติ

ข้อแตกต่างระหว่าง Secrets กับ Environment Variables ปกติ:

• Secrets — เข้ารหัสไว้ใน Cloudflare, ไม่แสดงใน Dashboard หลังตั้งค่า, เหมาะสำหรับ Database URL, API Keys, JWT Secret ที่ไม่ควรเปิดเผย
• Vars (wrangler.toml) — ตั้งค่าได้ใน wrangler.toml ภายใต้ [vars] เหมาะสำหรับค่าที่ไม่ Sensitive เช่น APP_ENV, MAX_UPLOAD_SIZE

  วิธีเข้าถึง Secrets ใน Hono API
  ─────────────────────────────────────────────────
  // ใน Cloudflare Workers (Hono)
  app.get('/api/services', async (c) => {
    const supabaseUrl = c.env.SUPABASE_URL;   ← จาก wrangler secret
    const supabaseKey = c.env.SUPABASE_KEY;   ← จาก wrangler secret

    const client = createClient(supabaseUrl, supabaseKey);
    const { data } = await client.from('services').select('*');
    return c.json({ data });
  });
  ─────────────────────────────────────────────────

3. Vite Build + Deploy Frontend — Cloudflare Pages

Cloudflare Pages คือบริการ Static Site Hosting ของ Cloudflare ที่เชื่อมต่อกับ Git Repository ได้โดยตรง หรือ Deploy ผ่าน Wrangler CLI ก็ได้ เหมาะสำหรับ Vite + React App ที่ Build เป็น Static Files

ขั้นตอนหลักในการ Deploy Frontend:

• สร้าง .env.production — ไฟล์นี้ Vite จะโหลดอัตโนมัติเมื่อรัน npm run build ใส่ VITE_API_URL ชี้ไปยัง Workers URL จริง (ไม่ใช่ localhost)
• npm run build — Vite สร้างโฟลเดอร์ dist/ ที่มี Optimized HTML, CSS, JS พร้อม Tree Shaking และ Code Splitting อัตโนมัติ
• npx wrangler pages deploy dist — อัปโหลด dist/ ขึ้น Cloudflare Pages และได้รับ URL จริงทันที

4. Testing เบื้องต้นใน JavaScript — Vitest

Vitest คือ Testing Framework สำหรับ JavaScript/TypeScript ที่ออกแบบมาให้ทำงานร่วมกับ Vite ได้อย่างสมบูรณ์ ใช้ Syntax เดียวกับ Jest แต่เร็วกว่าเพราะใช้ ESM Native และไม่ต้องตั้งค่า Babel หรือ Transform พิเศษ

ประเภทของ Test ที่ควรรู้จัก:

• Unit Test — ทดสอบฟังก์ชันเดียวแบบ Isolated ไม่มี Network, Database, หรือ UI เหมาะสำหรับ Utility Functions เช่น formatPrice(), formatDate()
• Integration Test — ทดสอบการทำงานร่วมกันของหลาย Module เช่น ทดสอบว่า API Route ส่งข้อมูลถูกต้องเมื่อรับ Request จริง
• E2E Test (End-to-End) — ทดสอบแบบ Full Flow ตั้งแต่ผู้ใช้เปิดเบราว์เซอร์ จนถึงข้อมูลบันทึกลง Database ใช้เครื่องมืออย่าง Playwright หรือ Cypress

  โครงสร้าง Test File — Vitest
  ─────────────────────────────────────────────────
  describe('formatPrice', () => {       ← Test Suite
    it('formats Thai baht', () => {     ← Test Case
      expect(formatPrice(150))          ← Assertion
        .toBe('฿150.00');
    });

    it('handles zero', () => {
      expect(formatPrice(0)).toBe('฿0.00');
    });
  });

  ผลลัพธ์เมื่อ npm test:
  ─────────────────────────────────────────────────
  ✓ formatPrice > formats Thai baht
  ✓ formatPrice > handles zero
  ✓ formatPrice > handles large numbers
  Test Files: 1 passed (1)
  Tests:      3 passed (3)
  ─────────────────────────────────────────────────

5. สรุปรายวิชาและ Next Steps

ตลอด 15 สัปดาห์ที่ผ่านมา เราสร้าง BookEasy — Web Application จองบริการ ตั้งแต่ศูนย์จนถึง Production โดยใช้ Stack สมัยใหม่ที่ใช้จริงในอุตสาหกรรม:

  BookEasy Stack — สรุป 15 สัปดาห์
  ─────────────────────────────────────────────────
  W1  — แนะนำรายวิชา: Client-Server, HTTP, Tools
  W2  — HTML/CSS/JS: โครงสร้างโปรเจกต์ BookEasy
  W3  — Vite + React: JSX, Components, Props
  W4  — TanStack Router: File-based Routing
  W5  — Hono + Cloudflare Workers: REST API
  W6  — Supabase Database: PostgreSQL + RLS
  W7  — CRUD สมบูรณ์: GET/POST/PATCH/DELETE
  W8  — TanStack Query: Data Fetching + Cache
  W9  — Supabase Auth: Login, Register, Session
  W10 — Supabase Storage: อัปโหลดรูปบริการ
  W11 — Shadcn/ui + Tailwind: UI/UX ที่สวยงาม
  W12 — Custom Hooks: useServices, useBookings
  W13 — โครงงานทีม: วิเคราะห์ ออกแบบ พัฒนา
  W14 — นำเสนอ: Demo, Documentation
  W15 — Deploy + Testing + สรุปรายวิชา ← คุณอยู่ที่นี่
  ─────────────────────────────────────────────────

ทักษะที่ได้จากรายวิชานี้ตรงกับสิ่งที่อุตสาหกรรม IT ต้องการ:

• Frontend Developer — React, Vite, TanStack Router/Query, Tailwind, Shadcn/ui
• Backend Developer — Hono, Cloudflare Workers, REST API, Supabase
• Full Stack Developer — ทำได้ทั้งสองฝั่ง ครอบคลุมทุกชั้นของแอปพลิเคชัน
• DevOps / Deployment — Wrangler CLI, Cloudflare Pages, Environment Management

Next Steps ที่แนะนำ สำหรับการพัฒนาทักษะต่อจากรายวิชานี้:

• TypeScript — เพิ่ม Type Safety ให้ JavaScript Codebase เดิม Hono และ Vite รองรับ TypeScript ได้ทันทีโดยแทบไม่ต้องเปลี่ยนโครงสร้าง
• Testing (Vitest + Playwright) — เขียน Unit Test ให้ครอบคลุม Utility Functions และ E2E Test สำหรับ User Flows สำคัญ
• CI/CD (GitHub Actions) — ตั้งค่า Pipeline ให้ Run Tests อัตโนมัติทุก Push และ Deploy อัตโนมัติเมื่อ Tests ผ่านทั้งหมด
• Drizzle ORM หรือ Prisma — ใช้ Type-safe ORM แทนการเขียน SQL โดยตรง ทำให้ Query ปลอดภัยขึ้นและ Migrate Schema ได้ง่ายขึ้น