Turborepo
Turborepo
자바스크립트 및 타입스크립트 코드베이스를 위한 고성능 빌드 시스템
빌드 과정에서의 성능 향상을 위해 로컬 캐시, 리모트 캐시, 병렬 실행 등의 기능을 쉽게 사용할 수 있도록 제공
특징
vercel 에서 인수한 빌드 시스템 도구
모노레포 기능도 지원하며 다른 패키지 매니저 워크스페이스와 함께 사용이 가능하다.
모노레포 환경에서도 쉽고 빠르게 개발할 수 있는 빌드 환경을 제공하는 것이 목표
루트 워크스페이스 또는 각 워크스페이스에
turbo.json이라는 파일을 이용해서 캐싱과 테스크 오케스트레이션을 설정한다.
장점
사용자가 빌드한 내용을 기억해서 이미 계산한 내용은 건너뜀 (테스크 설정 기본값이 캐싱 허용)
타임스탬프가 아닌 파일의 내용을 보고 빌드해야 할 내용을 파악한다.
쉬고 있는 CPU를 낭비하지 않고, 모든 코어를 최대로 사용해서 병렬로 실행
원격 빌드 캐시를 팀원 및 CI/CD와 공유하여 빌드 속도를 높힐 수 있다.
작업 간의 관계를 정의하여 turborepo가 빌드 항목과 시기를 최적화할 수 있다.
주요 기능
Running Tasks
테스크 수행
turbo run test // 각 워크스페이스의 'run test' 스크립트 실행
turbo run test --filter=특정워크스페이스 // 해당 워크스페이스의 스크립트 실행Task Dependencies
의존 관계에 따라 테스크 실행 + 병렬 실행
turbo run lint test build // lint, test, build 각 테스크가 모두 병렬로 실행됨의존 관계에 따라 먼저 수행되어야 할 것들을 판단하여 작업이 진행됨
의존관계만 잘 선언해준다면 터보레포가 알아서 잘 계산하여 처리해주기 때문에 속도 측면에서 일반 패키지 매니저보다 빠르게 수행할 수 있다.
Code Generation
코드(워크스페이스) 생성
turbo gen workspace // 빈 워크스페이스 생성
turbo gen workspace --name @jtwjs/uiRemote Caching
한쪽에서 리모트에 캐싱을 해두면 CI/CD 쪽에서 캐싱된 내용을 활용해서 속도가 향상됨
turbo login
turbo link // 버셀 클라우드를 사용해 쉽게 구현pnpm 실습
turborepo는 모든 패키지 매니저를 사용 가능하지만
pnpm을 사용하는 것을 권장한다.
pnpm 환경 세팅
mkdir turborepo-example
cd turborepo-example
pnpm init
corepack prepare pnpm@8.11.0 --activate
code .// pnpm-workspace.yaml
packages:
- 'packages/*'
- 'apps/*'mkdir apps
cd apps
pnpx create-next-app@latest
cd ..Turbo install
pnpm -w add turbo -D // 패키지 전역에 devDependencies로 turbo 설치workspace 추가
mkdir packages
pnpm exec turbo gen workspace --name my-utilstypescript 추가
pnpm --filter my-utils add typescript -D
pnpm --filter my-utils exec tsc --init // tsconfig.json
{
compileOptions: {
//...
"declaration": true, // 타입 정의 파일 생성하도록 설정
"outDir": "./dist" // 컴파일된 js 파일을 저장하는 디렉토리 설정
},
include: ["src/**/*"]
} // package.json
{
"name": "jtw-utils",
"version": "0.0.0",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"build": "tsc"
},
"devDependencies": {
"typescript": "^5"
}
}pnpm --filter my-utils buildworkspace 의존성 추가
// apps package.json
"dependencies": {
//...
"my-utils": "workspace:*"
},pnpm i turbo 명령어 사용하기
pnpm exec turbo build --filter=my-utils // pnpm과 달리 turbo는 '='를 붙히는것에 주의
turbo.json을 만들고 task를 정의 해주어야 터보 명령어를 사용할 수 있다.
// turbo.json
{
"$schema": "https://turbo.build/schema.json",
"pipeline": { // pipline은 일종의 task line
"build": {}
}
}
실패했던 명령어를 다시 입력해보면 정상적으로 실행되는것을 확인할 수 있다.
두 번째 실행부터는
cache되어 수행시간이 980ms -> 50ms로 단축된것을 확인할 수 있다.
모든 워크스페이스 명령어 실행
--filter를 작성하지 않으면 모든 워크스페이스를 돌면서 스크립트 실행
pnpm exec turbo buildbuild outputs 설정
{
"$schema": "https://turbo.build/schema.json",
"pipeline": {
"build": {
"outputs": ["./next/**", "!.next/cahce/**", "dist/**"]
}
}
}build 관계 설정하기
dependsOn설정을 통해 빌드할 때 의존하고 있는 것들에 관계를 설정할 수 있다.app의 코드만 변경된다면 의존하는 것들은 캐싱된 것을 사용하고 의존하는 것들에 변경사항이 생긴다면 캐싱없이 다시 빌드가 일어난다.
{
"$schema": "https://turbo.build/schema.json",
"pipeline": {
"build": {
"dependsOn": ["^build"], // 앞에 "^" 꺽쇠를 붙히면 의존하고 있는 모든 것을 빌드한다는 얘기
"outputs": ["./next/**", "!.next/cahce/**", "dist/**"]
}
}
}
워크스페이스 간 빌드 옵션을 다르게 설정하기
루트에 존재하는
turbo.json으로 한곳에서 관리한다면#을 통해 워크스페이스간 빌드 옵션을 다르게 설정할 수 있지만 워크스페이스가 많아지면 복잡해진다.두 번째 방법으로, 각 워크스페이스 간에
turbo.json을 작성하여 옵션을 다르게 관리할 수 있습니다. Turborepo에서 추가되는 기능들을 살펴보면 워크스페이스 상속 기능(예:turbo.json상속 등)의 처리 요소가 점점 더 추가되는 추세라 해당 방식을 사용하는 것을 추천
// root에 존재하는 turbo.json
{
"$schema": "https://turbo.build/schema.json",
"pipeline": {
"my-app#build": {
"dependsOn": ["^build"],
"outputs": ["./next/**", "!.next/cahce/**"]
},
"my-utils#build": {
"dependsOn": ["^build"],
"outputs": ["dist/**"]
}
}
}워크스페이스 개발 서버 띄우기
pnpm exec turbo dev --filter=my-app
마찬가지로
turbo.json에 dev 관련한 정의가 되어있지 않아 해당 명령어가 실패하여turbo.json에 추가로 정의해주어야 한다.개발 서버 실행은 캐싱이되면 안되므로
cache옵션을 false로 설정계속 실행해야하는 것들은 turborepo에서
cache: false,persistent: true설정을 추가할 것을 권장한다.
{
"$schema": "https://turbo.build/schema.json",
"pipeline": {
"my-app#build": {
"dependsOn": ["^build"],
"outputs": ["./next/**", "!.next/cahce/**"]
},
"jtw-utils#build": {
"dependsOn": ["^build"],
"outputs": ["dist/**"]
},
"my-app#dev": {
"cache": false,
"persistent": true
}
}
}Ref
Remote Cache
Graph
graphviz 설치
Last updated