Next.js Vercel로 배포하기
Vercel
Vercel 은 Next.js 에서 제공하는 배포플랫폼으로 [빌드 + 배포 + 호스팅] 서비스를 제공한다.
Next.js 공식문서에서는 Vercel를 통한 Front Project 배포를 권장하고 있으며, github의 레파지토리를 통해 쉽게 배포 할 수 있다.
진행하는 프로젝트도 Next 기반이기에 vercel로 간편하게 배포해보았다.
Vercel 배포과정
1. 로그인
git 계정으로 간편하게 로그인할 수 있다.
2. 새 Project 생성
3. Repository 등록
Search 또는 Adjust GitHub App Permissions클릭 후 배포할 repository 선택한다.
4. Configure Project 설정
프로젝트 빌드를 위한 설정을 하는 단계이다.
BUILD COMMAND 에 pakage.json 에서 추가한 Build 명령어를 입력한다.
OUTPUT DIRECTORY 은 배포시 디렉토리의 경로이다. Vercel이 프로젝트가 출력되면 자동으로 디렉토리가 구성된다.
INSTALL COMMAND 는 빌드단계에서 package-lock.json 이 있으면 Vercel이 install 명령어를 실행하여 dependencies를 설치해준다.
문제점
네이버 지도 API를 사용중이였는데 api key를 제대로 가져오지 못했다.
api key는 .env에 작성 후 gitignore을 해주었는데 그렇다보니 key값을 못가져오는 것 같았다.
검색 결과 api key는 vercel에 환경변수로 설정해주어야 한다고 하였다.
해결 방법
생성한 프로젝트의 Setting에 들어가 API key 환경 변수 설정을 해주었다.
설정 후 다시 배포사이트에서 확인해봤지만 여전히 똑같은 에러가 발생하였다.
다시 찾아보니 vercel은 .env 가 아닌 .env.local 을 통해서만 API key에 접근할 수 있다고 하였다.
.env를 .env.local로 변경하고 .gitignore폴더에도 .env를 .env.local로 변경해주었다.
이후 캐시를 제거하면서 재배포를 해야 적용이 된다고 하여 캐시 없이 재배포를 실행하였다.
📑 참고 자료