GitHub Pages 배포
GitHub Pages 서비스를 이용하여 React 앱을 배포해봅니다.
1. homepage 추가
package.json
파일에 homepage
항목을 추가한 후, 호스팅 될 GitHub Pages URL을 입력합니다.
{
"homepage": "https://<사용자_계정>.github.io/<저장소_이름>"
}
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 명령만 추가합니다.
{
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -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

참고
Last updated
Was this helpful?