Github pages로 React app 배포하기

gh-pages는 이렇게 작동합니다.

1. react app과 연결된 github repo에 새로운 branch로 gh-pages만듭니다.
2. build폴더의 소스들을 gh-pages branch에 push한 후 repo의 pages setting을 main이 아닌 gh-pages로 변경해줍니다.

github react-gh-pages repository

1. Repo 생성

우리가 만든 app을 배포하려면 먼저 만든 app을 github repo에 올릴 필요가 있습니다.
여기서 저는 미리 App name과 동일한 이름을 가진 repo를 만든 후 소스코드들을 올려두었습니다.

$ git init
$ git add .
$ git commit -m 'initial commit'
$ git remote add origin https://github.com/{USERNAME}/{REPOSITORY_NAME}.git
$ git push origin master

과 같은 방법을 통해서도 올릴 수 있습니다.

2. install gh-pages

다음으로 해야할 것은 project에 gh-pages를 설치하는 것입니다.

npm i gh-pages

먼저 프로젝트에 설치는 위처럼 간단하게 할 수 있습니다.
다음으로 프로젝트에 위치한 package.json파일을 열고 scripts 아래 쪽에 deploy와 predeploy를 추가해 줍니다.

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

deploy는 build폴더를 gh-pages branch에 push한 후 각자의 github pages에 source branch로 지정해줍니다.
predeploy는 deploy보다 먼저 실행되어 npm run build를 진행하게 되는 명령입니다.

3. 배포하기

배포하기 전에 package.json에서 하나 더 손댈 부분이 있습니다. 바로 homepage를 추가해주는 것입니다.

"name": "{PROJECT_NAME}",
"version": "0.1.0",
"homepage": "https://{USERNAME}.github.io/{REPOSITORY_NAME}/",
...

USERNAME과 REPOSITORY_NAME은 각자의 프로젝트에 맞춰서 수정해주시면 됩니다.
위치는 어느 곳이던 상관없지만 위처럼 적어주면 가독성이 올라갑니다.

이후 npm run deploy를 실행하면 predeploy와 deploy가 순차적으로 실행되고 repository를 확인하시면 다음과 같이 새로운 branch가 생성된 것을 확인할 수 있습니다.

repository의 Setting>Pages의 모습입니다. 다음과 같이 적용되어 있다면 제대로 배포된 것입니다.
정상 배포까지는 시간이 조금 걸리므로 몇 분 지난 후
https://{USERNAME}.github.io/{REPOSITORY_NAME}으로 들어가보시면 app이 배포된 것을 확인하실 수 있습니다.