[배포] GitHub로 React 배포하기

 

Github로 React 배포하기

 

---

 

 

1. gh-pages 패키지 설치하기

 

npm install --save gh-pages
// or
yarn add gh-pages

 

 

2. package.json에 homepage 추가하기

 

"homepage" : "http://(본인username).github.io/(Repository이름)",

 

3. package.json의 scripts에 predeploy와 deploy 항목 추가

 

"scripts": {
  "predeploy" : "npm run build",
  "deploy" : "gh-pages -d build"
}

 

* 배포하기 전 주의할 점

React 프로젝트에서 BrowserRouter를 사용했다면 페이지 배포 후 에러가 생길 수 있음. 로컬 환경에서는 기본 주소가 "/"이지만, 실제 배포 후에는 "(본인username).github.io/(Repository이름)/"가 기본 주소이기 때문에 깃허브가 이를 인식하지 못하고 첫화면이 404페이지가 뜨게 됨🥴

 

해결 방법 1) BrowserRouter 대신 HashRouter 사용하기

해결 방법 2) BrowserRouter를 사용하되, basename 설정해주기

BrowserRouter에 basename으로 다음과 같은 내용을 추가해준다.

 

<BrowserRouter basename={process.env.PUBLIC_URL}>

 

 

process.env.PUBLIC_URL은 env 파일에서 REACT_APP_PUBLIC_URL 을 추가해준 뒤, package.json의 homepage에 입력했던 것과 동일한 내용을 입력해주면 된다.

 

REACT_APP_PUBLIC_URL = http://(본인username).github.io/(Repository이름)

 

이렇게 해주면 배포 후 첫 페이지가 알맞게 설정되어 오류가 사라짐.

 

 

4. git에 이때까지의 변경사항 commit 후 npm run deploy 실행

npm run deploy

 

5. Github의 해당 Repository에서 Settings - Pages 들어가서 확인

 

 

배포가 완료되었다면 위와 같이 웹페이지를 확인할 수 있다.

 

 

+ 배포 후 수정 방법

 

로컬에서 수정 후 git으로 push하고 다시 npm run deploy를 해주면 됨!

 

---

 

참고 자료

노마드코더 React 영화앱 강의