การ Deploy ระบบ Time Clock บน Vercel พร้อมตั้งค่า Environment

1. ติดตั้ง Vercel CLI และ Deploy โปรเจกต์

ติดตั้ง CLI (ถ้ายังไม่มี):

pnpm add -g vercel

Login เข้า Vercel:

vercel login

Deploy โปรเจกต์ครั้งแรก:

vercel

ขั้นตอนตอนสั่ง vercel:

• Set Project Name → ตั้งเช่น time-clock-frontend
• Link กับ Vercel Organization ของบริษัท (หรือ Personal ได้)
• เลือก Production Branch: main

หลัง deploy สำเร็จ จะได้ URL เช่น:

https://time-clock-frontend.vercel.app

2. เพิ่ม Environment Variables บน Vercel Dashboard

เข้าไปที่ Vercel Dashboard → เลือกโปรเจกต์ → Settings → Environment Variables

เพิ่มตัวแปรทั้งหมดตาม .env.local:

Key	Value
GOOGLE_PROJECT_ID	your-google-project-id
GOOGLE_CALENDAR_ID	your-calendar-id@group.calendar.google.com
GOOGLE_CLIENT_EMAIL	service-account-email@your-project-id.iam.gserviceaccount.com
GOOGLE_PRIVATE_KEY	-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----

หมายเหตุ:

• GOOGLE_PRIVATE_KEY ต้องใส่ \n (backslash+n) แทนการขึ้นบรรทัดใหม่
• ตั้ง Environment Variable เป็นประเภท Encrypted (Default)

3. ตั้ง Secret Key เพื่อป้องกัน Build Log โชว์ข้อมูลสำคัญ

ตัว Environment Variables ของ Vercel จะถูกเข้ารหัสอัตโนมัติ ไม่โชว์ใน Build Log อยู่แล้ว แต่ควรยืนยันว่า:

• ทุกค่าที่สำคัญ (เช่น Private Key) อยู่ใน Environment ไม่เขียนแข็งในโค้ด
• ไม่มีการ console.log() ค่า environment sensitive ใด ๆ ทั้งสิ้น

4. ตรวจสอบ Build Command และ Output

• Build Command: (Default) → ไม่ต้องตั้งเอง ใช้:

  next build
  

• Output Directory: (Default) → ไม่ต้องตั้งเอง เพราะ Next.js บน Vercel จะรู้จัก .next โดยอัตโนมัติ

5. Post-Deploy ทดสอบด้วย cURL

หลัง Deploy สำเร็จ ทดสอบ API /api/clock ว่าทำงานได้จริง:

curl -X POST https://time-clock-frontend.vercel.app/api/clock \
  -H "Content-Type: application/json" \
  -d '{
    "fullName": "สมชาย ใจดี",
    "employeeCode": "E123",
    "action": "Check-in"
  }'

คาดหวังผลลัพธ์:

{
  "message": "Clock-in event created"
}

และตรวจสอบว่ามี Event ใหม่ใน Google Calendar ด้วย

6. ตั้ง Log Drain (Optional ขั้นสูง)

ถ้าอยากเก็บ log การทำงานไว้ภายนอก (เช่น Datadog, Logtail, Papertrail) สามารถตั้ง Log Drain ได้:

• เข้า Vercel Dashboard → Project → Settings → Log Drains
• Add Log Drain → เลือก Provider หรือกำหนด Webhook เอง

ข้อดี:

• เก็บ Log ไว้ตรวจย้อนหลังได้นาน
• ทำ Alert แจ้งเตือนได้เมื่อมี Error หรือ Request Fail

---

หมายเหตุ: หลังขั้นตอนนี้ ระบบ Time Clock จะพร้อมใช้งาน Production จริง โดยปลอดภัยและควบคุมค่าใช้จ่ายได้