Vercel로 Next.js 프로젝트 배포하기

Next.js 프레임워크를 사용해서 만든 프로젝트를 Vercel를 사용하여 배포해 보았다. 배포하는 과정 중에 발생한 에러 해결을 통해 최종 배포를 완성하였다. Vercel docs에서 깃헙 레포를 통해 배포하는 과정이 간략하게 소개되어 있다. 그만큼 간단하기도 하고, 배포 관련 설정들에 대한 설명도 상세하게 되어있어서 나중에 다른 설정이 필요할 때도 docs를 참고하여 배포를 진행하면 될 것 같다.

1. 로그인 후 [Add New]에서 새로운 프로젝트를 생성해 준다.

2. 배포할 프로젝트의 깃헙 저장소를 불러온다.

 

2-1. 만약 불러올 저장소가 나오지 않는다면, +Add GitHub Account를 클릭하여 vercel을 설치해 준다. 모든 레포지토리를 선택하면 import 할 때 모든 레포가 보이고, 레포를 직접 선택한다면 해당 레포만 임포트에 보이게 된다.

 

 

2-2. 프로젝트가 있는 레포가 맞는지 확인하고, Import를 실행한다.

 

3. 프로젝트 세팅 후 Deploy

프레임워크가 Next.js가 맞는지 확인하고, 관련 세팅들을 설정해 준다. Configuring a Build

 

• Root Directory: Next.js는 최상단 디렉터리(root directory)가 index로 설정되어 있고, 기본적으로 (./)로 설정되어 있다. 그러므로 따로 배포하려고 하는 코드가 다른 하위 디렉터리에 있다면 루트 디렉터리를 따로 지정해 주어야 한다.
• Build and Output Settings: Vercel은 프로젝트의 프레임워크를 자동으로 감지하고 설정해 준다. 하지만 설정을 재정의 하거나 다른 프레임워크를 지정하고 싶은 경우 해당 탭에서 변경이 가능하다. 
• Build Command: Vercel은 자동으로 프로젝트의 프레임워크를 기반으로 빌드 명령어를 구성한다. 빌드 명령어는 package.json 파일의 scripts를 체크하여 그 명령어를 빌드하기 위해 사용한다. Next.js의 경우에는 next build가 스크립트에 있는지 다시 한번 확인해 보면 된다. Vercel은 Next.js 프레임워크에서 next build가 기본 명령어로 트리거 된다.
• Output Directory: 컴파일된 파일이 위치하는 디렉터리이다. Next.js 폴더가 디폴트로 설정되어 있다.
• Environment Variables: 환경변수란 키와 값으로 구성되어 이 값이 환경에 따라 변경될 수 있도록 소스코드 외부에 설정된 값이다. 만약 설정한 환경변수 값이 있다면 이곳에 이름과 값을 넣어줘야 한다. 나의 경우는. env파일에 설정한 변수가 있어서 해당 값을 넣어주었다. Next.js에서는 환경 변수를 설정할 때 NEXT_PUBLIC_으로 시작하는 이름을 사용해야 한다.
  또한, 환경변수에 대한 변경사항은 이전 배포에 대해 적용되지 않으므로, 환경변수를 변경했다면 반드시 새로운 배포를 통해서만 변경사항이 적용되는 점을 참고해야 한다.  Environment Variables

4. 발생한 에러 수정

세팅을 마치고 Deploy 버튼을 누르고 기다리는 중... 28s가 지났을 때 에러가 발생했다. 코드를 확인해 보니 props로 자식 컴포넌트에 타입이 지정되어 있지만 부모 컴포넌트에는 props를 넣어주지 않았다. pages폴더는 src폴더의 코드를 import 해오는 코드로만 구성되어 있어서 미리 인지하지 못한 부분이었다. 

 

 

해당 에러를 수정한 뒤, 다른 컴포넌트들도 한번 더 살펴보았다. 그랬더니 react-hook-form을 사용하여 폼을 구성한 컴포넌트에서 또 한 번 타입에러를 발견했다. react-hook-form을 적용하면서 검증 라이브러리로 yup을 함께 사용했는데, yup resolver와 관련된 에러였다.

 

 

에러내용을 살펴보니, [yup으로 검증하는 필드(field)를 IProductForm(react-hook-form register 타입 설정 interface)에 할당할 수 없다. string [] 타입과 string타입을 IProductForm 타입에 할당할 수 없다.] 해당 에러는 지정한 타입에 yup으로 검증을 설정한 필드 외에 다른 필드가 넣어졌기 때문인 것으로 추측하였다. 그리고 인터페이스로 설정한 타입을 다른 곳에서도 사용하기 때문에 yup을 사용하지 않는 필드는 물음표 연산자를 사용하여 해당 필드가 반드시 지정되지 않도록 수정해 주었다. 

 

5. 최종 배포

모든 컴포넌트들을 확인한 뒤 배포를 다시 진행하였다. 처음에 잘 모르고 진행하고 있던 배포 프로젝트를 삭제한 뒤 다시 배포를 진행했는데, 중간에 배포가 중단되어도 다시 코드를 수정한 뒤 github main에 푸시하면 자동으로 빌드되어 배포가 진행되는 것 같다. 조마조마 두근두근하며 기다리다 보면 배포를 성공하여 도메인과 함께 전달해 준다. 

 

 

---

참고

Deploying Git Repositories with Vercel