⛽
😂🤣😜😊/
Monorepo 之 Nx
Search

Monorepo 之 Nx

Date
Created
Apr 8, 2025 10:20 AM
Descrption
好记性不如烂笔头
Tags
前端工程化
工具
notion image
使用 Monorepo 来管理一个前端是 Next.js，后端是 NestJS 的项目，可以有效地简化项目管理，特别是在多个子项目间共享代码、库和资源时。Monorepo 可以让你在一个代码仓库内管理多个项目或模块，并且减少跨项目的配置和版本管理问题。
下面是使用 Monorepo 管理 Next.js 和 NestJS 项目的详细教程。我将通过 Nx 工具来帮助我们搭建 Monorepo，因为它提供了许多出色的功能，如模块化、集成、构建、测试等。

1. 前提准备

确保你已经安装了以下工具：
  • Node.js (推荐版本 >= 14)
  • Yarn 或 npm（推荐使用 Yarn 以便享受更快的依赖管理）
  • Git

2. 安装 Nx

我们使用 Nx 来搭建和管理 Monorepo。Nx 是一个强大的工具，专为大规模的 JavaScript 项目和 Monorepo 设计，可以很容易地集成前后端应用。
# 安装 Nx
npm install -g nx
# 或者使用 Yarn
yarn global add nx

3. 初始化 Nx 项目

创建一个新的 Nx 工作区，并选择一个适合的项目类型。我们将创建一个包含 Next.js 和 NestJS 的 Monorepo。
# 创建 Nx 工作区，选择空项目（Empty workspace）
npx create-nx-workspace@latest my-monorepo --preset=empty
# 进入工作区目录
cd my-monorepo
此时，你已经初始化了一个空的 Nx 工作区。

4. 添加 Next.js 和 NestJS

4.1 添加 Next.js 应用

我们可以使用 Nx 的内置支持来快速创建一个 Next.js 应用。
# 添加 Next.js 应用
nx generate @nrwl/next:application frontend
这会创建一个名为 frontend 的 Next.js 应用。

4.2 添加 NestJS 应用

接下来，我们为后端添加一个 NestJS 应用。
# 添加 NestJS 应用
nx generate @nrwl/nest:application backend
这会创建一个名为 backend 的 NestJS 应用。

5. 配置共享库

在 Monorepo 中，很多时候前后端会共享一些常用的逻辑或库（如模型、接口定义等）。我们可以创建共享的库来管理这些逻辑。

5.1 创建共享库

我们可以创建一个 shared 库，在其中放置一些前后端共享的代码（例如类型定义、数据接口等）。
# 创建共享库
nx generate @nrwl/workspace:library shared
这会在 libs/shared 目录下创建一个共享库。你可以在 libs/shared 中放置前后端都需要的代码。
例如，你可以创建一个类型文件来共享前后端都使用的接口定义：
// libs/shared/src/lib/types.ts
export interface User {
  id: string;
  username: string;
  email: string;
}
在 Next.js 和 NestJS 应用中都可以引用这个库：
// frontend/src/pages/api/user.ts
import { User } from '@my-monorepo/shared';

const user: User = {
  id: '1',
  username: 'john_doe',
  email: 'john@example.com',
};

export default user;

// backend/src/user/user.service.ts
import { Injectable } from '@nestjs/common';
import { User } from '@my-monorepo/shared';

@Injectable()
export class UserService {
  private readonly users: User[] = [];

  getUsers(): User[] {
    return this.users;
  }
}

5.2 设置依赖

确保在 frontend 和 backend 应用中正确安装了共享库的依赖。Nx 会自动为你处理这些依赖关系。

6. 安装和配置第三方库

你可能需要为项目安装一些第三方库。例如，安装 Axios 用于前后端请求，或者安装 TypeORM 用于 NestJS 的数据库支持等。

6.1 安装 Axios

# 安装 Axios（可以在前端和后端中都使用）
npm install axios
然后你可以在 frontend 或 backend 中使用 Axios 来进行 HTTP 请求。
// frontend/src/pages/api/user.ts
import axios from 'axios';

export async function getUser() {
  const response = await axios.get('/api/user');
  return response.data;
}

6.2 安装 TypeORM（用于 NestJS 后端）

# 安装 TypeORM 和数据库驱动
npm install @nestjs/typeorm typeorm pg
配置 backend/src/app.module.ts 来使用 TypeORM：
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { User } from './user/user.entity';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'postgres',
      host: 'localhost',
      port: 5432,
      username: 'test',
      password: 'test',
      database: 'test',
      entities: [User],
      synchronize: true,
    }),
    TypeOrmModule.forFeature([User]),
  ],
  controllers: [],
  providers: [],
})
export class AppModule {}

7. 开发和构建应用

7.1 启动前后端开发

你可以分别启动 frontend 和 backend 应用，进行前后端开发。
# 启动 Next.js 前端应用
nx serve frontend

# 启动 NestJS 后端应用
nx serve backend

7.2 构建应用

在准备将应用部署到生产环境时，你可以使用 Nx 的构建命令来构建应用：
# 构建 Next.js 应用
nx build frontend

# 构建 NestJS 应用
nx build backend

8. CI/CD 配置

在 Monorepo 中，配置 CI/CD 会变得更加简单，因为你只需要为整个工作区配置一次 CI/CD 流程。可以使用 GitHub Actions、GitLab CI 或者 Jenkins 来实现自动化构建和部署。

8.1 GitHub Actions 配置示例

创建 .github/workflows/ci.yml 文件，并配置以下内容：
name: CI

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: |
          npm install

      - name: Build applications
        run: |
          nx build frontend
          nx build backend

      - name: Run tests
        run: |
          nx test frontend
          nx test backend

9. 总结

通过使用 Nx 和 Monorepo，你可以在一个统一的工作区中高效管理 Next.js 和 NestJS 应用，并且能够共享公共代码（如数据模型、接口定义等）。同时，Nx 提供了强大的构建、测试和部署功能，可以极大地提高开发效率和项目维护的灵活性。

完整步骤回顾：

  1. 初始化 Nx 工作区。
  1. 创建 Next.js 和 NestJS 应用。
  1. 创建共享库来管理前后端共享代码。
  1. 安装并配置第三方库（如 Axios、TypeORM 等）。
  1. 启动并构建前后端应用。
  1. 配置 CI/CD 自动化流程。
通过这种方式，你可以确保代码的高效共享、版本一致性和应用的高效开发。
Copyright 2025 JY