[React] gh-pages를 이용한 배포

gh-pages는 무료로 웹 호스팅을 도와주는 고마운 라이브러리이다.

사용법도 쉽고, 개발자라면 모두 갖고 있을 github와 연동이 된다는 점이 마음에 들어 꾸준히 사용하고 있다.

---

Main Page

gh-pages 공식 메인 페이지

---

Install

npm install gh-pages --save-dev

사용전 터미널에 해당 코드를 입력, install 해준다.

---

homepage 설정

"homepage" : "https://{내 github 아이디}.github.io/{프로젝트 이름}"

React로 작업을 하는 경우, 프로젝트 폴더 내부에 package.json 파일이 있는 것을 확인할 수 있을 것이다.

package.json 파일에 위와 같이 코드를 작성, 호스팅 될 homepage 주소를 작성해 준다.

---

명령어 추가

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

위의 package.json 파일에 script라는 부분에 명령어를 추가해 준다.

명령어가 성공적으로 추가되었다면, [ npm run deploy ]라는 명령어만으로 작업 중인 프로젝트가 잘 배포되는 것을 확인할 수 있을 것이다.

배포가 성공적으로 되었을 시에는 터미널에 published라는 문구가 뜨게 되니 잘 확인하는 것이 좋겠다.

++ 배포 후, github 저장소의 deployments 부분에서 배포 이력 및 현황도 볼 수 있다.

---

React-Router-Dom 사용 시

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

페이지 전환을 위해 react-router-dom 라이브러리를 사용할 경우, 메인페이지 접속 시, 404 에러가 발생할 것이다.

해결법은 App 컴포넌트를 감싸고 있는 BrowserRouter 컴포넌트에 위와 같이 basename 속성값을 지정해 주는 것이다.

지금까지 어떤 의미인 줄도 모르고 사용하고 있었는데, 구글링을 해보니 basename에 입력되는 값은 해당 프로젝트의 기본 주소가 되고, process.env.PUBLIC_URL는 현재 프로젝트명을 뜻한다고 한다.

 

입력을 마쳤다면 다시 npm run deploy 명령어로 배포, 홈페이지가 잘 보이는지 확인해 보자.

---

gh-pages : https://pages.github.com/

GitHub Pages

참고 : https://egas.tistory.com/50, https://velog.io/@rik963/React-react-router-dom