Lerna + Nx 로 Monorepo 프로젝트 만들기

개요

최근 Lerna 가 Nx 의 Nrwl 에 인수된 이후 많은 변화가 있었다.

그동안 Lerna 가 관리가 되고 있지 않아서, Nextjs 를 만들고 관리하는 Vercel 의 Turborepo 를 사용했었다.

그러던 중 2022년 10월 초에 Lerna v6 가 발표되었고, Nx 의 일부 기능이 내장되어 속도가 많이 빨라졌다.

그래거 Lerna 와 Nx 를 사용을 해보기로 한다.

계획

Lerna 를 처음부터 설정해보기 위해, 프로젝트 생성과정부터 작성한다.

작업순서는 아래와 같다.

Lerna 를 이용하여 프로젝트 폴더 생성

Nx 활성화

Yarn 의 Berry 버전 활성화 및 P’n’P 적용

코드 이전 및 재작성

그리고 실제로 작업하려는 환경은 다음과 같다.

Lerna + Nx

Yarn 3+ (Berry version)

Typescript

NextJS

VSCode 사용

💡

VSCode 를 사용하는 이유에 특별함이 없으며, Yarn berry 버전 적용할 때 IDE 에서 Node Package Manager 를 변경해주어야 하기에 참고자료로 작성한다.

프로젝트 워크스페이스 셋업

Lerna 로 프로젝트 생성

lerna 를 설치해서 사용해도 무방하다. 하지만, npx 를 사용하는 것이 더 편할 것이다.


(bash)
mkdir project && npx lerna init

Nx 활성화 및 Node Package Manager 를 Npm 에서 Yarn 으로 변경

1. lerna.json 파일 수정

프로젝트 root 폴더에 lerna.json 파일이 생성되어 있을 것이다.

해당 파일을 수정할 것이다.


(json)
{
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "version": "independent",
  "npmClient": "yarn",
  "useNx": true,
  "useWorkspaces": true
}

Line 3 : version 을 independent 로 바꾸어 주지 않아도 무방하다.

Line 4 : Yarn 사용을 명시한다.

Line 5 : Nx 사용을 명시한다.

2. Nx 활성화


(bash)
npx add-nx-to-monorepo

3. Yarn set berry 버전 적용 및 P’n’P 활성화

아래 명령어를 이용하여 berry 버전을 활성화 시켜준다.


(bash)
yarn set berry && yarn

VSCode 에서 프로젝트 활성화

아래 사이트를 참고하면, 각 Editor 마다 SDK 를 적용할 수 있도록 문서화가 잘 되어있다.

Editor SDKs

Smart IDEs (such as VSCode or IntelliJ) require special configuration for TypeScript to work when using Plug'n'Play installs. This page intends to be a collection of settings for each editor we've worked with - please contribute to this list! The editor SDKs and settings can be generated using yarn dlx @yarnpkg/sdks (or yarn sdks if you added @yarnpkg/sdks to your dependencies).

https://yarnpkg.com/getting-started/editor-sdks

그 중 우리는 VSCode 에 알맞는 SDK 를 설치할 것이다.


(bash)
yarn dlx @yarnpkg/sdks vscode

💡

주의! root 폴더에서 eslint, prettier 등을 먼저 설치한 이후, 위 sdks 를 활성화 시켜주어야 제대로 동작할 것이다.

VSCode 에서 ZipFS 플러그인 설치

pnp 환경을 위해서 필요한 도구이다.

조금 더 자세히 설명을 하자면, pnp 환경에서는 패키지를 zip 파일로 묶어서 관리한다. 그래서 이것을 IDE 에서 문제 없이 사용하려면 아래와 같은 플러그인이 필요하다.

Typescript 적용

여기서부터 많은 분들이 좌절하는 구간이다. 하지만, 몰라서 그렇다. 알고나면 쉽게 설정할 수 있다.

1. 전체 프로젝트를 위한 Typescript 설치


(bash)
yarn add -D typescript

2. VSCode 에서 Typescript 버전 선택

VSCode 의 예시이며, 다른 IDE 에서도 이와 비슷하게 Node Client 나 Node Package Manager 를 변경할 수 있다.

NextJS App 및 Packages 생성

특이사항은 없다.

next-web 은 NextJS 프로젝트를 생성할때와 같이 직접 생성하면 된다.

react-ui 역시 React Module 생성하듯이 생성하면 된다.

그리고 프로젝트 root 폴더에 tsconfig.json 파일 작성할 때 references 옵션을 활용하면 좋다.

Packages / Module 관리

노드 모듈과 패키지는 Yarn 을 이용하여 관리하는 것을 추천한다.

Yarn 에는 workspace 라는 기능이 있다. 이를 적극적으로 활용하여 패키지를 설치하고 관리하자.


(bash)
yarn workspace react-ui add -D @types/react && \
	yarn workspace next-web add -D @types/react

Lerna 을 이용한 프로젝트 테스트와 빌드

💡

주의! Lerna 를 이용하면, 패키지를 링크시키고 관리하기 위해서 lerna bootstrap 을 사용했었다. 하지만, 우리는 Yarn 을 이용한다. 그래서 이를 사용할 필요가 없다.

패키지는 Yarn 을 이용하여 관리하지만, 테스트와 빌드는 Lerna 를 이용할 것이다.


(bash)
npx lerna run test && \
	npx lerna run build

만약, next-web 만 빌드하고 싶다면 --scope=next-web 옵션을 이용하면 된다.


(bash)
npx lerna run build --scode=next-web