[React/리액트] Vercel로 배포하기

https://vercel.com/

Vercel: Build and deploy the best web experiences with the Frontend Cloud – Vercel

Next.js 개발사에서 만든 클라우드 플랫폼으로 웹 애플리케이션의 구축과 배포를 도와준다. 

 

Vercel의 장점

1. 간편하다 ! 

소스 코드, 레포지토리를 연결하고 클릭만 하면 쉽게 배포를 할 수 있다.

 

2. 자동화된 배포 

Github 브랜치에 push를 해줄 때마다, Vercel에서 이를 감지하여 build와 배포까지 자동으로 진행해준다. CI/CD 에 대한 부담감을 덜 수 있다.

 

3. 서버리스 아키텍처 기반이다. 아키텍처가 서버 관리를 해주어서, 개발에 더욱 집중할 수 있다. 

 

4. Next.js 개발사에서 만든 만큼 Next.js로 개발을 할 경우 사용하면 좋다.

 

5. HTTPS 와 CDN이 적용된 상태로 배포가 진행된다. 

 

Vercel의 단점

1. AWS 에 비해 기능이 적으며 자유도가 낮다. 

 

2. 장점이자 단점이 될 수 있는데, 프론트 배포에 최적화 되어있다.

 

Vercel 배포 과정

Vercel 회원 가입 후 Github를 연동해준다. 

이후 첫 페이지에서 Add New 버튼을 클릭해준다.

 

 

배포할 레포지토리를 선택해준다.

 

배포할 프로젝트의 이름과 프레임워크 및 환경을 설정한다. 보통 루트 디렉토리에 맞게 자동을 설정된다. 

 

빌드와 관련된 사항을 작성해준다. 

Build Command

프로젝트 빌드에 실행되는 커맨드

Output Directory 

빌드된 파일들이 저장되는 위치

Install Command

dependency 실행 위한 설치 커맨드

 

빌드 설정의 겨우 생략 가능하다. 

 

 

프로젝트에서 환경 변수를 사용하고 있다면 따로 작성해주어야 한다. 

API_KEY 나 uri와 같이 보안과 관련된 값들은 .env 파일로 저장하여 .gitignore 로 설정해두기 때문에 github에 올라가지 않는다. 

따라서 Vercel에서는 환경 변수를 알 수 있는 방법이 없기 때문에 이를 작성해주어야 한다. 

.env 파일을 붙여넣어 주기만 하면 자동으로 작성해준다. 

 

이후 Deploy 버튼을 누르면 배포가 진행된다. 

 

보안 등 여러가지 설정을 해줘야 하는 AWS 와 다르게 버튼 몇번만 클릭하면 자동으로 배포되어서 매우 편리하다 !

 

도메인 변경하기

Setting 탭 -> Domains 에서 이름을 변경해주면 된다. 

또, 여기서 배포 페이지에 적용할 branch 를 선택할 수도 있다.