[Next.js] Vercel을 이용해 Next.js 프로젝트 간단하게 배포해보기

배포를 해본 적이 없어서 간단하게라도 배포해보고자 Vercel을 알아보게 되었다!

 

Vercel 이란?

• next.js 개발 팀에서 제작한 호스팅 사이트
• Configuration, SuperVision 없이 즉시 배포 가능
• GitHub, GitLab 등 버전관리툴과 연동하여 사용
• 배포한 프로젝트에 대해 Push를 하면 재배포가 가능하다!

1. 배포 과정

• 먼저 프로젝트를 완성하고, Vercel 홈페이지에 접속후, 깃허브나 깃랩 계정으로 로그인!
  • 초기 깃허브 연동을 하라고할때, 전 프로젝트를 연동할지, 선택할지는 본인이 고르면 된다.

• 지금은 배포가 된 상태라 저렇게 뜨지만, 아무것도 없으면 프로젝트를 임포트하라고 한다.
• Add New 버튼 클릭후 Project 클릭
• 배포하고싶은 프로젝트 Import

• 누르게되면 다음과 같은 화면이 뜨는데, Framwork Preset만 Next.js로 설정해주면되고 혹시나 루트 디렉토리가 '/'가 아니라면, Edit을 눌러 설정해주면된다(그림으로 N모양이 뜨면 Next.js임)
• 이후 Deploy를 누르면 배포!

• 배포가 완료되면 위와 같은 화면이 뜬다! 
• Add Domain으로 가면, 주소를 확인할 수 있다.

• 사이트에 들어가면, 페이지가 생성된 것을 확인할 수 있다.

• 이후에 관리에서, 푸시가 진행될 때 마다 deploy버튼이 활성화되고, 배포를 진행할 수 있다.

 

2. 깨달은 점과 아쉬운점

• 배포가 어떤식으로 이루어지는지 알 수는 있어서 좋았다. 그러나, Jenkins 등과 비교해서 매우 간단하기 때문에 더 공부가 필요하다고 생각되었다.
• 또한, 실시간으로 웹사이트에 반영되는것을 확인하니 프론트엔드 개발자로서 기분이 좋았다. 다음에는 백엔드 코드를 사용해서 API 통신까지 가능한 웹 사이트 배포를 목표로 할 것이다!
• Root Directory를 잘못 설정하여 여러번 오류가 생겼는데, Vercel은 오류가 생겨도 배포 자체는 진행되어 프로젝트가 생성되더라... 입장은 안되더라도 생성은 되어서 이름 중복이 생겨버리니 주의할 것 !!