GitHub Pages 배포

GitHub Pages 서비스를 이용하여 React 앱을 배포해봅니다.

1. homepage 추가

package.json 파일에 homepage 항목을 추가한 후, 호스팅 될 GitHub Pages URL을 입력합니다.

package.json

{
  "homepage": "https://<사용자_계정>.github.io/<저장소_이름>"
}

HINT

별도 저장소가 아닌, GitHub 사용자 홈페이지인 경우에는 다음과 같이 입력합니다.

{
  "homepage": "https://<사용자_계정>.github.io"
}

도메인 포워딩 하여 별도로 사용 가능한 URL이 있을 경우, 다음과 같이 설정합니다.

{
  "homepage": "https://my-react-app.dev"
}

ERROR

이 단계를 건너뛸 경우, GitHub에 올바르게 배포(deploy)되지 않습니다.

2. gh-pages 패키지 설치

GitHub에 배포하기 전, gh-pages 패키지를 설치합니다. 이 패키지를 사용하면 gh-pages 브랜치에 게시합니다.

패키지 설치

# npm 사용자
npm i gh-pages

# yarn 사용자
# yarn add gh-pages

3. 배포 명령 추가

package.json 파일에 사전 배포(predeploy), 배포(deploy) NPM 스크립트 명령을 추가합니다.

ERROR

기존 작성 된 명령은 지워서는 안됩니다. predeploy, deploy 명령만 추가합니다.

package.json

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

HINT

GitHub 저장소가 아니라, GitHub 사용자 페이지에 배포할 경우 deploy 명령을 다음과 같이 변경합니다.

"deploy": "gh-pages -b master -d build"

4. 배포 명령 실행

deploy 명령을 실행하여 GitHub에 배포합니다.

npm run deploy

배포에 성공하면 Published 메시지가 Console에 출력됩니다.

5. GitHub Pages 설정

GitHub 저장소 설정(Settings)에서 GitHub Pages 소스(Source) 옵션 값을 gh-pages 브랜치로 설정합니다. 설정이 종료되면 GitHub Pages 호스팅 URL이 화면에 출력됩니다.

Your site is published at 호스팅 URL

HINT

루트(/root)로 설정하면 프로젝트 루트 위치에 build 결과가 업로드 됩니다.

참고

Deployment | Create React Appcreate-react-app.dev