monorepo로 변경

monorepo로 변경하기

turbo 설치

nest와 react를 동시에 배포하기 위한 관리 도구인 turbo를 설치해줍니다.

yarn add turbo 

루트 디렉토리 내부에 apps라는 디렉토리를 생성합니다.

그리고 이 apps 디렉토리를 package.json에 workspace로 등록합니다.

package.json

{
  "dependencies": {
    "turbo": "^2.3.0"
  },
  "private": true,
  "workspaces": [
    "apps/*"
  ]
}

이 apps 디렉토리 안에 backend, frontend 디렉토리를 만들어서 기존 프로젝트들을 넣어줍니다.

그리고 루트 디렉토리에서 패키지를 설치합니다.

yarn install 

루트의 package.json에 dev script를 작성합니다.

package.json

{
  "scripts": {
    "dev": "turbo run dev"
  },
  "dependencies": {
    "turbo": "^2.3.0"
  },
  "workspaces": [
    "apps/*"
  ],
  "packageManager": "[email protected]"
}

추가로 turbo.json에도 각 workspace 내부 package.json에 dev 명령어 파이프라인을 만들어야 합니다.

프록시

개발 서버에서 프론트와 백엔드의 포트 번호가 다르기 때문에 CORS 정책에 의해 통신이 되지 않습니다.

서버에서 origin을 허용해도 되지만 그냥 프론트에서 프록시 서버를 설정하는 편이 편합니다.

frontend/vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  css: {
    postcss: {
      plugins: [tailwindcss()],

    },
  },
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true
      }
    }
  }
});

5173번 포트에서 돌아가는 프론트 서버의 요청을 3000번 포트로 바꾸어서 CORS 에러를 피합니다.

(그런데 vite.config.ts가 반영이 안되는 것 같네요... 그냥 직접 등록하겠습니다.)

그리고 백엔드 서버의 api 주소 앞에 api를 붙여줍니다.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { HttpExceptionFilter } from './filter/http-exception.filter';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { WsAdapter } from '@nestjs/platform-ws';
import * as dotenv from 'dotenv';
dotenv.config();

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  app.useWebSocketAdapter(new WsAdapter(app));
  app.useGlobalFilters(new HttpExceptionFilter());
  app.setGlobalPrefix("api");
  
  const config = new DocumentBuilder()
    .setTitle('OctoDocs')
    .setDescription('OctoDocs API 명세서')
    .build();
  console.log(process.env.origin);
  const documentFactory = () => SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, documentFactory);
  app.enableCors({
    origin: process.env.origin
  });
  await app.listen(3000);
}
bootstrap();

빌드 환경

react를 빌드한 뒤 생성된 정적 파일을 nest에 포함시키는 과정입니다.

turbo.json

{
    "$schema": "https://turbo.build/schema.json",
    "tasks": {
        "dev": {
            "cache": false
        },
        "build": {
            "dependsOn": [
                "^build"
            ],
            "outputs": [
                "dist/**"
            ]
        }
    }
}

root package.json에도 build를 작성해줍니다.

{
  "scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build"
  },
  "dependencies": {
    "turbo": "^2.3.0"
  },
  "private": true,
  "workspaces": [
    "apps/*"
  ],
  "packageManager": "[email protected]"
}

마찬가지로 각 workspace에도 build 스크립트가 존재해야 합니다.

nestjs 정적 파일 제공

이제 nestjs에서 리액트에서 빌드한 정적 파일들을 제공할 수 있는 설정을 해야 합니다.

백엔드 디렉토리 내부에 @nestjs/serve-static 패키지를 설치합니다.

yarn add @nestjs/serve-static

root의 package.json에 dist 디렉토리 내부의 main.js를 실행하도록 합니다.

{
  "scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build",
    "start": "node apps/backend/dist/main.js"
  },
  "dependencies": {
    "turbo": "^2.3.0"
  },
  "private": true,
  "workspaces": [
    "apps/*"
  ],
  "packageManager": "[email protected]"
}