> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/create-react-app/github-pages.md).
# GitHub Pages 배포
GitHub Pages 서비스를 이용하여 React 앱을 배포해봅니다.
## 1. homepage 추가
`package.json` 파일에 `homepage` 항목을 추가한 후, 호스팅 될 GitHub Pages URL을 입력합니다.
{% tabs %}
{% tab title="package.json" %}
```javascript
{
"homepage": "https://<사용자_계정>.github.io/<저장소_이름>"
}
```
{% endtab %}
{% endtabs %}
{% hint style="info" %}
**HINT**
별도 저장소가 아닌, GitHub 사용자 홈페이지인 경우에는 다음과 같이 입력합니다.
```javascript
{
"homepage": "https://<사용자_계정>.github.io"
}
```
도메인 포워딩 하여 별도로 사용 가능한 URL이 있을 경우, 다음과 같이 설정합니다.
```javascript
{
"homepage": "https://my-react-app.dev"
}
```
{% endhint %}
{% hint style="danger" %}
**ERROR**
이 단계를 건너뛸 경우, GitHub에 올바르게 배포(deploy)되지 않습니다.
{% endhint %}
## 2. gh-pages 패키지 설치
GitHub에 배포하기 전, [gh-pages](https://www.npmjs.com/package/gh-pages) 패키지를 설치합니다. 이 패키지를 사용하면 `gh-pages` 브랜치에 게시합니다.
{% tabs %}
{% tab title="패키지 설치" %}
```bash
# npm 사용자
npm i gh-pages
# yarn 사용자
# yarn add gh-pages
```
{% endtab %}
{% endtabs %}
## 3. 배포 명령 추가
`package.json` 파일에 사전 배포(predeploy), 배포(deploy) NPM 스크립트 명령을 추가합니다.
{% hint style="danger" %}
**ERROR**
기존 작성 된 명령은 지워서는 안됩니다. predeploy, deploy 명령만 추가합니다.
{% endhint %}
{% tabs %}
{% tab title="package.json" %}
```javascript
{
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
}
```
{% endtab %}
{% endtabs %}
{% hint style="info" %}
**HINT**
GitHub 저장소가 아니라, GitHub 사용자 페이지에 배포할 경우 deploy 명령을 다음과 같이 변경합니다.
```javascript
"deploy": "gh-pages -b master -d build"
```
{% endhint %}
## 4. 배포 명령 실행
`deploy` 명령을 실행하여 GitHub에 배포합니다.
```bash
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 style="info" %}
**HINT**
루트(/root)로 설정하면 프로젝트 루트 위치에 build 결과가 업로드 됩니다.
{% endhint %}
## 참고
{% embed url="" %}