Vercel 에서는 연결된 Git Respository 의 브랜치에 commit 을 push 하는 방식 으로 deployment 를 생성할 수 있다. 즉, 각 브랜치의 결과물을 각각의 다른 deployment 로 생성할 수 있다. Vercel 에서는 이렇게 어떤 브랜치 에서 deployment 를 생성했냐 에 따라 deployment 의 종류를 Production 과 Preview 로 나누고 있다.

Production

Production 은 실제 서비스 가 배포되는 곳 이다.

Production 은 Production Branch 의 가장 최신 상태를 반영한다. Production Branch 에 push 되는 commit 은 Production 에 반영된다. Production Branch 는 초기에 main 브랜치 로 설정되어있으며, 다른 브랜치 로 수정도 가능하다. Production Branch 는 Vercel 의 특정 프로젝트에서 Project Settings - Git 탭에서 확인가능하다.

즉, Production Branch 를 설정하는 것은 에 어느 브랜치의 작업물을 실제 서비스에 반영할 것인지를 결정 하게 되는 것이다.

Preview

Preview 는 말 그대로, 실제 서비스가 배포되는 Production 에 변경사항을 merge 하기전, 미리 확인 할수 있도록 해준다. 흔히 말하는, Development 환경이라고 볼 수 도 있겠다.

Preview 와 연결되는 브랜치는 Production Branch 를 제외한 모든 브랜치로 설정할 수 있다. 한마디로, Production Branch 로 별도로 지정한 브랜치가 아니라면, 모두 Preview 로 deploy 된다. 따라서 Vercel 은 기본적으로, 연결된 브랜치 에 commit 을 push 했는 데 이 브랜치가 Production Branch 가 아닐 경우, Preview 를 배포하게 된다.

도메인 연결하기

deployment 를 Production 과 Preview 로 나누었다면, 각각의 브랜치를 도메인에 할당함으로써, deployment 를 도메인과 연결할 수 있다.

Project Settings - Domains 탭에 들어가면, 도메인을 입력하여 생성할 수 있는 데, 생성된 도메인 에서 할당할 브랜치를 설정할 수 있다.

앞서 말했듯, 만일 특정 도메인에 실제 서비스 의 deployment, Production 을 연결하고 싶다면, Production Branch 로 설정된 브랜치를 할당해야한다. Preview 를 연결하고 싶다면, Production Branch 를 제외한 내가 확인하고 싶은 작업물이 포함되어있는 브랜치를 할당하면된다.

성공적으로 할당했다면 아래 캡처와 같이 태그를 통해, 해당 도메인이 어떤 deployment 과 연결되어 있고, 어떤 브랜치가 할당되어있는지 확인 할 수 있다.

나의 경우, Preview 에는 develop 브랜치를 할당했기 때문에, 다음과 같이 확인할 수 있었다.

환경변수 설정하기

위와 같이 Production 과 Preview 를 나누었다면, 각각의 환경에서 다르게 사용되는 변수를 환경변수로 지정하고 싶을 수 있다.

예를 들어, 호출하는 API 의 URI 가 Production 과 Preivew 에서 각기 다르게 적용되야 하는 상황이라고 하자.

Project Settings - Environment Variables 에서는 각 deployment 에서 사용할 수 있는 환경변수를 지정할 수 있다.

환경변수가 사용될 환경, 즉 어떤 deployment 인지 선택하고, Key 와 Value 를 입력하면 된다.

Key 를 입력할 때, React 로 만들어진 프로젝트라면 주의해야할 점은 REACT_APP 이라는 prefix 를 붙여야한다.

나는 위와 같이, REACT_APP_API_URI 라는 이름의 Preivew 와 Production 에서 각기 다른 값으로 사용되는 환경변수를 생성할 수 있었다.

생성 혹은 수정한 환경변수는 새로운 deployment 가 생성된 후 적용된다.

Vercel CLI 를 통해 배포하기

Vercel 은 연결된 브랜치의 최신 commit 의 push 된 상태를 반영하여 배포된다. 하지만 위와 같이 환경변수 를 수정한 경우 같이, 코드의 변경사항 이 없지만 새로운 배포 를 진행하고 싶은 경우가 있을 수 있다. 이럴땐 Vercel CLI 를 이용하여 손쉽게 새로운 deployment 를 생성할 수 있다.

Vercel CLI 를 다음과 같이 설치하면,

npm i -g vercel

다음 명령어 를 이용해 배포를 진행할 수 있다.

vercel

만일 Production 을 생성하고 싶다면, 옵션을 붙인 명령어를 실행하면 된다.

vercel --prod