pnpm 모노레포 구성하기

Next.js 15와 TypeScript를 사용하고, 패키지 매니저로 pnpm을 활용하여 모노레포를 구성해보자.

 

보통 이러한 설정은 여러 사이트를 포함하는 apps 폴더와 디자인 시스템 등을 담는 packages 폴더로 구성한다.

 

1. 프로젝트 초기화 및 pnpm 설치

   먼저, 프로젝트 루트를 생성하고 pnpm을 설치한다.

mkdir my-monorepo
cd my-monorepo
npm install -g pnpm
pnpm init

 

 

2. pnpm 워크스페이스 설정

 

루트에 pnpm-workspace.yaml 파일을 만들고, apps와 packages 폴더를 워크스페이스로 지정한다.

packages:
  - 'apps/**'
  - 'packages/**'

 

3. 디렉토리 구조 설정

 

 

apps와 packages 폴더를 만들고, 각 폴더 내에 필요한 프로젝트를 추가한다.

mkdir apps packages
mkdir apps/site1 apps/site2
mkdir packages/design-system

4. 각 프로젝트 초기화 및 의존성 설치

 

각 프로젝트 폴더에서 package.json을 초기화하고 필요한 의존성을 설치한다.

cd apps/site1
npx create-next-app@latest

cd apps/site2
npx create-next-app@latest

cd packages/design-system
mkdir something-my-dirs
pnpm init
pnpm add styled-components

 

5. 공통 의존성 관리

모노레포에서는 루트에서 공통 의존성을 관리할 수 있다.

 

예를 들어, ESLint와 Prettier를 루트에 설치하여 모든 프로젝트에서 사용할 수 있도록 할 수 있다.

 

pnpm add -w eslint prettier

이렇게 하면 각 프로젝트에서 별도로 설치할 필요 없이 공통 설정을 공유할 수 있다.

 

 

6. 프로젝트 간 의존성 설정

 

 

packages 내의 패키지를 apps 내의 프로젝트에서 사용하려면, 해당 패키지를 의존성으로 추가한다.

 

예를 들어, site1에서 design-system을 사용하려면 다음과 같이 설정한다.

cd apps/site1
pnpm add @my-monorepo/design-system --filter site1

 

이렇게 하면 site1 프로젝트에서 design-system 패키지를 로컬 의존성으로 사용할 수 있다.

 

또한 심볼 링크로서 단순 복제가 아니다.

 

7. 빌드 및 실행

 

각 프로젝트의 package.json에 빌드 및 실행 스크립트를 정의하고, pnpm을 통해 실행한다.

 

예를 들어, site1의 package.json에 다음과 같이 스크립트를 추가한다.

 

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
}

 

그러면 루트에서 다음 명령어로 site1을 실행할 수 있다.

pnpm --filter site1 dev