[리액트(React)] Vercel로 React 프로젝트 배포하기

간단한 프로젝트는 github pages로 배포하는 편인데, 이번엔 좀 제대로 관리하고 싶은 프로젝트라 vercel로 배포하기로 했다.

전에 Next 프로젝트를 Vercel로 배포한 적이 있어서 딱히 고민하지 않았던 것 같다 ㅎㅎ

* 공식 홈페이지: https://vercel.com/

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

---

Vercel은 깃허브와 연동해서 편하게 배포할 수 있다는 게 큰 장점이다.

배포할 프로젝트를 Import한다.

프로젝트명은 자유롭게 정하면 된다.

Framework Preset은 웬만하면 자동으로 인식해주는데, 틀렸다면 직접 바꿔주면 된다!

Root Directory도 딱히 건들 필요 없다.

Build and Output Settings는 선택한 프레임워크에 따라 설정되므로 딱히 건들 필요 없고, 필요한 경우만 OVERRIDE 해준다.

 

마지막으로는 환경변수를 입력해준다.

.env 파일에 입력해둔 내용들을 옮겨 넣어주면 된다.

나같은 경우 API url하고 license 키를 넣어주었다.

그리고 Deploy 버튼을 눌러주면 끝!

이상이 없다면 배포 완료 ㅎ.ㅎ

---

※ 도메인 연결

포트폴리오 사이트 배포하는 거라서 도메인도 제대로 연결해 주었다.

도메인은 가비아에서 구매했다.(1년에 17,600원... )

Vercel과 가비아 도메인을 연결하려면 가비아 도메인 관리에서 관련 정보를 설정해주어야 한다.

---

My 가비아 > 도메인 관리 > 도메인 연결 설정을 클릭한다.

설정을 눌러서 DNS 정보를 추가해 주어야 한다.

(난 이미 등록해둬서 DNS 정보가 있다. )

레코드 수정을 눌러서 사진속 A와 CNAME 정보를 입력해준다.

다시 Vercel로 돌아와서 Domains 를 눌러준다.

내가 구매한 도메인 정보를 입력하고 Add 하면 끝!

Domains에 내가 연결한 도메인이 추가되어 있는지 확인 ㅎ.ㅎ

---

Vercel로 배포하면 새로고침 했을 때 계속 404 에러가 나는데, 해결하려면 vercle 설정을 추가로 해주어야 한다.

루프 디렉토리에 vercel.json 파일을 생성한다. 

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

내용으로 rewrites 정보를 추가해주면 새로고침 해도 화면이 잘 보인다!