문제 정의
Vercel에서 프로젝트가 배포되지 않는다.
사실 수집
- 배포가 안되기 시작한 시점은, electron 앱을 모노레포로 옮긴 이후이다.
- 이것저것 테스트를 해보느라 처음 설정값과 현재는 바뀌었다.
원인 추론
에러 메시지는 next가 설치되지 않았다고 뜬다. 현재 Root Directory는 /, 즉 루트로 설정되어 있으며 루트에는 next가 설치되어있지 않아서 뜨는 에러이다.
기존에는 Root Directory 설정을 해당 패키지의 위치로 설정을 해두었던 것이다.
해결 방안 수립
-
install은 루트에서 실시해야 한다. 왜냐하면, 루트에 전역으로 설치해야 할 패키지들이 있기 때문이다.
그렇기 때문에, RootDirectory는 루트로 설정하는 것이 맞다.
-
build할 때
—-filter를 통해 블로그와, 블로그에서 사용하는 ui패키지를 함께 빌드한다.이 커맨드의 재활용을 위해 루트 package.json의 script에 작성해둔다.
// package.json { // .. "scripts":{ "build:blog": "turbo build --filter @guesung/ui --filter blog", } } -
output 폴더를, 2번의 build명령어를 입력했을 때 생성되는 output파일로 지정한다.
blog프로젝트의 경우, packages/web/blog/.next에 생성이 된다.
조치 및 구현
수정 후 Vercel의 빌드 설정은 다음과 같다.
-
Build Command :
pnpm run build:blog-
build:blog의 스크립트는 루트의 package.json에 작성이 되어 있으며 다음과 같다.
// package.json { // .. "scripts":{ "build:blog" : "turbo build --filter @guesung/ui --filter blog" } // .. }공통 컴포넌트 패키지인 @guesung/ui를 빌드 후 blog패키지를 빌드한다. @guesung/ui에서는 빌드 과정에 tailiwndcss를 css파일로 컴파일하고, blog패키지에서는 이를 import하여 사용 중이다.
-
-
Output Directory :
packages/web/blog/.next- 빌드 후 저장이 되는 폴더인데, Next.js는 빌드 후 .next에 빌드된 폴더가 저장되므로 해당 경로를 설정하였따.
-
install command :
pnpm:install- pnpm 패키지 관리자를 사용하므로 pnpm:install명령어로 패키지들을 설치한다.
-
Root Dirctory : 미설정
여기서 핵심은 루트에서 명령어를 실행해야 하기 때문에 루트 경로를 지정하지 않는다는 점이다. 모노 레포 특성상 다른 패키지를 자주 가져다 사용한다. 또한 루트의 패키지를 사용할 수도 있다. 그래서 루트 폴더를 루트 경로로 지정해야 하며, 빌드 후 실행할 폴더의 위치인 Output Directory를 직접 지정해줘야 한다.
결과 관찰
처음에는 이것저것 설정 후 재배포하여 테스트를 했었다. 하지만 차근차근 생각해보고, 배포 과정을 그리면서 작성하니 한 번에 해결되었다.
앞으로도 문제를 직면했을 때 체계적으로, 그리고 논리적으로 접근해서 차근차근 문제를 풀도록 하자.