Turborepo

Turborepo

자바스크립트 및 타입스크립트 코드베이스를 위한 고성능 빌드 시스템

빌드 과정에서의 성능 향상을 위해 로컬 캐시, 리모트 캐시, 병렬 실행 등의 기능을 쉽게 사용할 수 있도록 제공

특징

• vercel 에서 인수한 빌드 시스템 도구

• 모노레포 기능도 지원하며 다른 패키지 매니저 워크스페이스와 함께 사용이 가능하다.

• 모노레포 환경에서도 쉽고 빠르게 개발할 수 있는 빌드 환경을 제공하는 것이 목표

• 루트 워크스페이스 또는 각 워크스페이스에 turbo.json 이라는 파일을 이용해서 캐싱과 테스크 오케스트레이션을 설정한다.

테스크 오케스트레이션(Task Orchestration)

• 오케스트레이션이란 다양한 단계를 수반하는 프로세스 또는 워크플로우를 자동화하는 방식을 뜻함

• 여러 작업이나 태스크를 효과적으로 조율하고 실행

• 여러 작업을 자동화하고, 작업 간의 의존성을 관리하며, 실행 순서를 최적화하여 개발 프로세스를 단축시킨다.

장점

• 사용자가 빌드한 내용을 기억해서 이미 계산한 내용은 건너뜀 (테스크 설정 기본값이 캐싱 허용)

• 타임스탬프가 아닌 파일의 내용을 보고 빌드해야 할 내용을 파악한다.

• 쉬고 있는 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/ui

Remote 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-utils

typescript 추가

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 build

workspace 의존성 추가

// 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 build

build 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

• Github

• Notion

Remote Cache

Remote Caching – TurborepoTurbo

Using Turborepo with GitHub Actions – TurborepoTurbo

Graph

• graphviz 설치

  • https://formulae.brew.sh/formula/graphviz

turbo run – TurborepoTurbo