Turborepo에 대한 간략한 소개

이 글은 2022.05.12일을 기준으로 작성되었습니다.

학습하게 된 계기

• 몇 분 씩이나 진행되는 frontend 빌드 속도 개선을 할 수 있을까?
• 개발 단계에서 개발중이지 않은 다른 페이지가 재빌드되는 것 방지할 수 있을까?

필요 지식

이미지 출처: https://levelup.gitconnected.com/moving-from-multiple-repositories-to-a-lerna-js-mono-repo-faa97aeee35b

모놀리식: 하나의 repository 에 모든 프로젝트를 넣어 한꺼번에 관리하는 방식멀티레포: 하나의 repository 에 하나의 프로젝트를 가지고 있는 구조. 각 프로젝트는 독자적인 영역을 갖고 다른 repo에 영향이 미치지 않도록 설계됨
모노레포: 하나의 repository에 서로 다른 프로젝트를 관리하는 방식

모노레포는 모놀리식과 멀티레포의 장점을 모두 얻고자 등장하였다.

• 모든 코드를 하나의 repository에서 설정 및 관리 가능
• 여러 프로젝트 팀 간의 협업이 쉬움
• 배포나 빌드, 테스트같은 작업을 병렬로 한 번에 처리 가능

수 많은 Monorepo 도구들

참고: https://monorepo.tools/ / https://2021.stateofjs.com/ko-KR/libraries/monorepo-tools/

로컬 캐싱, 분산 캐싱, 프로젝트/패키지 감지, 종속성 그래프 시각화, 소스 코드 공유 등
굉장히 많은 것을 지원하는 Nx.
하지만 Nx와 Turborepo는 서로 다른 철학을 가지고 있다.

• Turborepo는 패키지에 중점
• Nx는 많은 경량 프로젝트에 중점

패키지 중심으로 repo들을 관리하는 turborepo가 비교적 쉬운 설정과 캐싱에 대한 자신감과 자체적으로 가진 병렬 빌드 기능이 있어서 turborepo에 먼저 집중하게 되었다.

nx는 그저 또 다른 솔루션입니다. 많은 사람들은 nx, nx, nx가 대단하다고 이야기합니다. 저는 다른 도구를 사용하는데 플러그인이 필요하지 않는 좀 더 가벼운 무게를 가진 모노레포를 원했습니다. 다른 모노레포들과 큰 차이점은 터보는 앱을 5분안에 실행시킬 수 있고 기존 모노레포 프로젝트에 점진적으로 적용할 수 있습니다.
- Turborepo 개발자 Jared Palmer -

Turborepo

https://turborepo.org/blog/turbo-1-1-0

https://turborepo.org/docs#why-turborepo

Turborepo는 Javascript/Typescript monorepo를 위한 고성능 빌드 시스템이다. 이러한 Turborepo의 기본 원칙은 한 번 수행한 작업은 다시 수행하지 않는 것이다.

Turborepo 9가지 특징

1. Incremental builds
이미 빌드된 내용은 turborepo가 캐시해놓았기 때문에 다시 빌드하지 않습니다.

2. Content-aware hashing
타임스탬프가 아닌 콘텐츠(The contents of your files)를 인식하여 모든 파일을 다시 빌드하는게 아니라 변경된 파일만 빌드합니다.

3. Cloud caching (현재 beta)
빌드 파일을 클라우드에 올려 팀원들이나 CI/CD에서 공유합니다. 로컬 뿐만 아니라 클라우드 환경을 통해 빌드 캐싱을 지원합니다.

4. Parallel execution
모든 코어를 사용하여 최대한 병렬 처리를 하여 작업을 진행합니다.

5. Task pipelines
Task 간의 관계를 정의한 다음 빌드를 언제 어떻게 실행할지 최적화합니다.

6. Zero runtime overhead
런타임 코드와 소스 맵을 다루지 않습니다.

7. Pruned subsets
빌드에 필요한 요소만으로 모노레포의 하위 집합을 생성해 PaaS 배포 속도를 높입니다.

PaaS (Platform-as-a-service)
클라우드에서 제공되는 완전한 개발 및 배포 환경.

8. JSON configuration
JSON으로 Turborepo를 설정해 사용할 수 있습니다

9. Profile in your browser
빌드 프로필로 빌드 과정을 시각화하면 어떤 작업이 가장 오래 걸리는지 파악할 수 있습니다.

따라해보기

빠르게 turbo 시작하기

> npx create-turbo@latest <folder_name>

create-turbo 폴더 구조

Turborepo 캐싱 체험하기

> npm run build

첫 빌드 속도

첫 빌드가 성공하고 다시 빌드를 시도해보면 캐싱을 통해 다시 빌드를 하지 않는다는 것을 알 수 있다.

만약 web/ 의 코드를 일부 바꾼다면?

web 은 코드가 변경되었으니 다시 빌드해주고 변경된 것이 없는 docs는 캐시되어있는 것을 그대로 불러온다.
/node_modules/.cache 를 보면 캐시된 파일들을 hash로 구분된 폴더로 보관하고 있음을 볼 수 있다.

Turborepo 원격 빌드 사용해보기

npx turbo login

위 명령어를 통해 vercel에 로그인합니다.

npx turbo link

로그인이 정상적으로 완료되었으면 위 명령어를 통해 원격 캐시를 할 수 있도록 연결해줍니다.

원격 캐시를 사용하기 위해서는 한 번 build를 해줄 필요가 있어서 빌드를 해주고 아래 명령어를 진행합시다

rm -rf ./node_modules/.cache/turbo

로컬에 있는 캐시를 제거합니다.
그 후 빌드를 다시 해주면 굉장히 빠르게 빌드가 완료되는 것을 보실 수 있습니다.

Turborepo가 그려주는 의존성 그래프 시각화

• graphviz 설치가 필수기 때문에 반드시 설치하고 진행합시다.

> npm run build --graph
# 안된다면 아래에 있는 내용을 시도해보자.

# package.json
{
  ...,
	"scripts": {
		"make-graph": "turbo run build lint --graph",
		...
	}
}

-----

> npm run make-graph

turborepo로 의존성 그래프 시각화한 이미지

결론

• Vercel에 인수되긴 했지만 2021-12 에 출시가 되어서 자료가 많지 않다.
• Turborepo의 캐싱 기능을 이용하면 빌드에 시간을 허비하는게 확실히 줄어들 것 같긴 하다.
• 현재 상황에서 숨고 디자인 시스템이나 deploy 코드, e2e 정도는 분리가 가능해보이지만 package 기준으로 프로젝트를 판단하기 때문에 프로젝트별로 분리를 시켜줘야 개발 중이 아닌 페이지들이 재빌드가 일어나지 않을 듯 보인다.

References

• https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo/#3
• https://d2.naver.com/helloworld/7553804#ch3
• https://nx.dev/guides/turbo-and-nx
• https://monorepo.tools/
• https://youtu.be/YX5yoApjI3M

HDD 방지용 아티클

• https://tolgee.io/blog/turborepo-overhyped