Next App Deployment(Vercel)

김동현·2022년 4월 15일
0

NextJS

목록 보기
12/12
post-thumbnail

Vercel

NextJS 앱을 배포할 때 다양한 호스팅 서비스를 이용할 수 있지만 그 중에서도 Vercel을 통해서 배포하는 방법에 대해서 알아보겠습니다.

Vercel은 NextJS 앱을 위한 훌륭한 호스팅 제공 업체입니다. Vercel은 NextJS를 개발한 팀과 같은 팀이 만든 호스팅 서비스 업체입니다.
그러므로 NextJS를 잘 수용하고 최적화되어 있습니다.

Vercel은 NextJS 프로젝트 뿐만 아니라 다양한 프로젝트에서도 사용이 가능합니다. 즉, 다른 유형의 프로젝트 또한 호스팅 서비스를 제공합니다.

1. Git Repository

Vercel을 이용하여 배포를 하기 위해서는 GitHub, GitLap, Bitbucket 중 하나를 사용해야 합니다. Vercel은 Git Repository를 통해서 배포를 하기 때문입니다.

즉, Git Repository에 NextJS 프로젝트의 코드를 저장해두어야 합니다.


Vercel을 Git Repository와 연결하기만 하면 Vercel이 빌드하고 배포해줍니다. 즉, 개발자가 명시적으로 빌드를 하지 않아도 Vercel이 자동적으로 빌드를 하여 배포해줍니다.

만약 다른 호스팅 서비스를 사용한다면 명시적으로 빌드 명령어(npm run build)를 통해 빌드를 한 뒤에 배포를 해주어야 합니다.

2. Vercel Deploy

로그인 후 배포할 Repository를 import합니다.

deloy할 때 빌드와 배포에 대한 설정을 할 수 있습니다. 또한 환경 변수도 설정이 가능합니다. 모든 설정을 다 한 뒤 Deploy 버튼을 클릭하여 배포를 실행합니다.

이때 MongoDB에서 Network Access에서 모든 어디에서나 접근이 가능하도록 변경해주어야 합니다. 이렇게 해야 Vercel 서버가 MongoDB에 접근할 수 있습니다. 그렇지 않으면 MongoDB와 연결할 수 없으며 데이터 로딩과 저장이 불가합니다.

위 그림에서 ALLOW ACCESS FROM ANYWHERE 버튼을 클릭하여 "0.0.0.0/0" IP 주소를 추가해줍니다.

그러면 간단하게 NextJS 애플리케이션이 Deploy됩니다.

이후 변경된 코드에 대해서 commit을 하고 Repository에 push하게 되면 Vercel이 main branch를 주시하여 변화가 감지될 때마다 자동으로 빌드하여 재배포를 하게 됩니다.

profile
Frontend Dev

0개의 댓글