[React] React 프로젝트를 Github에 배포하기

배포 하기에 앞서, Github 저장소에 프로젝트가 업로드 되어있어야 한다.

업로드 및 연동 방법은 이 포스팅을 참고하자.

 

https://kimcoder.tistory.com/78

과정은 복잡하지 않다.

해당 프로젝트의 커맨드 라인에서

npm install gh-pages --save-dev 를 입력하자

gh-pages 패키지를 프로젝트에 설치하겠다는 의미다.

 

설치가 끝났으면 프로젝트 폴더 내에 있는 package.json 파일에서 다음과 같이 3줄을 추가하자.

단, homepage는 반드시 여러분의 깃허브 저장소 주소를 입력해야 한다.

 

그리고 커맨드 라인에서

npm run deploy를 입력하면 배포가 끝난다.

 

여러분들이 gh-pages를 무사히 설치 했다는 사실은, 저장소의 settings에 들어가서 스크롤을 쭉 내려보면

GitHub Pages 라는 메뉴가 있는데 Sourse에서 Branch가 gh-pages로 지정되어 있는 것을 보고 확인 할 수있다.

브랜치가 None으로 되어있다면 gh-pages로 변경하면 된다.  

이제 배포가 잘 되었는지 확인해보자.

 

아래 그림과 같이 "깃허브계정명/github.io/저장소명/" 을 브라우저 주소창에 입력하면

여러분들이 만든 웹사이트가 무사히 실행된다.