React 프로젝트 github pages로 배포하기(gh-pages 사용)

최선재·2023년 2월 10일
0

배포

목록 보기
1/1
post-thumbnail

github pages로 gh-pages 패키지를 사용하는 방법과 사용하지 않는 방법 두 가지가 있다. 여기서는 사용하는 방법에 대해 정리를 해놓을 것이다.

🚨 배포 주의사항

  • 배포하는 저장소가 public인지
  • 가장 최신의 상태를 배포 즉, 배포 후 수정사항이 생기면 커밋후 push하고 다시 배포하기

준비

1. package.json에

"homepage": "https://본인계정.github.io/저장소명" 추가

2. react-router 라이브러리를 사용중이면

BrowserRouter에 basename 속성추가
<BrouserRouter basename={process.env.PUBLIC_URL}>
    ....
</BrouserRouter>

3. gh-pages 패키지 install

npm i gh-pages --save-dev

4. packgage.json의 "scripts"에 추가하기

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

5. build파일 생성과 배포하기

npm run deploy (build 생성과 배포를 한 번에 해준다)

profile
적자생존[적어야 산다]

0개의 댓글