Налаштування Monorepo (Nx) для веб-проекту

Налаштування Monorepo (Nx) для веб-проекту

Nx—не просто build system з кешуванням, а повнофункціональна платформа для monorepo: генератори коду, плагіни для кожного фреймворку, граф залежностей з візуалізацією, можливість запускати тільки вплинені проекти. Підходить для великих команд і складних проектів, де Turborepo буде відчуватися недостатнім.

Nx vs Turborepo: принципова різниця

Turborepo—task runner з кешем. Не знає про вміст ваших пакетів.

Nx—розуміє структуру: знає, що це Next.js додаток, що то—NestJS, може генерувати компоненти, модулі, тести за шаблонами. Плагін @nx/next налаштовує правила кешування, генератори, завдання—все автоматично.

Турбо підходить, коли вже є сформований стек й потрібно тільки прискорити CI. Nx підходить, коли команда велика й потрібна стандартизація розробки.

Ініціалізація

# Новий workspace
npx create-nx-workspace@latest acme --preset=apps
cd acme

# Додаємо додатки
npx nx generate @nx/next:app web --directory=apps/web
npx nx generate @nx/react:app admin --directory=apps/admin --bundler=vite
npx nx generate @nx/node:app api --directory=apps/api --framework=express

# Додаємо бібліотеки
npx nx generate @nx/react:lib ui --directory=packages/ui --component
npx nx generate @nx/js:lib utils --directory=packages/utils
npx nx generate @nx/js:lib types --directory=packages/types --bundler=none

Структура й nx.json

// nx.json
{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "targetDefaults": {
    "build": {
      "cache": true,
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"]
    },
    "lint": {
      "cache": true
    },
    "test": {
      "cache": true
    },
    "typecheck": {
      "cache": true
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/**/*.spec.*",
      "!{projectRoot}/jest.config.*"
    ],
    "sharedGlobals": []
  },
  "defaultBase": "main"
}

project.json для кожного проекту

Nx використовує project.json замість scripts у package.json:

// apps/web/project.json
{
  "name": "web",
  "sourceRoot": "apps/web/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nx/next:build",
      "outputs": ["{options.outputPath}"]
    },
    "serve": {
      "executor": "@nx/next:server"
    }
  },
  "tags": ["type:app", "scope:web"]
}

Tags й lint-правила для архітектурних обмежень

Сильна сторона Nx—enforce границь між модулями:

// .eslintrc.json
{
  "plugins": ["@nx"],
  "rules": {
    "@nx/enforce-module-boundaries": [
      "error",
      {
        "depConstraints": [
          {
            "sourceTag": "type:app",
            "onlyDependOnLibsWithTags": ["type:lib"]
          },
          {
            "sourceTag": "scope:web",
            "onlyDependOnLibsWithTags": ["scope:web", "scope:shared"]
          }
        ]
      }
    ]
  }
}

Граф залежностей

# Візуалізація у браузері
npx nx graph

# Вплинуте змінами у гілці
npx nx affected:graph

Запуск тільки вплинутих проектів

# Тести тільки для вплинутих
npx nx affected:test

# Збірка змін
npx nx affected:build --base=origin/main --head=HEAD

# Паралельно, максимум 4 завдання
npx nx affected:build --parallel=4

Генератори: стандартизація розробки

Nx дозволяє писати власні генератори—скрипти, що створюють файли за шаблонами.

Nx Cloud: розподілене виконання завдань

Розподіліть завдання між кількома CI-агентами:

# .github/workflows/ci.yml
jobs:
  agents:
    strategy:
      matrix:
        agent: [1, 2, 3]
    steps:
      - run: npx nx-cloud start-agent

  main:
    steps:
      - run: npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js"
      - run: npx nx affected -t lint typecheck test build

Таймлайн

Налаштування Nx для 6–10 проектів—3–5 днів: workspace, плагіни, module boundaries, генератори, CI/CD. Міграція існуючого monorepo—1–1,5 тижня залежно від кастомних конфігів.