React github pages로 배포하기

github repository에 자료가 연동되어 있을 때 배포하는 방법이다!

 

1. gh-pages 패키지 다운로드

npm install gh-pages --save-dev

현재 위치가 react project 파일들이 있는 폴더인지 확인한 후 설치한다.

 

2. package.json 파일에 정보 입력

homepage property 추가

"homepage": "https://{github id}.github.io/{repository 이름}"

script property에 predeploy, deploy 추가

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

모두 추가하고 나면 package.json파일이 이렇게 수정되어야 한다.

{
 // ...
 "scripts": {
 	// ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
 },
 // ...
 "homepage": "https://{github id}.github.io/{repository 이름}"
}

3. 배포

npm run deploy

npm run deploy 명령어를 입력하면

"predeploy"에 입력한 npm run build 부터 실행한 후 build가 다 끝나면

"deploy"에 입력한 gh-pages -d build 가 실행된다.

 

전에는 main brunch에 push하고, gh-pages brunch를 동기화하는 방법을 사용했는데 npm run deploy하면 build -> gh-pages brunch 동기화 까지 가능하다. 코드를 업데이트 하고 나서 npm run deploy만 해주면 된다.

 

 

여기까지 잘 진행했다면

"https://{github id}.github.io/{repository 이름}"

을 사이트 주소로 사용해 배포할 수 있다!

---

 

배포 과정에서 만난 오류들

 

'gh-pages'는 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
과정 1번의 gh-pages 패키지가 다운로드 되지 않았을 때 나온다. gh-pages 패키지를 다운받으면 된다.

 

'deploy'는 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
package.json에 "deploy"에 대한 명령어를 입력하지 않고 deploy 명령어를 입력하면 에러메시지가 뜬다.
과정 3번을 실행한다.

 

Module not found: Can't resolve '라이브러리명'
package.json파일과 node_modules 폴더를 삭제한다.
npm install 명령어를 통해 npm을 다시 다운받는다.

 

gh-pages brunch로 이동했는데 changes가 너무 많은 경우

build를 한 후 gh-pages 에 들어가봤는데 너무 많아서 brunch를 다시 이동하는데도 시간이 오래 걸리고, 변화한 파일들을 삭제하는데도 시간이 오래 걸린다.

이럴땐 .gitignore 파일을 만들어준다.

최상위에 .gitignore로 node_modules 폴더를 지정한다. 그러면 node_modules 의 파일들의 변화는 github에서 무시한다.

그러면 .gitignore이 생긴 것만 변화에 뜬다. push해도 되고 무시하고 main 으로 이동해도 된다.(어차피 다시 build/deploy)하면 .gitignore 파일이 사라진다.

 

 

 

 

 

참고한 페이지

https://jihyewoo.tistory.com/11?category=931304 

Github에서 react 프로젝트 호스팅하기 (feat. gh-pages)

 

https://dev-yakuza.posstree.com/ko/react/github-pages/

[React] GitHub Pages에 배포

 

https://www.npmjs.com/package/gh-pages

gh-pages

 

https://shinye0213.tistory.com/271

리액트 에러(React Error) Module not found: Can't resolve '파일' in '경로'