모노레포 세팅하기 - yarn workspace

모노레포 란?

두 개 이상의 프로젝트 코드가 동일한 저장소에 저장되는 소프트웨어 개발 전략입니다.

하나의 레포지토리에서 코드가 관리되지만, 모듈별로 독립적인 프로젝트를 구축할 수 있습니다.

의존성 패키지가 하나의 레포지토리에서 관리되어 프로젝트 호환성과 배포 프로세스 등 관리 포인트가 줄어든다는 장점이 있습니다.

이번 토이프로젝트에서는 프론트(next.js)와 백엔드(nest.js) 모듈을 모노레포로 구성해보려합니다.

 

Yarn 설치 & init

npm install -g yarn

cd repository_name

yarn init

node.js 모노레포 도구로는 yarn과 lerna가 많이 사용됩니다.

저는 yarn의 내장기능인 workspace 를 사용해 모노레포를 구성하겠습니다.

{
  "name": "forbody",
  "version": "1.0.0",
  "main": "index.js",
  "author": "kang jiin",
  "license": "MIT"
}

init이 끝나면 위와같이 package.json 파일이 생성됩니다.

 

worktree 선언

worktree를 구성하는 workspace의 위치를 루트 디랙토리의 package.json에 glob 패턴의 배열로 나타냅니다.

방식 1 - 각각 선언

workspace의 폴더명을 각각 입력합니다.

방식1 보다는 방식2를 더 많이 사용합니다.

{
	...
	"workspaces": [
    	"client",
        "common",
        "server",
        ...
    ]
}

방식 2 - packages 폴더 하위 모두

packages 폴더 내의 모든 폴더를 workspace로 지정합니다.

이후에 packages 폴더 하위에 모듈이 추가되더라도 따로 수정할 필요가 없습니다.

{
	...
	"workspaces": ["packages/*"]
}

 

workspace 생성

packages 하위에 client, common, server 폴더를 생성합니다.

저는 다음과 같이 설정할 예정입니다.

• client : 프론트 모듈, next.js 사용
• commom : 프론트&백에서 모두 사용될 유틸성 코드
• server : 백엔드 모듈, next.js 사용

각 모듈별 세팅은 멀티레포와 동일하게 진행하시면 됩니다.

next.js 세팅 : https://jane-aeiou.tistory.com/118

 

yarn berry 설정

node_modules가 아닌 pnp를 사용하기 위해 yarn berry설정을 해주었습니다.

모노레포에서 node_modules 방식은 의존성 탐색이 느리기 때문에 PnP를 많이 사용합니다.

설정은 레포지토리 루트에서 yarn set version berry 명령어를 입력합니다.

 

workspace 의존성 설정

client와 server 패키지에서 common 패키지을 사용할 수 있도록 의존성 설정을 하겠습니다.

client와 server 패키지에 각각 yarn workspace 명령어를 사용합니다.

yarn workspace client add common@1.0.0 
yarn workspace server add common@1.0.0

client의 package.json 파일에 아래와 같이 common이 추가되었습니다.

 

workspace 의존성 확인

확인용 테스트 코드를 다음과 같이 작성합니다

// common/index.js

module.exports = {
  test () {
    console.log("test");
  }
};

// server/package.json
// test script 추가

{
  "name": "server",
  "packageManager": "yarn@3.4.1",
  "scripts": {
    "test": "node test.js"
  },
  "dependencies": {
    "common": "1.0.0"
  }
}

// server/test.js

const common = require("common");
common.test();

코드 작성 후 루트 디렉토리에서 다음 명령어 입력 시 test가 콘솔에 찍히면 정상적으로 연결된 것입니다.

yarn workspace server test

 

typescript 설정하기

다음시간에~~

 

참고

https://www.testbank.ai/42b54c4b-2aa7-4bc7-b29b-b7219c700f22

https://medium.com/@designdevelop/yarn-workspaces-%EB%AA%A8%EB%85%B8%EB%A0%88%ED%8F%AC-%EB%8F%84%EC%9E%85%EA%B8%B0-c0310ca41c0e

https://d2.naver.com/helloworld/7553804

https://spookyjelly.tistory.com/80