[CI] TurboRepo를 이용해서 monorepo 환경 구축하기+vercel 배포까지 (기초)

개요

개발환경 구축하는 거에 나름 스트레스를 갖고 있었다. 왜냐면, 일전에는 시니어 개발자가 세팅해준 환경아래서 코드를 수정하고 작업해왔었으니까.

그래서, 시도해보기로 했다.

글을 찾아보니까 yarn workspace -> Turborepo로 트렌드가 이동 중인 것을 확인하였다.

그래서, Turborepo를 사용하기로 하게 되었다.

 

과정

1. node 설치 (생략)

2. pnpm 설치

- yarn or npm 으로 해도 무방하나, turbo에서 pnpm 사용할 것을 권장하고 있음

npm install -g pnpm

3. create-turbo 을 이용해서 모노레포 설치

pnpm dlx create-turbo@latest

참고 : https://turbo.build/repo/docs/getting-started/create-new

3. root folder 명, package manager 선택

4. 아래와 같이 나오면 성공

5. app 추가 하는 방법

- apps 폴더로 이동

pnpm create next-app

위와 같이 작성하면, CNA 가 추가된다.

 

6. 단일 앱 실행 방법

root folder로 이동해서, package.json 에 script를 확인해서 dev를 실행해보면,

설치되어 있는 apps 전체가 실행되는 것을 볼 수 있다.

처음 root folder 에서 아래 명령어를 실행하면,

 pnpm dev

위와 같이 2개의 app이 실행된다.

단일 앱을 실행하기 위해서는,

root folder의 package.json > script 명령어를 수정해야 한다.

{
  "private": true,
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "dev:web" : "turbo run dev --filter=web",  // 이렇게 filter로 app name을 추가한다.
    "dev:practice" : "turbo run dev --filter=practice",
    "lint": "turbo run lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\""
  },
  "devDependencies": {
    "eslint": "^8.48.0",
    "prettier": "^3.0.3",
    "tsconfig": "workspace:*",
    "turbo": "latest"
  },
  "packageManager": "pnpm@8.6.10",
  "name": "practice-turbo"
}

script 수정 후, 아래와 같이 root folder에서 실행되면 성공!

내용 설명

apps > web > app > page.tsx 파일을 보면, packages > ui 에 있는 Card 컴포넌트를 import해서 사용하는 것을 볼 수 있다.

공통 패키지를 사용해서 monorepo 형태로 구축된 것을 볼 수 있다.

packages 안에 디자인시스템이나, util 같은 것들을 구축해놓고 호출해서 사용하면 되겠다.

+Vercel 배포

1. github에 전체 프로젝트 파일 업로드 (생략) 

참조 경로 : https://github.com/yoonjong-park/practice-turbo

2. Vercel 생성 및 배포

vercel 가입 후, project 추가한다

github 계정 연결 후, 업로드한 repo를 import한다.

 

배포할 app 선택

apps 내에 있는 폴더를 선택하면 된다.

별다른 설정없이 Deploy 버튼 클릭!

Deploy 과정을 구경한다.

화면을 클릭하면 Deploy(배포)를 마친 사이트에 접속한다.

결론

생각보다 간단한 구조로 되어 있었다. 의외로 시도해보면, 결과를 빠르게 얻을 수 있는 것 같다.

너무 많이 쫄았던 건 아닐까...반성한다.

 

향후 과제

1. nest.js 로 백엔드를 구축하고 나서 배포하는 것도 찾아봐야겠다.

2. github action 도 좀 알아볼까?

3. jenkins 를 직접 구축하는 것과 대비해서 장단점도 알아보면 좋겠다.

4. 실제 상용서비스에서는 어떤 방식이 유효할까?

 

참고

https://nextjs.org/docs/pages/api-reference/create-next-app

API Reference: create-next-app | Next.js

https://turbo.build/repo/docs/getting-started/create-new

Getting Started with Turborepo – Turborepo

https://dev-scratch.tistory.com/161

[Monorepo] Turborepo를 사용하여 모노레포 구축하기

https://velog.io/@kandy1002/Turborepo%EB%A1%9C-%EB%AA%A8%EB%85%B8%EB%A0%88%ED%8F%AC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0

Turborepo로 모노레포 프로젝트 구성하기