vercel로 Nextjs 배포하기

 

 

최근 nextjs로 구현한 프로젝트를 배포할 방법을 찾다가 vercel로 호스팅 서비스를 해주기에 한 번 써봐야겠다며~~ 도전했습니다. 

 

 

vercel 홈페이지에서 로그인하기

https://vercel.com/

Dashboard – Vercel

 

 

 

 

start deploying 버튼이 보이시죠? 클릭클릭 - 

 

 

 

이렇게 git repository를 가져올 수 있게 하는 부분이 있습니다. 저는 다 가져오지는 않고, 배포할 레포지토리만 가져왔습니다. 

 

 

 

 

 

배포작업을 할 프로젝트상세로 들어가서 아래의 내용을 적어주시면 되는데, 따로 프로젝트 package.json에서 설정한 부분이 없으시다면 크게 수정할 부분을 없으실거에요. 

root directory같은거 잘 체크해주세요 

 

 

 

 

저는 처음에는 아래의 캡쳐처럼 다 채워줬는데, 계속 에러가 나서 ㅎㅎ 다 지워버렸더니 잘 되더라고요.

그리고 중요한 부분은 환경변수! .env 파일에 들어가있는 변수들을 Environment variables에 넣어줍니다.

저같은 경우는 mongobd 주소가 들어가야했어요.  

 

 

 

 

 

아래는 빌드하면서 에러가 빵빵 터진 모습입니다. 

왜 매번 빌드를 돌릴때마다 이러는건지 배포를 한번에 할 수 없는게 국룰인듯요...

Error 메세지를 보시면 어떤 부분에서 문제가 된 건지 확인하실 수 있어요. 프로젝트로 돌아가서 수정후 다시 git push 해줍니다.

 

 

 

아래와 같이 배포된 내역들을 확인할 수가 있습니다. 한번 배포가 완료되면 그 이후부터는 github에 수정하고 push하는 그 순간 바로 배포가 진행됩니다. 여기서 주목해야할 것은 preview 랑 production이 있다는건데요. 일단 배포가 되면 preview가 되고요. preview에서 확인해보시고 잘 된다싶으시면 promote to production해주시면 됩니다. 이 때 도메인 등록도 해주시고요. 

깃헙 아이디 옆에 점 세개를 클릭하시면 메뉴를 보실 수 있어요 

 

저는 기본 무료 hobby 계정으로 사용중인데, 이럴경우 배포 횟수에 제한이 있습니다. 그 이외에도 제한되는 부분들이 있으니 그런 부분 잘 확인하셔서 이용하셨으면 좋겠어요!