여러가지 monorepo 도구들 중 대표적으로는 lerna, Turbo가 있습니다.
전 예제에서는 Lerna를 사용했으니 그대로 탐구해보도록 하겠습니다. . 🔍
Vercel에서 만든 최신 모노레포 도구인 Turbo Repo도 좋은 도구이기는 하나 Nx와 함께 사용되는 Lerna의 성능이 5배? 정도 좋다고 하니 한번 Lerna + Nx에 대해서 더 자세히 살펴보도록 하겠습니다.
예제 레포지터리:
GitHub - in-ch/react-common-library at lernanx사용법
일단 들어가기 전
먼저 monorepo가 무엇일까요?
모노레포는 여러 개의 프로젝트를 하나의 프로젝트로 묶어서 단일 저장소에 저장하고 관리하는 일종의 방법론(?)입니다.
좀 더 쉽게 말하면 저장소를 관리하는 측면에서 시스템, 혹은 프로젝트의 각 모듈을 개별 레포지토리(저장소)에서 관리할 것인지, 하나의 레포지토리에서 관리할 지에 따라서 멀티레포, 모노레포가 되는 것입니다.
당연히 각각 장단점이 있겠죠.
그래도 보통 라이브러리를 만들 때는 모노레포를 활용하게 됩니다. (코드와 공유와 재사용 용이 및 전체 코드가 트리 구조로 명확하게 보일 수 있으므로)
Lerna
Lerna 공식 문서에서는 다음과 같이 설명하고 있습니다.
Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository.
Lerna 기본 사용법
먼저 예제 레포지토리 공유드리도록 하겠습니다.
다운받으시고 살펴보시는 게 더 쉬워보일 수도 있습니다.
간단하게 Lerna의 기본 사용법을 알아보도록 합시다.
- 시작하는 법
npx lerna init 패키지의 로컬 참조를 위한 기본 제공 솔루션인 npm, yarn, pnpm 작업 영역을 사용하도록 workspace를 구성합니다.
(예제 레포지토리에서는 이미 package.json과 leran.json이 추가되어 있긴합니다. )
일단, package.json을 보면 다음과 같이 되어 있는 것을 볼 수 있습니다.
{
"name": "root",
"private": true,
"workspaces": ["packages/*"],
"devDependencies": {
"lerna": "6.5.1"
},
....
}참고로 예전에는
lerna bootstrap을 통해 작업 공간을 구축했으나 요즘에는 패키지 관리자에서 workspace솔루션이 내장되어 있으므로 lerna bootstrap 기능은 leran v7에서는 공식적으로 지원이 중단된다고 합니다.
이렇게 하시면 Lerna의 초기설정은 끝납니다. (아주 간단합니다..)
- 시각화
Lerna는Nx로 구동되므로npx nx graph을 통해 작업 공간 프로젝트 그래프의 시각화를 확인해 볼 수 있습니다.
package.json에 다음과 같이 추가하고 명령어를 실행시켜 봅시다.
...
"scripts": {
"test": "npx lerna run test",
"build": "npx lerna run build",
"version": "npx lerna version --no-private",
"push": "yarn build & yarn version",
"graph": "npx nx graph" // 추가
},
...- 실행 결과
두 프로젝트가 종속성 추가가 안되어 있어서 연결 선이 아무것도 없네요.
한번 종속성을 추가해보겠습니다.
/packages/common-library/package.json
...
"dependencies": {
"@mui/styles": "^5.11.12",
"@mui/x-data-grid": "^5.2.2",
"next": "^13.2.3",
"@in-ch/common-utils":"*"
}
...이제 종속성 추가를 완료하기 위해 설치를 진행합니다.
npm install
or
yarn이제 다시 yarn graph를 통해 확인해보면 종속성 추가가 완료되었다는 것을 시각적으로 확인해 볼 수 있습니다.
- 빌드
npx lerna run build각 package들을 빌드합니다.
병렬 구조로 @in-ch/common-components는 @in-ch/common-utils를 포함하고 있으므로 @in-ch/common-utils먼저 빌드하고
다음에 @in-ch/common-components를 빌드할 겁니다.
옳게 빌드하고 있네요.
- 캐싱
Lerna + nx는 가장 정교하고 실전 테스트를 거친 계산 캐싱 시스템을 보유하고 있습니다.
실행하려는 작업이 이전에 실행된 시기를 알고 있으므로 캐시를 사용하여 해당 작업 실행 결과를 복원할 수 있습니다. → build 시간 단축
npx lerna add-caching명령어를 실행하면 캐싱 처리를 할 스크립트를 설정할 수 있습니다.
저는 build, test만 설정했습니다.
그러면 다음과 nx.json 파일이 생성됩니다.
저는 build, test만 설정했습니다.
그러면 다음과 nx.json 파일이 생성됩니다.- 스코프 설정
명령어를 입력할 때 스코프 설정을 통해 test나 build할 때 특정 패키지만 명령어를 실행시킬 수 있습니다.
npx lerna run test --scope=@in-ch/common-components
npx lerna run build --scope=@in-ch/common-components- 배포하기
publish명령어를 통해 패키지들을 배포할 수 있습니다.
npx lerna publish --no-private- 캐시 공유
Nx Cloud를 활용해서 캐시를 여러 시스템에 분산시킬 수 있습니다. (무료입니다..!)
npx nx connect-to-nx-cloud끝 ... !!
참고
