Turborepo 모노레포 적용하기

배경

맡고 있는 프로젝트가 Electron, React로 개발된 데스크탑 애플리케이션으로 초기에 모놀리식 아키텍처로 개발 되었다. 혼자 진행하던 프로젝트라서 모놀리식 구조를 유지하였다.

모놀리식 아키텍처는 단일 코드 베이스의 애플리케이션 구조를 의미한다. 프로그램의 전통적인 구조로 모든 기능이 하나로 결합되어 있으며 타 애플리케이션과 독립적인 것이 특징이다. 프로젝트가 통합되어 있어 단순하며 보편성이 장점이다. 하지만 규모가 커졌을 경우 복잡도로 인해 유지 보수 및 유연한 확장이 어려울 수 있다.

 

하지만 UI 변경이 있을 때마다 앱을 새로 빌드하고 배포하는 과정이 비효율적이었다. 반복되는 작업이 점점 번거로워지면서, Electron과 React 코드를 분리해 멀티레포 방식으로 전환했다. React 앱은 S3(CloudFront)에 배포하고, Electron의 Renderer 컨텐츠를 loadFile에서 loadURL 방식으로 변경했다. 전환 후 Electron 배포 주기가 늦어지며 불필요한 작업이 줄어들어 굉장히 만족스러웠다.

 

하지만 공통으로 사용했던 코드를 각각의 저장소에 생성하고 수정해야하는 상황이 생겼다. 그래서 모노레포 아키텍처로 전환하는 것을 고려하게 되었다. 패키지 매니저의 workspace를 구성하여 모노레포 설정을 할 수 있지만, 최근 많이 사용되고 있는 Vercel의 Turborepo를 활용하였다. 이유는 설정이 간단하고, 작업 병렬화 및 캐시를 통한 중복 작업 최소화 기능이 매력적이었다.

 

기존 저장소들의 히스토리를 가져오기 위해 git subtree를 사용했다.

 

작업

pnpm 설치

# npm으로 설치
npm install -g pnpm

npm에서 pnpm으로 전환을 생각했었다. 하지만 Electron 프로젝트에서 사용 중인 Electron-builder 패키지가 pnpm을 공식적으로 지원하지 않아, 기존에 사용했던 npm을 유지하였다.

 

turborepo 설치

npx create-turbo@latest

 

main, renderer 프로젝트 추가

• git 명령어 정리

electron, react의 코드 history를 유지하기 위해서 git subtree를 사용하였다.

# main 원격저장소
git remote add main <git URL>

# renderer 원격저장소
git remote add renderer <git URL>

git fetch

# apps/main subtree
git subtree add --prefix apps/main main master

# apps/renderer subtree
git subtree add --prefix apps/renderer renderer master

 

기존 repository에 push

Electron git repository에 강제 push 하였다.

git push -u main develop --force-with-lease

 

결과

정상적으로 Electron, React 두 프로젝트가 monorepo로 구성되었다. 하나의 repository에서 두 프로젝트를 작업할 수 있으니 편했고, 앞으로 다른 프로젝트들이 생성되더라도 깔끔하게 관리할 수 있을 것 같아 만족스러웠다. 모노레포 구성은 turborepo를 사용하기도 했고, 인터넷에 정보가 많아 생각보다 어려움은 없었다. 다만, pnpm으로 전환하는 과정에서 사용 중이던 패키지들이 정상적으로 동작하지 않아 어려움이 있었고, vite 환경을 turbo로 구동했을 때 node 프로세스에서 정상적으로 Windows 레지스트리 값을 가져올 수 없는 상황들이 당황스러웠다. 그래도 git subtree에 대해 알게되고 사용해본 점과 성공적인 결과에 상당히 만족스러웠다.

 

이슈

turborepo envMode

Electron에서 node-machine-id 라는 패키지를 사용 중이었다. 해당 패키지는 Windows 레지스트리 키(MachineGuid, HKLM\SOFTWARE\Microsoft\Cryptography)를 uuid로 사용하고 있었다. 근데 turborepo를 사용하여 실행하니 해당 부분에서 command failed 에러가 발생했다.

 

turbo.json의 envMode 설정은 "strict" | "loose" 값을 설정할 수 있다. 기본 값인 "strict"에 의해 런타임 환경일 때 지정된 환경 변수만 사용이 가능하기 때문에 발생한 이슈로 이해했다. "loose"로 설정해주니 해당 이슈는 해결이 되었다.

 

# turbo.json
{
	"$schema": "https://turbo.build/schema.json",
 	"envMode": "loose",
 	...
}