React는 gh-pages 패키지를 통해 깃허브 페이지에 쉽게 업로드할 수 있습니다.
깃허브 페이지
깃허브 페이지는 깃허브에서 제공하는 웹 호스팅 서비스로 무료로 정적 페이지를 업로드할 수 있습니다.
gh-pages
gh-pages 패키지는 명령어 하나로 프로젝트의 빌드와 배포를 자동으로 도와줍니다.
1) 설치
npm install gh-pages
2) 프로젝트 세팅
깃허브 페이지에 자동으로 빌드, 배포하기 위해서는 package.json 파일을 세팅해주어야 합니다.
- homepage : 호스팅할 주소를 입력합니다.
- scripts - predeploy : deploy(배포)전에 이루어질 작업입니다. 빌드 후 배포를 위해
npm run build를 입력합니다. - scripts - deploy : 깃허브 페이지에 배포하기 위해
gh-pages -d build를 입력합니다.
3) 배포하기
위와 같이 세팅후 npm run deploy 명령어를 터미널에 입력해주면 자동으로 모든 작업이 이루어집니다.
정상적으로 배포 성공시 Published라는 메시지가 출력됩니다.
배포 후 페이지에 적용되기 까지는 몇 분 정도 소요될 수 있습니다.
4) Branch 설정
배포 후에는 레포지토리에 gh-pages Branch가 자동으로 생성됩니다.
Branch를 변경해주면 정상적으로 페이지가 로드됩니다.
2개 이상의 프로젝트를 gh-pages로 배포시 오류 발생
새로 만든 프로젝트를 gh-pages를 연결하여 npm run deploy 했는데 이전에 만든 프로젝트의 사이트에 업로드되는 현상이 있었습니다.
package.json의 homepage등을 정상적으로 설정하였는데도 이런 현상이 있었습니다.
gh-pages가 해당 프로젝트에 설치되어 실행되는것이 아니라 로컬환경에 설치되기 때문에 같은 컴퓨터에서 실행한 두 프로젝트에서 충돌이 일어난 것입니다.
해결방법
아주 간단하게 해결이 가능합니다.
deploy에 어디에 배포할 것인지 명시해주면 됩니다.
gh-pages -d build -r 레포지토리의 주소.git
※ 주의
homepage에 설정했던 페이지 주소가 아니라 레포지토리 자체의 메인 주소를 작성해주어야 합니다.
