[Vercel, Front-end] mono-repo에서 배포 안되는 문제 해결

우리 팀은 한 github 레포 안에 모든 개발 폴더를 두고 있다.

front-end 폴더(client), back-end 폴더(server), contract 폴더(contract), react-native 폴더(mobile).

 

나는 FE 작업을 맡아서 각종 로그인 테스트를 해보기 위해 vercel에 git repo를 연결 후 배포하고자 했다.

내가 작업한 폴더는 proto.v2-client다.

 

**참고**

FE 작업은 NEXT.js 프로젝트로 진행.

 

github repo(모노레포 전체)를 연결해서 프로젝트 생성을 해주고, 

settings에서 root directory도 내가 작업한 FE 폴더로 설정을 해줬다.

 

근데!! 안됐다.

...

 

docs를 읽어봐도.. 매 딴소리만 한다..

이것만 읽고 나는 pro결제를 안 해서 이런 일이 일어난 줄 알았다.

그래서 심지어 결제도 했다!!!

그래도 안되더라..

 

CLI로 로컬 배포도 했었다!

근데 꼭 git 레포랑 연결해서 업데이트시 자동배포가 이루어지도록 하고싶어서 계속 찾아봤다.

 

mono-repo 배포하는 방법을 구글에 찾아봐도 우리 팀이 작업하는 것처럼 한 레포에 프론트, 백, 컨트랙트 등의 여러개의 개발 폴더가 있는 경우를 보여주는 게 아니라, 여러개의 FE 폴더로 작업하고 이를 하나로 배포하는 경우를 보여줬다.

.....ㅜ,ㅜ

 

 

결국 G선생님께 여쭤봤다.

그랬더니 결과는..!!!

 

대성공!!!!

 

 

 

방법을 공유하자면

 

내가 작업하고 있는 FE 폴더(여기서는 proto.v2-client, 즉 내가 배포하고자 하는 root directory) 안에

 

vercel.json

 

이라는 파일을 만들어야한다.

 

그 안에

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/next"
    }
  ]
}

이렇게 코드를 적어주면 된다.

 

이 설정은 Vercel이 root directory 내의 package.json 파일을 기반으로 프로젝트를 빌드하도록 지시한다.

 

최종 폴더/파일 구조는 다음과 같다.

proto.v2 레포로 vercel project 생성 후에 proto.v2-client(FE 작업 폴더, Next js 프로젝트)를 root directory로 설정하여 배포했다.

이 과정에서 vercel.json 파일을 proto.v2-client에 생성했다.

 

 

다른 사람들이 나와 같은 어려움을 겪지 않길 바라며,,