리액트 - Vercel로 리액트 프로젝트 배포하기

리액트 전체 링크

 

참고

- gh-pages로 리액트 프로젝트 배포하기

- Netlify로 리액트 프로젝트 배포하기

- Netlify 배포 에러 해결하기

 

이번에는 Vercel로 무료 웹 호스팅 서비스에 리액트를 배포해 보자.

 

Vercel 페이지로 이동해 Start Deploying 버튼을 클릭한다.

 

GitHub 프로젝트를 배포할 예정이므로 Continue with GitHub 버튼을 클릭한다.

 

Vercel과 깃허브가 연동되도록 Authorize Vercel 버튼을 클릭하자.

 

이제 Install 버튼을 누르자.

 

배포가 필요한 저장소를 연결한다.

 

깃허브의 저장소가 연결되면 리액트 프로젝트를 Import 하자.

 

Project 이름을 설정한다. ([Project Name]-[random string].vercel.app 으로 배포된다.)

Build Command와 Install Command를 설정한다.

Netlify처럼 해당 프로젝트가 --legacy-peer-deps 옵션이 필요한 경우 마찬가지로 추가해야 한다. 

환경 변수가 필요하다면 Environment Variables에서 설정하면 된다.

 

Deploy 버튼을 누르면 빌드가 시작된다.

 

배포 후 아래와 같은 에러가 날 수 있다.

Error: Command "npm run build" exited with 1

 

Settings → General로 이동하자.

Netlify 배포 에러 해결하기처럼 Build Command를 수정하면 된다. 

NODE_OPTIONS='--openssl-legacy-provider' CI= react-scripts build

 

다시 Redeploy를 하면 배포가 진행된다.

 

정상적으로 리액트가 배포가 되면 아래와 같은 화면을 볼 수 있다.

 

Vercel은 gh-pages나 Netlify처럼 라우터 관련 처리를 할 필요가 없어서 매우 편하다.

(라우팅 된 페이지에서 새로고침을 해보자.)