프로젝트를 GitHub Pages로 배포하기 (yarn, React)

1. GitHub Pages 란?

github repository 내용을 웹페이지로 만들어 주는 서비스.

자신의 프로젝트를 깃허브에 업로드하면 직접 호스팅을 해줌.

(*public 프로젝트에 대해서만 무료로 해줌.)

2. 세팅방법

1) gh-pages 패키지 설치 

yarn add gh-pages --dev

2) package.json 수정

내 git repository 주소 적어줌. 

"homepage":"https://[user_name].github.io/[repository_name]"

deploy 추가

"predeploy": "yarn build",
 "deploy": "gh-pages -d build"

• predeploy : deploy 전에 수행함
• yarn build : 현재 프로젝트 코드를 빌드함
• gh-pages -d build : build 디렉토리(-d)에 있는 파일을 GitHub Pages에 업로드함.

3) 배포하기 

yarn deploy

4) 완료

publish 라고 뜨면 완료

 

 

배포 후 빈 화면만 뜰 경우

import BrowserRouter from 'react-router-dom/BrowserRouter'

ReactDOM.render((
   <BrowserRouter basename={process.env.PUBLIC_URL}>
     <App />
   </BrowserRouter>
), ...)

root path 가 될 basename prop을 줘야함

그렇다면 process.env.PUBLIC_URL 은 뭐하는 놈일까? 그 밑에 달린 답변을 한국어로 번역해보겠다.

process.env.PUBLIC_URL 은 Node.js 라이브러리의 일부이며 당신의 개발모드가 로컬에서 작동하냐 아니면 Github Pages와 같이 실제 서버에서 작동하냐에 따라 동적으로 생성되는 URL 입니다.

필자와 같은 문제가 생겼다면 BrowserRouter 태그의 basename prop에 {process.env.PUBLIC_URL} 을 넣어주면 해결될 것이다.

 

/참고

https://velog.io/@qhgus/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-GitHub-Pages%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-feat.-React

https://prod.velog.io/@drata313/asdasdasd