N

Nokfa Docs

Current: framework-next.js

ไม่มีชื่อบทความ

ภาพรวมตัวเลือกโครงสร้าง Repo: Monorepo vs Multi‑repo

TL;DR

  • โครงสร้างโปรเจกต์แบ่งออกได้เป็น 2 แบบหลัก ๆ:

    • Monorepo = โค้ดทุกอย่างอยู่ใน repo เดียว
    • Multi-repo = แยก repo ตามฟีเจอร์ / โมดูล
  • Nokfa เลือกใช้ Monorepo เพราะเหมาะกับทีมเล็ก, แชร์โค้ดได้ง่าย, Dev จัดการง่ายกว่า

  • บทความนี้อธิบายข้อดี-ข้อเสีย, use-case, ตารางเปรียบเทียบ และตัวอย่างของ Nokfa

  • ใช้เวลาอ่าน ~15 นาที


ทำไมต้องเข้าใจ Monorepo vs Multi-repo?

  • เพื่อจัดการโค้ดให้เหมาะกับขนาดทีมและลักษณะงาน
  • ลดความสับสนเวลา Dev ใหม่เข้ามา
  • วางแผนโครงสร้างระยะยาวให้เติบโตต่อได้

คำจำกัดความ (Definitions)

✅ Monorepo

เก็บหลายแอปหรือโมดูลไว้ใน repo เดียว เช่น เว็บไซต์หลัก + CMS + Design system

  • ใช้โฟลเดอร์แยกย่อย เช่น

    /apps/web  
    /apps/cms  
    /packages/ui-components  
    

✅ Multi-repo

แยก repo แต่ละแอป/โมดูล เช่น มี repo web, cms, shared-ui แยกกันบน GitHub

  • แต่ละ repo มี CI/CD ของตัวเอง
  • ปล่อยเวอร์ชันต่างกันได้อิสระ

ข้อดี‑ข้อเสีย

แง่มุม Monorepo Multi-repo
👥 เหมาะกับทีม ✅ ทีมเล็ก (<5 คน) ✅ ทีมใหญ่ (>5 คน)
🧠 ความเข้าใจ ง่ายสำหรับ Dev ใหม่ อาจสับสนเวลาเชื่อมโค้ดข้าม repo
🔄 การแชร์โค้ด ง่ายมาก (import ตรงจาก packages/) ต้องแยก publish npm หรือ git submodule
🚀 CI/CD รวม pipeline เดียว ปรับแยกตามโปรเจกต์ได้
📦 การจัดการเวอร์ชัน ทุกโปรเจกต์มักใช้ lib เวอร์ชันเดียวกัน แต่ละ repo ใช้เวอร์ชันของตัวเองได้
🧪 การทดสอบร่วมกัน ทำ Integration test ได้ง่าย ยากกว่าหากต้องดึงหลาย repo มารวม
📁 ความเรียบร้อยใน repo อาจใหญ่และรกถ้าไม่จัดโครงสร้างดี แต่ละ repo เล็กและโฟกัสงานชัดเจน

ใช้เมื่อไร?

ใช้ Monorepo เมื่อ:

  • ทีมเล็ก, คนดูแลหลายส่วนของระบบ
  • อยากแชร์โค้ดระหว่างแอป (เช่น UI component, utils)
  • มี workflow เดียว ใช้ CI เดียว เช่น deploy ผ่าน Vercel
  • อยากให้ dev clone repo เดียวแล้ว run ได้เลย

ใช้ Multi-repo เมื่อ:

  • ทีมใหญ่ มีทีมแยกดูแต่ละโปรเจกต์
  • ต้องแยกเวอร์ชันหรือขายแยก module ได้
  • ใช้ tech stack คนละแบบ (เช่น web = Next.js, api = Go)

ตัวอย่างจริงของ Nokfa

  • บริษัทมี dev 2 คน, ทำทั้ง Frontend + Backend

  • ใช้ Next.js (App Router), Vercel, Firestore

  • ต้องการโค้ดแชร์ระหว่าง

    • หน้าเว็บหลัก (marketing)
    • Dashboard (admin panel)
    • UI components / hook / lib
  • ใช้ pnpm workspace เพื่อ:

    • แชร์ dependency เดียวกัน
    • ทำ dev หรือ build ข้ามโปรเจกต์
    • ใช้ turbo.json ช่วย build เฉพาะส่วนที่เปลี่ยน

โครงสร้าง repo จริง (โดยย่อ):

/apps
  └─ web              → เว็บหลัก
  └─ admin-dashboard  → แดชบอร์ดหลังบ้าน

/packages
  └─ ui               → ชุด component UI ที่ใช้ร่วมกัน
  └─ utils            → ฟังก์ชันทั่วไปที่แชร์ได้

คำสั่งที่ dev Nokfa ใช้บ่อย

# ติดตั้ง dependency
$ pnpm install

# เริ่ม dev เว็บหลัก
$ pnpm --filter web dev

# เริ่ม dev แดชบอร์ด
$ pnpm --filter admin-dashboard dev

# Build ทั้งหมด
$ pnpm build

# ดูว่า package ไหนเกี่ยวข้องกับไฟล์ที่เปลี่ยน
$ turbo run build --filter=...

ตารางเปรียบเทียบแบบรวบรัด

เรื่อง Monorepo Multi-repo
Clone repo ครั้งเดียว ❌ ต้อง clone หลาย repo
แชร์โค้ดข้ามโปรเจกต์ ✅ (ง่ายมาก) ❌ ต้องตั้ง dependency แยก
เหมาะกับทีม Nokfa ✅ (ทีมเล็ก, แชร์โค้ดเยอะ)
CI/CD ตั้งทีเดียว ❌ แยก CI หลายที่
แยกเวอร์ชันได้ละเอียด ❌ ยาก

คำแนะนำในการเริ่มใช้ Monorepo

  • ใช้ pnpm แทน npm/yarn: ทำงานเร็วขึ้นและรองรับ workspace ดี
  • จัดโครงสร้างด้วย /apps, /packages ชัดเจน
  • ใช้ turbo.json หรือ nx.json ช่วย optimize pipeline
  • ตั้ง ESLint/Prettier/TSConfig แบบแชร์ config กลาง