vercel을 사용한 배포

배포할때 백엔드는 AWS EC2를 프론트엔드는 AWS S3를 사용한 배포를 사용했었는데

프론트 배포할때 Vercel이 정말 편하다고 들어서 사용해봤다.

 

1.  Vercel 사이트에 접속해서 회원가입

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

 

1.  배포 시작하기

가입하면 start deploying을 클릭하고 Import Git Repository 한다.

내경우 이미 배포한뒤라서 배포후의 Add New를 클릭하고 Project를 클릭하면 Import Git Repository로 이동한다.

내경우 import를 클릭했을때 원하는 레포가 안보여서 Adjust GitHub App Permissions를 클릭하고 재로그인함

 

2. 로그인 후 원하는 레포지토리 선택

 

3. 배포할 프로젝트 설정하기

 

React CRA로 생성한 그대로 입력헀다.

# Build Command
npm run build

# Output Directory
build

# Install Command
npm install 

 

 

 

위 이미지의 빌드와 배포가 성공하면 아래처럼 축하한다고 한다. 

DNS가 있다면 Add Domain을 클릭해서 Domains 페이지로 이동해서 설정하면 된다.

 

Add Domain을 클릭하면 Domains로 이동하는데 

Domains에서 원하는 프로젝트의 Edit을 누르고 Domain을 변경할 수 있다.

 

하지만 vercel이 제공하는 기본 도메인에는 vercel.app이 따라붙는다.

없애고 싶다면 도매인을 구입하고 구매한 도매인으로 바꿔주면 된다.

내 경우  AWS Route 53으로 도메인을 변경하였다.

4. Domain 설정하기

mywebsite.com에 자신이 구매한 Domain을 입력한다. 

(이미 CName으로 사용하는 DNS가 존재한다면  검색바를 클릭했을때 CNAME이 나올텐데 그냥 Add 하면 된다.)

 

에러가 나면서 아래처럼 나타난다.

 

( 스크린샷을 읎어요..)

- AWS Route53 -> DNS 관리 -> Hosting 영역

- 호스팅 영역을 생성하고 구입한 도메인 선택

- 레코드 생성 클릭 -> 라우팅댕상에 vercel에서 복사한 Value 값 등록

Vercel로 돌아와서 도메인을 확인하면 적용된것을 확인 할 수 있다.