turborepo로 모노레포 구성하기

최종 디렉토리 구조

├── yarn.lock
├── package.json          # 루트 package.json 파일
├── turbo.json            # turborepo 설정 파일
├── node_modules          
└── packages
    ├── client            # React 앱
    │   └── package.json
    └── server            # Nest.js 서버
        └── package.json

설치

Script

yarn add turbo

Result

├── yarn.lock
├── package.json          # 루트 package.json 파일
└── node_modules          

turbo.json

• 루트에 turbo.json 파일 생성

{
  "$schema": "https://turbo.build/schema.json",
  "ui": "tui",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "dev": {
      "dependsOn": ["build"]
    },
    "lint": {
      "outputs": []
    },
    "test": {
      "outputs": []
    },
    "start": {
      "dependsOn": ["build"]
    }
  }
}

🚀 turbo는 tasks 대신 pipeline을 사용한다 ! tasks를 사용하면 parse error 발생 !

설명

$schema

• 이 항목은 JSON 스키마의 URL을 나타내며, Turborepo가 이 설정 파일을 검증하는 데 사용

ui

• turborepo 출력 UI 를 지정.
• tui 로 설정하면, GUI가 표시된다.

pipeline

• 작업(작업의 이름과 의존성 등)을 정의하는 객체

dependsOn

• 이 작업이 실행되기 전에 어떤 작업이 완료되어야 하는지.
• "^build"는 모든 하위 작업공간에서의 build 작업이 완료되어야 한다는 의미.
• 즉, 이 작업은 루트 작업공간에서의 build 작업이 먼저 수행되어야 한다는 것

outputs

• 이 작업의 결과물이 어디에 생성되는지.
• ["dist/**"]는 dist 디렉토리 내의 모든 파일과 서브디렉토리(모든 빌드 결과)를 포함한다는 의미

globalDependencies

• 모든 tasks 에 영향을 주는 공통적인 의존성 파일을 지정.
• 이 목록의 파일을 변경하면, 모든 태스크의 캐시가 무효화.

globalPassThroughEnv

• Turborepo 가 캐시 키를 생성할 때 이 목록의 환경 변수는 무시
• 즉, 이 값들이 변경되어도, 캐시가 유지

Result

├── yarn.lock
├── package.json          # 루트 package.json 파일
├── turbo.json            # turborepo 설정 파일
└── node_modules          

package.json 설정

• 루트의 package.json 설정

{
  "private": true,
  "workspaces": ["packages/*"],
  "scripts": {
    "start": "turbo run start",
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint",
    "test": "turbo run test"
  },
  "devDependencies": {
    "turbo": "^1.0.0"
  }
}

설명

private

• 이 패키지가 공개적으로 배포되지 않도록 하는 플래그
• true가 설정되면, 이 패키지는 npm 레지스트리에 배포되지 않음.
• monorepo 프로젝트에서는 이 설정을 사용하여 실수로 패키지가 공개되는 것을 방지

workspaces

• ["packages/*"]는 packages 폴더 안에 있는 모든 서브 폴더(패키지)를 작업공간으로 포함시킨다는 의미

scripts

• 이 항목은 커맨드 라인에서 실행할 수 있는 스크립트 명령어를 정의
• 각 스크립트는 특정 작업을 수행하는 명령어를 포함

devDependencies

• 개발 환경에서만 필요한 의존성을 정의

packages

• package.json의 workspace 필드에 설정한 이름의 폴더를 생성
• 하위에 관리하고자 하는 프로젝트 생성 (ex/ client, server etc)

Result

├── yarn.lock
├── package.json          # 루트 package.json 파일
├── turbo.json            # turborepo 설정 파일
├── node_modules          
└── packages
    ├── client            # React 앱
    │   └── package.json
    └── server            # Nest.js 서버
        └── package.json

client (react)

1. react 프로젝트 생성

cd packages/client
npx create-react-app . --template typescript

1. client의 package.json에 lint script 추가

{
	...
  "scripts": {
	  ...
    "lint": "eslint src --ext .ts"
  }
}

server (nest)

1. nest 프로젝트 생성

cd packages/server
npx @nestjs/cli new . --package-manager yarn

1. .git 삭제

port 설정

• react와 nest 모두 3000번 포트를 사용하므로, 이를 변경해줘야 한다.
• 일단은 react의 port를 3001로 변경해주자.

{
  ...
  "scripts": {
	  ...
    "start": "PORT=3001 react-scripts start"
  },
}

실행

yarn start