Deploy แอพจาก Monorepo ไป Vercel (หลาย Project)

TL;DR

• แต่ละแอพใน apps/* สร้างเป็น Project แยกใน Vercel
• กำหนด root directory → deploy เฉพาะแอพนั้น (ไม่ deploy ทั้ง repo)
• ถ้า packages/* เปลี่ยน จะ trigger redeploy ทุกแอพที่ใช้งานร่วม
• ตั้งโดเมนได้ทีหลังผ่าน Vercel Dashboard
• ทำครั้งแรกใช้ UI ของ Vercel → Dev ใหม่ทำตามได้ใน 15–30 นาที

---

1. ภาพรวมการ Deploy แบบ Multi-project จาก Monorepo

📦 nokfa-monorepo/
├── apps/
│   ├── web/               → Project: nokfa-web.vercel.app
│   └── admin-dashboard/   → Project: admin.nokfa.com
├── packages/
│   ├── ui-kit/            → ใช้ร่วมกันทุกแอพ
│   └── utils/

• ใช้ Vercel Deploy จาก Git repo เดียว (Monorepo)
• แต่สร้างหลาย Project ใน Vercel → deploy แยกตาม apps/*

---

2. ขั้นตอนการสร้าง Project บน Vercel

✅ สำหรับแอพใหม่ เช่น apps/admin-dashboard

1. เข้าหน้า Vercel Dashboard
2. กด [Add New → Project]
3. เลือก GitHub repo ที่มี Monorepo นี้อยู่
4. เลือก root directory → ใส่ apps/admin-dashboard
5. Framework: เลือก Next.js
6. ตั้ง Environment Variables (ดูตัวอย่างด้านล่าง)
7. กด Deploy

🎯 ถ้าใช้ pnpm → Vercel จะ detect ให้อัตโนมัติ หรือเพิ่ม VERCEL_FORCE_PNPM=1 เพื่อบังคับใช้

---

3. ตัวอย่าง Environment Variables

KEY	VALUE	หมายเหตุ
NODE_ENV	production
NEXT_PUBLIC_API	https://api.nokfa.com	เปลี่ยนตามสิ่งที่ต้องการใช้
GOOGLE_CLIENT_ID	<จาก Firebase>	OAuth ใช้ร่วมกันทุกแอพ
APP_ROLE	admin หรือ public	ใช้บอก role เฉพาะแอพนั้น ๆ

---

4. ตาราง Mapping แอพ → โดเมน

แอพใน Monorepo	Vercel Project Name	Default Domain	Production Domain
apps/web	nokfa-web	nokfa-web.vercel.app	www.nokfa.com
apps/admin-dashboard	admin-dashboard	admin-dashboard.vercel.app	admin.nokfa.com
apps/lite (future)	nokfa-lite	nokfa-lite.vercel.app	lite.nokfa.com

📌 ชื่อตั้งตามใจได้ แต่แนะนำให้ตรงกับชื่อใน apps/ เพื่อความสม่ำเสมอ

---

5. ตัวอย่าง flow การ deploy อัตโนมัติ (Diagram ASCII)

Git Push → GitHub 
     │
     ├─ Detected change in apps/web → Deploy Project: nokfa-web
     │
     ├─ Detected change in packages/ui-kit
     │     └─ Trigger deploy of:
     │         ├─ nokfa-web
     │         └─ admin-dashboard
     │
     └─ Slack / Email Notification (ถ้าตั้งไว้)

---

6. ข้อควรระวัง: shared lib เปลี่ยน = deploy ทุกแอพ

• หากแก้โค้ดใน packages/ui-kit หรือ utils → ทุกแอพที่ใช้อยู่จะ redeploy

• ตัวอย่าง:

  • เปลี่ยนปุ่มใน Button.tsx → ทั้ง web และ admin-dashboard จะ build ใหม่

• แนวทางลดผลกระทบ:

  • ใช้ turbo.json จัด dependency ให้แม่นยำ
  • ตั้งให้ dev ทดสอบก่อน merge main
  • ใช้ preview deploy ของ Vercel ก่อนปล่อยจริง

---

7. การตั้งค่า turbo.json ช่วยแยก pipeline

📄 ตัวอย่าง turbo.json

{
  "$schema": "https://turborepo.org/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {
      "outputs": []
    },
    "dev": {
      "cache": false
    }
  }
}

✅ ถ้าใช้ร่วมกับ pnpm workspace → build เฉพาะส่วนที่เปลี่ยน ✅ ช่วยลดเวลา deploy โดยไม่ build แพ็กเกจที่ไม่เกี่ยว

---

8. เพิ่ม Custom Domain

1. เปิดหน้า Project ใน Vercel
2. กด Settings → Domains
3. ใส่ชื่อโดเมน เช่น admin.nokfa.com
4. ทำตามคำแนะนำ → เพิ่ม CNAME หรือ A record ใน DNS
5. Vercel จะจัดการ SSL ให้อัตโนมัติ

---

9. ตัวอย่างการเพิ่มโปรเจกต์ใหม่ (สรุปเร็ว)

# สร้างแอปใหม่
$ mkdir apps/partner-portal
$ pnpm create next-app apps/partner-portal

# commit & push ไป GitHub
$ git add .
$ git commit -m "feat: add partner portal"
$ git push origin main

# ไป Vercel Dashboard → Add New Project
# กำหนด root เป็น apps/partner-portal
# ตั้ง env → Deploy

---

10. Tips

• ✅ ตั้ง outputDirectory เป็น .next (Vercel เข้าใจ Next.js โดยอัตโนมัติ)
• ✅ ใช้ preview URL เพื่อให้ทีมเทสก่อนขึ้น production
• ✅ ใช้ vercel env pull เพื่อ sync env มาที่เครื่อง local (ต้องติดตั้ง Vercel CLI)

$ npm i -g vercel
$ vercel login
$ vercel env pull .env.local