วิธีตั้งค่า Nx Monorepo ร่วมกับ Turborepo และ GitHub Actions เพื่อจัดการหลายแพ็กเกจในโครงการเดียวอย่างปลอดภัย

การจัดการหลายแพ็กเกจในโครงการเดียวเป็นเรื่องท้าทาย โดยเฉพาะเมื่อทีมต้องรักษาความปลอดภัยและประสิทธิภาพของระบบ Nx, Turborepo และ GitHub Actions สามารถทำให้กระบวนการนี้ง่ายขึ้นได้อย่างมาก บทความนี้จะอธิบายวิธีตั้งค่าโดยละเอียดเพื่อให้คุณเริ่มใช้งานได้ทันที

ภาพรวม — Overview

การใช้ Nx เป็น Monorepo หลักช่วยให้คุณควบคุมโครงสร้างโปรเจกต์และแชร์โค้ดระหว่างแพ็กเกจได้อย่างเป็นระบบ การเพิ่ม Turborepo จะเร่งขั้นตอน build, test และ lint ให้ทำงานแบบขนาน ส่วน GitHub Actions ทำหน้าที่อัตโนมัติทุกขั้นตอนตั้งแต่ commit จนถึง deployment

• Nx: โครงสร้าง Monorepo ที่มีการจัดการ dependencies อย่างชาญฉลาด
• Turborepo: ระบบ cache และ parallel execution สำหรับ task ต่าง ๆ
• GitHub Actions: CI/CD pipeline ที่รันบนคลาวด์โดยไม่ต้องตั้งค่าเซิร์ฟเวอร์เอง

ความพร้อมก่อนเริ่ม — Prerequisites

ตรวจสอบว่าคุณมีเครื่องมือพื้นฐานและสิทธิ์ที่จำเป็นแล้ว ก่อนจะลงมือทำขั้นตอนต่อไป

• Node.js รุ่น 16 ขึ้นไป
• npm หรือ Yarn (สำหรับการจัดการแพ็กเกจ)
• GitHub repository พร้อมใช้งาน
• สิทธิ์สร้าง workflow ใน GitHub Actions

Tip: ใช้ `nvm` เพื่อสลับเวอร์ชัน Node อย่างปลอดภัยโดยไม่กระทบโปรเจกต์อื่น ๆ

สร้าง Nx Monorepo — Initialize Nx Monorepo

ขั้นตอนต่อไปคือการสร้างโครงสร้างพื้นฐานของ Monorepo ด้วย Nx

• **ขั้นตอนที่ 1: เปิดเทอร์มินัลและรัน `npx create-nx-workspace@latest my-monorepo`
• **ขั้นตอนที่ 2: เลือก preset ที่ต้องการ (เช่น `empty`) เพื่อเริ่มจากศูนย์
• **ขั้นตอนที่ 3: ยืนยันโฟลเดอร์ทำงานเป็น `my-monorepo` แล้วเข้าสู่ไดเร็กทอรีด้วย `cd my-monorepo`
• **ขั้นตอนที่ 4: ตรวจสอบไฟล์ `nx.json`, `workspace.json` และโฟลเดอร์ `apps/` , `libs/` ที่สร้างขึ้นโดยอัตโนมัติ

ผสาน Turborepo เข้ากับ Nx — Add Turborepo

แม้ Nx มีระบบ cache ของตัวเอง แต่การเพิ่ม Turborepo จะทำให้คุณได้ประโยชน์จากฟีเจอร์ parallel execution เพิ่มเติม

• **ขั้นตอนที่ 1: ติดตั้ง Turborepo ด้วย `npm install -D turbo` หรือ `yarn add -D turbo`
• **ขั้นตอนที่ 2: สร้างไฟล์ `turbo.json` ที่รูทของโปรเจกต์และกำหนด pipeline เช่น

```json { "$schemahttps://turborepo.org/schema.json", "pipeline": { "build": { "dependsOn": ["^build"], "outputs": ["dist/"] }, "test": { "dependsOn": ["build"], "outputs": [] } } } ```

• **ขั้นตอนที่ 3: ปรับสคริปต์ใน `package.json` ให้เรียกใช้ Turbo เช่น

```json "scripts": { "devturbo run dev", "buildturbo run build", "testturbo run test" } ```

• **ขั้นตอนที่ 4: ตรวจสอบว่า Nx สามารถรับรู้การตั้งค่า Turborepo ได้โดยรัน `npm run build` แล้วดูว่าการ cache ทำงานตามคาด

ตั้งค่า CI ด้วย GitHub Actions — Configure CI

ต่อไปเราจะสร้าง workflow ที่ทำงานอัตโนมัติเมื่อมีการ push หรือ pull request

• สร้างไฟล์ `.github/workflows/ci.yml` ใต้ repository ของคุณ
• ตัวอย่างเนื้อหาเบื้องต้น

```yaml name: CI

on: push: branches: [ main ] pull_request: branches: [ main ]

jobs: build-test: runs-on: ubuntu-latest steps:

• uses: actions/checkout@v3
• name: Setup Node.js

uses: actions/setup-node@v3 with: node-version: '20'

• run: npm ci
• name: Cache Turbo

uses: actions/cache@v3 with: path: .turbo key: ${{ runner.os }}-turbo-${{ hashFiles('/package-lock.json') }} restore-keys: | ${{ runner.os }}-turbo-

• run: npm run build --if-present
• run: npm test --if-present

```

• **ขั้นตอนที่สำคัญ: ใช้ `actions/cache` เพื่อเก็บแคชของ Turbo ระหว่างรัน ทำให้เวลาการ Build ลดลงอย่างเห็นได้ชัด

แนวปฏิบัติด้านความปลอดภัย — Security Best Practices

การทำงานใน Monorepo มีจุดเสี่ยงหลายอย่างที่ต้องระมัดระวัง

• ตรวจสอบ dependencies ทุกแพ็กเกจด้วย `npm audit` หรือ `yarn audit` อย่างสม่ำเสมอ
• กำหนด branch protection rules บน GitHub เพื่อบังคับให้ PR ต้องผ่านการตรวจสอบและทดสอบก่อน merge
• ใช้ secrets ของ GitHub Actions สำหรับคีย์หรือ token ทุกครั้ง อย่าเขียนค่าเหล่านั้นในไฟล์โค้ดโดยตรง

Tip: ตั้งค่า `dependabot` บน repository เพื่อรับแจ้งเตือนอัตโนมัติเมื่อมีช่องโหว่ใหม่ในแพ็กเกจของคุณ

เคล็ดลับและข้อควรระวังทั่วไป — Tips

• ควรแยก apps และ libs ให้ชัดเจน เพื่อลดความซับซ้อนในการอ้างอิง dependencies
• ใช้ `nx run-many` หรือ `turbo run` ร่วมกันเมื่อต้องการทำงานหลาย ๆ แพ็กเกจพร้อมกัน
• ตรวจสอบว่าไฟล์ `.gitignore` มีการเพิ่มโฟลเดอร์ cache (`.turbo`, `dist/`) แล้ว เพื่อไม่ให้ข้อมูลที่ไม่มีประโยชน์ถูก push ขึ้น repository

Tip: หากต้องการดูภาพรวมของ dependencies ระหว่างแพ็กเกจ ใช้คำสั่ง `nx graph` ซึ่งแสดงเป็นกราฟเชิงโต้ตอบบนเว็บเบราว์เซอร์

ตารางเปรียบเทียบฟีเจอร์หลัก — Feature Comparison

สรุป — Summary

การผสาน Nx, Turborepo และ GitHub Actions ให้คุณจัดการหลายแพ็กเกจใน Monorepo ได้อย่างปลอดภัยและเร็วขึ้น

• ตั้งค่า Nx เป็นโครงสร้างพื้นฐานของ Monorepo
• เพิ่ม Turborepo เพื่อเร่งงาน build/test ด้วย cache & parallel execution
• ใช้ GitHub Actions ทำ CI/CD อัตโนมัติ พร้อมแคช Turbo เพื่อลดเวลา
• ปฏิบัติตามแนวปฏิบัติด้านความปลอดภัย เช่น audit dependencies, branch protection, secrets management

ทำตามขั้นตอนเหล่านี้ คุณจะได้ระบบที่มีประสิทธิภาพสูง มีการควบคุมคุณภาพของโค้ดอย่างเข้มงวด และพร้อมรองรับการเติบโตของทีมในอนาคต.