[React] Vercel을 이용한 리액트 프로젝트 배포 방법

Vercel 배포 방법

 

1. github에 레포지토리를 만든다.(Public / Private 모두 가능이기 때문에 소스코드 공유 싫으면 Private로 레포 생성)

 

2. Vercel 회원가입 및 github 연동

(github으로 회원가입해야 레포지토리가 연동되는지는 모르겠음 웬만하면 깃헙으로 회원가입 ㄱㄱ)

 

3. Vercel에서 github 레포지토리(repositories) 불러오기(import) 

 

4. Vercel 프로젝트 생성 및 설정

프레임워크 설정(리액트 프로젝트 배포이므로 Create React App 선택)

루트 디렉토리 설정

public & src 폴더가 있는 상위 디렉토리를 선택한다

빌드 스크립트 설정 및 빌드 결과물의 위치 설정

.env에서 정의한 환경변수 직접 추가(자세한 내용 최하단 참고자료 참고)

배포 버튼 클릭

 

배포 이후 유지보수

1. 깃헙 레포지토리 클론한다.

2.유지보수 작업 후 커밋

3. npm run build 를 통해 재배포

 

github 호스팅에서 Vercel로 호스팅 서비스 변경

만약 gh-pages 를 이용한 github 호스팅을 이용하는 중이었고 BrowserRoute를 사용하는 중인 상태에서

Vercel로 호스팅 서비스를 변경하려고 한다면 아래와 같은 부분을 수정해야한다.

 

(이전에 gh-pages를 위해서 어떤 파일에 어떤 코드를 추가하였는지 참고하려면 아래 링크를 참조하세요.)

https://sooncoding.tistory.com/73

 

1. package.json 파일의 script를 수정한다.

////////// package.json 파일의 script를 아래와 같이 수정한다.(오류 발생 시 쉼표 입력했는지 검토)
////////// 즉, 기존에 있던     "predeploy": "npm run build",    "deploy": "gh-pages -d build" 코드를 삭제한다.

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

2. package.json 파일 최하단에 추가했던 hompage를 삭제한다.

"homepage": "https://깃헙아이디.github.io/레포지토리명" // package.json 파일에서 해당 코드 삭제

 

3. index.js에서 BrowserRouter의 basename 속성을 삭제한다.

// 수정 전
<BrowserRouter basename={process.env.PUBLIC_URL}>

//수정 후
<BrowserRouter>

 

4. firebase 인증 및 이미 도메인을 등록한 API들이 있다면 수정한다.

 

참고자료

https://velog.io/@codns1223/Etc-Vercel%EB%A1%9C-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

[Etc] Vercel로 React 프로젝트 배포하기