[React] 클라이언트 배포 : Vercel편

오늘은 vercel을 이용하여 React 프로젝트를 배포해볼 것이다.

준비물
: 구매 후 AWS Route53 등록 완료한 도메인
: 배포하고자 하는 프론트 github repository

 

1. Vercel 가입

vercel 사이트에 접속한다. https://vercel.com/login

(계정이 없으면 회원가입한다.)

Login – Vercel

 

 

2. Project 생성

https://vercel.com/new 에서 본인의 github 계정 인증 후, 배포를 원하는 레포지토리를 선택하고 [import]

 

3. Project 설정

프로젝트명, 빌드를 위한 명령어를 설정한다. 

명령어가 기억나지 않으면 우측의 overwrite를 이용해도 된다.

 

설정 완료 후 [Deploy]를 누르면 아래 목록들이 실행되며 배포가 진행되고, 몇분후 완료된다.

 

4. 도메인 설정

기본 배포가 진행되고 나면, vercel에서 임의로 도메인을 설정해서 배포해준다.

이제는 우리가 AWS에서 인증해둔 원하는 도메인 주소로 이를 변경해줄 것이다.

나는 mydomain.com을 AWS에 등록해뒀고, www.mydomain.com을 vercel 배포 주소로 사용하려고 한다.

 

4-1. 도메인 추가

Project Settings / Domains에서 mydomain.com을 입력하고 [Add] 해준다.

 이후 그냥 mydomain.com만 선택해서 추가해줬다.

 

그러면 A 타입의 도메인이 추가된다. 여기서 value값을 복사해둔다.

 

4-2. Route53 도메인 설정

AWS Route53에 가서 레코드를 생성한다.

 

나는 www.mydomain.com을 사용할 것이라 레코드의 서브 도메인을 www으로 설정했다. 

레코드 유형은 A 타입으로 설정한다.

이후 아래 '값' 자리에는 4-1에서 복사해둔 vercel 도메인상 value 값을 넣고 [레코드 생성]을 누른다.

 

그 value 값을 가진 레코드가 생성된 것을 확인할 수 있다.

 

이후 vercel로 돌아가서 mydomain.com 주소를 [Edit]으로 www.mydomain.com으로 바꾼다.

잠시 기다리면 www.mydomain.com으로  도메인이 잘 변경된 것을 확인할 수 있다.

이후 원래 vercel이 임의로 준 도메인은 그냥 삭제해도 된다.

 

해당 주소로 접속해보면 리액트 프로젝트가 잘 배포된 것을 확인할 수 있다.

http 접속 시 https로 리다이랙트도 잘 된다.

배포 끝 !