개요

그 동안 제 개인 프로젝트는 모놀리스 형식으로 제작되었습니다. 그래서 그간 며칠간 Turborepo를 통해 MonoRepo 형식으로 프로젝트를 변경 해왔습니다.

이를 하게된 가장 큰 이유는 모노리스에선 새로운 프로젝트를 만들려니 기존 있던 패키지와 충돌이 일어나거나, n18n와 pwa 를 비롯한 기존 next.config 설정 내용들과 관련해 빌드나 테스트할 때 관련 문제가 생겼습니다.

사실 TurboRepo starter 앱을 받아보신 후 진행하면 꽤 수월하게 배포가 가능하지만, 원래 원래 있던 것을 바꾸는게 더 어렵습니다.

( Turburepo 로 바꾸면서, 어떤 문제가 있었는지는 추후에 프리퀄로 작성 해보겠습니다. )

잔여 이슈들

모노레포로 얼추 완성이 된 후 버셀에 배포를 해볼까 생각을 해보았는데 일부 잔여 이슈가 있었다. 그중 특히 환경변수가 문제였는데, 모노레포에서는 하위 앱 단위 내부에 .env.local 로 저장을 해야했는데 버셀에서는 최상위 .env 만 설정 가능하다.

이러한 문제에 대해 확인해본 결과 몇 몇 대안을 알게 되었다.
1. 앱 배포시 root_directory 를 apps/ 이하의 하위 패키지를 설정하여 배포
2. vercel 이 package.json 과 turbo.json 을 통해 모노레포임을 알게되면 이를 감지하여 여러개의 프로젝트로 생성해도록 해준다.

어떤 방법이든 모노레포를 버셀에서 운영하려면 프로젝트를 여러 개 생성해야함을 알게되었다.
만약 단일 서버에서 운영하려면 다른 방법을 써야할거같지만 일단 이번에는 버셀로 여러 프로젝트를 다뤄본다.

이로써 잔여이슈를 대응할때 수정할 것들은...

• 환경변수 설정.
• turbo.repo 와 각 apps 의 package.json.

잔여이슈 대응

환경변수

바로 진행 한 작업은 일단 .env.local 을 분리 한 후 turbo 명령 실행시 잘 작동하는지 테스트하는 일이다. 이미 위에 캡쳐처럼 분리는 진행하였고, 이제 build 를 실행해보려니

이처럼 환경변수를 읽지 못하는 문제가 발생하였다. 이 문제에 대해서 확인을 해봤는데 실행 주체는 turborpo 인데 얘는 하위 앱의 .env.local까지 읽는 건 가능한데 저장을 따로 해야 하위 앱에서 사용할 수 있다고 한다. https://vercel.com/docs/concepts/monorepos/turborepo#deploy-turborepo-to-vercel

그러므로 turbo.json 에서 사용할 환경변수를 "globalEnv" 라는 이름으로 아래처럼 추가해보았다.

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    ...
  },
  "globalEnv": ["DATA_GO_KEY", "FIREBASE_SERVICE_ACCOUNT" ...]
}

그 후 실행해보니 문제 없이 빌드가 성공하였고. 이제 이를 vercel 에 배포하기위해 git에 새로운 레포를 추가하였다.

하위레포

그런데 버셀에서 프로젝트를 추가하려니 NextJS 한 개로 인지하는 예상 밖의 일이 일어났다. 추측으로는 모든 패키지가 nextjs 와 react 를 사용하고 있어서 최상위 package.json 에 nextjs 를 추가해서인가 버셀에선 이를 단일 nextJS 프로젝트로 인지를 하고 있었던 것으로 추측했고 turborepo 샘플에 들어있는 package.json 에서도 이러한 구조로 되어있었다.

그래서 nextjs 를 지워주고 대신 하위 apps 의 의존성에 추가하였다.

{
  "name": "omocha",
  "version": "0.1.0",
  "private": true,
  "workspaces": [
    "apps/*",
    "packages/*"
  ],
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\""
  },
  "devDependencies": {
    "eslint-config-custom": "*",
    "prettier": "latest",
    "turbo": "latest"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "dependencies": {},
}

정말 의존성에 들어있는게 아무것도 없다.

적용 후

그리고 아래와 같은 화면을 볼 수 있었다.

이를 모두 수정하고나니, 신규 프로젝트 생성할 때 버셀이 여러개의 TurbuRepo 로 작동하는 프로젝트로 인식을 하게되었고 연이어 3개의 프로젝트를 만들도록 진행되었다. 물론 각각 사용하는 환경변수도 설정을 통해 바꾸었다.

여기까지 진행 완료되었고, 각 프로젝트에 별도의 도메인이 나뉘어졌습니다. 그런데 문득 드는 생각이 여럿 있었습니다. 그리고 이게 모노레포가 맞는가? 고민이 들 정돕니다.

• 최근 busstopwatch 의 http mixed contents 문제가 생겨 이를 잠시 수정 했을 뿐이지만 위의 3개가 모두 재배포 진행되어 하나만 재배포하도록 조정.
• 원래 이 셋은 한 도메인에 묶어있던 프로젝트인 만큼 어떻게 다시 합쳐보는가?
• 위는 단순히 NextJS 3개를 배포했을뿐이지 않을까? 그러면 각 앱의 의존성 패키지 중에 일부를 다른 패키지로 빠져도 문제가 없는가?