Vercel 배포 방법 기록

Nextjs는 vercel사에서 개발한 프레임워크이기 때문에 가장 궁합이 좋다고 할수있다.

지금부터 배포방법에 대해 기록해보자.

 

1. 일단 vercel 회원가입을 해준다. 

이게 버셀 회원가입 페이지인데, 다른 사이트였으면 구글로 통일하는 것이 편했겠지만, 배포에 가장 많이 쓰이는 사이트인 만큼 GitHub 소셜 로그인이 가장 앞에 배치된 모습이다. 아무래도 배포할 코드가 직접 올라가는 깃허브 계정에 연결하는 것이 가장 편리하여 그것을 권장하고 있다.

하지만 나는 깃허브로 가입하려 했을 때, 아래와 같은 경고를 받았는데, 직접 메일을 보내보니 버셀의 회원가입 담당자에게서 새로운 사용자가 악의적이거나 봇이 아닌지 확인하기 위해 검사를 진행였다는 답변이 오며 승인되었다. 나는 1주일 전쯤 한번 시도한 적이 있는데, 메일을 보내야 승인해주는 것인지, 그때의 시도를 그쪽에서 인지하지 못한 것인지 모르겠다. 여튼 당황하는 분들이 있을 것 같아 이렇게 남긴다.

Your account requires further verification. Please contact registration@vercel.com to complete your registration.

 

아마 강의에서 2번과정에서 연동을 하고 불편함이 있을 수 있다고 한 것을 보아 절차가 바뀐 모양이다. 

 

2. 배포할 레포지토리 선택

가입을 하면 아래의 화면을 보게되는데, 첫화면이라 배포중인 게 없어 비어있는 모습이다.

add new -> project를 클릭!

 

 

임포트를 누르고 설정할 것 없이 deploy 버튼을 누르면 배포가 되는데, 주의할 점이 있다.

배포전에 로컬에서 npm run build를 해보고 에러가 나지 않아야 배포가 원활하게 잘 될 것이다. 배포과정을 거치면 배포 로그기 보이면서 진행된다. 배포가 완료되면 스크린샷이 나오는데, 에러가 나면서 나오지 않아도 신경쓰지 않아도 된다.

 

continue to dashboard를 클릭한 후 배포된 주소를 확인할 수 있다. 배포가 잘 되었는지 확인해보고, 배포주소를 로컬의 env에 넣어둬야한다. 꼭 주소의 마지막 / 는 제거해야 함을 주의하라

NEXT_DEPLOY_DOMAIN=배포주소

 

3. 환경변수 등록

등록이 되면 아까 봤던 첫 화면에서 프로젝트 목록을 볼수 있는데, 프로젝트의 오른쪽 부분의 점을 눌러 settings를 누른 후 Environment Variable을 설정해준다. 그리고 미리 기록해둔 배포주소를 NEXT_PUBLIC_API_URL이라는 키에 넣어준다.

 

4. 다시 깃허브 레포지토리에 PUSH

푸시가 되면 자동으로 배포를 한다. 그런 다음 깃허브 소셜로그인을 위한 깃허브 설정에 들어가서 역시 배포주소로 바꿔준다. (바꾸지 않으면 localhost였기 때문에 배포주소에선 깃허브 로그인이 안된다.)

 

5. 추가적으로 속도가 느리다면 설정

3번의 settings에서 Funtions -> Region 설정을 서울로 바꿔준다.