אופטימיזציית בנייה במונוריפו עם Turborepo

נניח שהבנייה (build) של הפרונטאנד שלך אורכת 12 דקות, הבאקאנד והפרונטאנד נמצאים במאגרים נפרדים, קוד משותף משוכפל, ומשימות ה-CI רצות ברצף. זהו מצב טיפוסי שאנו פותרים על ידי הקמת מונוריפו (monorepo) עם Turborepo. נתקלנו בפרויקטים שבהם הבנייה ארכה 30 דקות, ו-Turborepo צמצם אותה ל-5. תצורה נכונה מקצרת את זמן הבנייה פי 3–5 באמצעות מקביליות וקאש (caching). לאחר היישום, הלקוחות חוסכים בממוצע 2,000 דולר בחודש בעלויות תשתית CI. אנו מבטיחים שהפרויקט שלך ייבנה מהר יותר.

בחירת הכלי הנכון

מתי לבחור ב-Turborepo?

npm/yarn/pnpm workspaces כבר מספקים מבנה מונוריפו, אבל Turborepo מוסיף ביצוע מקבילי עם מודעות לתלויות, קאש מצטבר (מקומי ומרוחק), וגרף משימות. עבור פרויקטים קטנים (2–3 חבילות), workspaces מספיקים. עם 5+ חבילות ו-CI/CD, Turborepo מתחיל לחסוך זמן אמיתי. השוואה: עם 10 חבילות, Turborepo מהיר פי 4 ממקביליות ידנית בזכות סדר בנייה אוטומטי.

Turborepo מול Nx

Turborepo קל יותר: אין צורך במחוללי קוד ותוספים. מספיקים my-project/ ├── apps/ │ ├── web/ # Next.js фронтенд │ ├── admin/ # Vite + React admin panel │ └── api/ # Node.js/Express backend ├── packages/ │ ├── ui/ # общие React-компоненты │ ├── config/ │ │ ├── eslint/ # конфиг ESLint │ │ ├── typescript/ # базовые tsconfig │ │ └── tailwind/ # tailwind preset │ ├── utils/ # общие утилиты (formatDate, etc.) │ └── types/ # общие TypeScript-типы ├── package.json # workspaces declaration ├── turbo.json # конфигурация Turborepo └── pnpm-workspace.yaml # если используем pnpm ופרוטוקול workspace. זו הבחירה האידיאלית עבור צוותים שרוצים מונוריפו ללא נפח מיותר. Nx מציע יותר תכונות, אבל Turborepo מנצח בפשטות ההתקנה והמהירות.

ארכיטקטורת הפרויקט והתצורה

מבנה הפרויקט

my-project/
├── apps/
│   ├── web/          # Next.js фронтенд
│   ├── admin/        # Vite + React admin panel
│   └── api/          # Node.js/Express backend
├── packages/
│   ├── ui/           # общие React-компоненты
│   ├── config/
│   │   ├── eslint/       # конфиг ESLint
│   │   ├── typescript/   # базовые tsconfig
│   │   └── tailwind/     # tailwind preset
│   ├── utils/        # общие утилиты (formatDate, etc.)
│   └── types/        # общие TypeScript-типы
├── package.json          # workspaces declaration
├── turbo.json            # конфигурация Turborepo
└── pnpm-workspace.yaml   # если используем pnpm

הגדרת turbo.json

---
# docker-compose.yml для remote cache сервера
services:
  turbo-cache:
    image: ducktors/turborepo-remote-cache:latest
    ports:
      - "3000:3000"
    environment:
      TURBO_TOKEN: "your-secret-token"
      STORAGE_PROVIDER: "s3"
      S3_BUCKET: "turbo-cache-bucket"
      AWS_ACCESS_KEY_ID: "${AWS_ACCESS_KEY_ID}"
      AWS_SECRET_ACCESS_KEY: "${AWS_SECRET_ACCESS_KEY}"

הגדרת חבילות ותצורות משותפות

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": [".env"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "package.json", "tsconfig.json"],
      "outputs": ["dist/**", ".next/**", "!.next/cache/**"],
      "env": ["NODE_ENV", "API_URL"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {
      "inputs": ["src/**", "*.ts", "*.tsx", ".eslintrc*"],
      "outputs": []
    },
    "typecheck": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "tsconfig.json"],
      "outputs": []
    },
    "test": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "test/**", "vitest.config.*"],
      "outputs": ["coverage/**"],
      "env": ["TEST_DATABASE_URL"]
    },
    "test:e2e": {
      "dependsOn": ["build"],
      "inputs": ["e2e/**", "playwright.config.*"],
      "outputs": ["test-results/**"],
      "cache": false
    },
    "db:generate": {
      "cache": false,
      "inputs": ["prisma/schema.prisma"]
    }
  }
}

CI/CD וקאש מרוחק

איך להגדיר CI עם Turborepo?

// packages/ui/package.json
{
  "name": "@acme/ui",
  "version": "0.0.0",
  "private": true,
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./styles": "./dist/styles.css"
  },
  "scripts": {
    "build": "tsup src/index.ts --format esm --dts",
    "dev": "tsup src/index.ts --format esm --dts --watch"
  },
  "devDependencies": {
    "@acme/eslint-config": "*",
    "@acme/typescript-config": "*",
    "tsup": "^8.0.0"
  },
  "peerDependencies": {
    "react": "^18.0.0"
  }
}

למה קאש מרוחק קריטי ל-CI?

קאש מקומי עובד רק על מכונה אחת. עבור צוותים ו-CI, קאש מרוחק חיוני. לפי התיעוד הרשמי של Turborepo, קאש מרוחק יכול להפחית את זמני הבנייה ב-CI בעד 80%. Vercel Remote Cache הוא חינמי לקוד פתוח, ובתשלום עבור מאגרים פרטיים. אפשרות לאירוח עצמי דרך turborepo-remote-cache:

---
# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  ci:
    runs-on: ubuntu-latest
    env:
      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 2
      - uses: pnpm/action-setup@v3
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm turbo lint typecheck test --filter=...[HEAD^1]
      - run: pnpm turbo build

טבלה 1: השוואת קאש: מקומי מול מרוחק

טבלה 2: השוואת כלי מונוריפו

טעויות נפוצות ופתרונות

• אי ציון # docker-compose.yml для remote cache сервера services: turbo-cache: image: ducktors/turborepo-remote-cache:latest ports: - "3000:3000" environment: TURBO_TOKEN: "your-secret-token" STORAGE_PROVIDER: "s3" S3_BUCKET: "turbo-cache-bucket" AWS_ACCESS_KEY_ID: "${AWS_ACCESS_KEY_ID}" AWS_SECRET_ACCESS_KEY: "${AWS_SECRET_ACCESS_KEY}" ב-pipeline — הקאש מחזיר ערכים מיושנים.
• שכחת { "$schema": "https://turbo.build/schema.json", "globalDependencies": [".env"], "pipeline": { "build": { "dependsOn": ["^build"], "inputs": ["src/**", "package.json", "tsconfig.json"], "outputs": ["dist/**", ".next/**", "!.next/cache/**"], "env": ["NODE_ENV", "API_URL"] }, "dev": { "cache": false, "persistent": true }, "lint": { "inputs": ["src/**", "*.ts", "*.tsx", ".eslintrc*"], "outputs": [] }, "typecheck": { "dependsOn": ["^build"], "inputs": ["src/**", "tsconfig.json"], "outputs": [] }, "test": { "dependsOn": ["^build"], "inputs": ["src/**", "test/**", "vitest.config.*"], "outputs": ["coverage/**"], "env": ["TEST_DATABASE_URL"] }, "test:e2e": { "dependsOn": ["build"], "inputs": ["e2e/**", "playwright.config.*"], "outputs": ["test-results/**"], "cache": false }, "db:generate": { "cache": false, "inputs": ["prisma/schema.prisma"] } } } עבור dev — ה-watcher לא מתחיל.
• תלויות מעגליות — בדוק את גרף התלויות.
• חוסר // packages/ui/package.json { "name": "@acme/ui", "version": "0.0.0", "private": true, "exports": { ".": { "import": "./dist/index.js", "types": "./dist/index.d.ts" }, "./styles": "./dist/styles.css" }, "scripts": { "build": "tsup src/index.ts --format esm --dts", "dev": "tsup src/index.ts --format esm --dts --watch" }, "devDependencies": { "@acme/eslint-config": "*", "@acme/typescript-config": "*", "tsup": "^8.0.0" }, "peerDependencies": { "react": "^18.0.0" } } ב-CI — הפילטר # .github/workflows/ci.yml name: CI on: [push, pull_request] jobs: ci: runs-on: ubuntu-latest env: TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }} TURBO_TEAM: ${{ secrets.TURBO_TEAM }} steps: - uses: actions/checkout@v4 with: { fetch-depth: 2 } - uses: pnpm/action-setup@v3 with: { version: 9 } - uses: actions/setup-node@v4 with: { node-version: 20, cache: pnpm } - run: pnpm install --frozen-lockfile - run: pnpm turbo lint typecheck test --filter=...[HEAD^1] - run: pnpm turbo build לא עובד.
• הגדרת קאש מרוחק שגויה — ודא ש-env ו-persistent: true מוגדרים.

תהליך התקנת Turborepo במפתח-לסיום

אנו מטפלים במחזור המלא: ביקורת על הארכיטקטורה הנוכחית, עיצוב מבנה המונוריפו, הגדרת turbo.json, יצירת חבילות משותפות (TypeScript, ESLint, Tailwind), פריסת קאש מרוחק על S3, אינטגרציית CI/CD, תיעוד והדרכת צוות. תוצאה: בניות מהירות פי 3–5, קאש ב-CI, קוד מאוחד. חיסכון בזמן פיתוח יכול להגיע ל-80%.

מה כולל השירות שלנו

• ביקורת פרויקט מפורטת ותוכנית הגירה
• הקמת מונוריפו Turborepo עם כל התצורות
• פריסת שרת קאש מרוחק (Docker + S3)
• אינטגרציית צנרת CI/CD (GitHub Actions, GitLab CI וכו')
• יצירת חבילות משותפות (TypeScript, ESLint, Tailwind presets)
• תיעוד מקיף והדרכת צוות
• שבועיים של תמיכה ואופטימיזציה לאחר ההשקה

לוח זמנים וחיסכון

הקמה מאפס עבור פרויקט עם 5–8 חבילות אורכת 2–3 ימים. הגירה של פרויקט קיים למונוריפו אורכת כשבוע. העלות מחושבת באופן אישי, אבל הלקוחות שלנו חוסכים בדרך כלל 1,000–3,000 דולר בחודש על תשתית CI. מעל 50 פרויקטי מונוריפו הושלמו, שבע שנים בפיתוח web.

איך Turborepo מאיץ בניות?

מקביליות משימות המבוססת על גרף התלויות מאפשרת למשימות עצמאיות לרוץ בו-זמנית. קאש תוצאות (מקומי ומרוחק) מדלג על בנייה מחדש של חבילות שלא השתנו. ה-fetch-depth: 2 המובנה מריץ משימות רק עבור חבילות מושפעות והתלויות שלהן. לפי התיעוד הרשמי של Turborepo, מקביליות יכולה להפחית את זמן הבנייה בעד פי 5.

סיכום

Turborepo הוא כלי יעיל להאצת CI ופישוט תהליכי מונוריפו. תצורה נכונה עם קאש מרוחק וצנרת מתוכננת היטב מניבה חיסכון ניכר בזמן ובמשאבים. אנו מציעים הקמת מונוריפו במפתח-לסיום תוך 3 ימים בלבד. צור קשר להערכת פרויקט — נעזור לך לזהות חיסכון פוטנציאלי ולעצב פתרון אופטימלי.