Next.js 프로젝트를 Github과 연동하여 Vercel로 배포해보기

Vercel

vercel은 Next.js를 만든 팀에서 만들어낸 호스팅 사이트입니다. Vercel과 양대산맥인 Netlify라는 서비스도 있는데요, 둘 다 비슷한 서비스를 한다고 보면 됩니다.

개발자들이 코드 관리를 하기 위해 사용하고 있는 Github, GitLab, BitBucket 등 많은 저장소들의 Repository를 활용하여 빌드된 내용물을 배포해주는 아주 편안하고 친절한 서비스입니다.

이번에 Next.js를 활용하여 이력서 페이지를 만들면서 간단하게 배포를 해야할 일이 생겨 사용해 보았습니다.

 

위 세 가지의 코드 저장소중 하나의 계정에 배포할 next.js 프로젝트 Repository가 있다는 것을 전제로 진행하겠습니다.

배포 과정을 한 번 알아보겠습니다.

Import

배포할 Next.js 프로젝트의 주소를 clone 합니다.

 

가입된 계정과 연동되어 있는 상태에서 배포할 저장소를 입력해줍니다.

 

해당 계정과 맞는지 확인해줍니다.

 

여기서 헷갈리실 분이 계실텐데요, 배포를 공유할 대상을 정하는 부분입니다.

만약에 팀이 있다면 팀으로, 아니면 개인으로 선택하고 진행하면 됩니다.

Install

 

배포할 대상은 전체 저장소가 아닌 resume이라는 하나의 프로젝트이기 때문에 배포할 해당 저장소를 선택해서 install 합니다.

 

프로젝트 명과 프레임워크를 선택합니다.

저는 Next.js 프로젝트이기 때문에 설정하였고 만약 다른 프레임워크라면 해당 프레임워크를 선택하면 됩니다.

 

저기서 하단에 추가로 설정할 수 있는 부분은 빌드 명령어와 환경 변수인데요,

만약 기본 설정값이 아닌 본인이 추가로 설정한 빌드 명령어나 환경 변수가 있다면 입력해주어야 합니다.

Deploy

Deploy 버튼을 누르면 Vercel이 알아서 촤라라라---- 스크립트를 뿜어내며 배포를 하기 시작합니다.

만약, 정상적으로 이슈 없이 처리가 되면 아래와 같은 화면이 출력됩니다.

.

.

.

 

첫 배포를 열렬히 환영해주면서 반겨주는 모습입니다. 🎉

자 이제 정말로 배포가 되었는지 확인을 해봐야겠죠?

Visit을 클릭하면..!

.

.

.

 

배포가 정상적으로 완료 되었군요! 😀

 

 

여기서 만족해도 되지만 본인의 도메인을 추가로 설정하고 싶거나 기타 배포 상황, 팀 설정, 추가 저장소 등록 등을 할 수 있습니다.