[React] GitHub Pages로 배포하기

 

이미지 출처: Wikipedia

 

React 프로젝트는 Github Pages로 배포할 때 추가적으로 해줘야 하는 것들이 있어서 그 과정을 기록해 두려고 한다.

(내가 만든 React 프로젝트는 Create React App과 React Router를 사용하였다.)

 

이 글에서 정리하는 내용:

1. React 프로젝트 배포하기 전에 해야할 것

2. React 프로젝트 build 하고 배포하기

     2-1) gh-pages 패키지를 사용하지 않는 방법

     2-2) gh-pages 패키지를 사용하는 방법

3. 배포 확인하기

 

1. React 프로젝트 배포하기 전에 해야할 것

① 배포하고자 하는 프로젝트 repository가 public으로 되어 있는지 확인 한다.

 

② 리액트 프로젝트 폴더 안의 package.json 파일에 다음을 추가 해줘야 한다.

"homepage": "https://GitHub 계정이름.github.io/저장소 이름",

 

여기서 파란색으로 적힌 부분에는 각각 깃허브 계정 이름과 GitHub Pages로 배포하고자 하는 저장소 이름을 적어주면 된다.

 

③ 프로젝트에서 React Router를 사용하고 있다면 추가적으로 해야하는 과정이 있다.

BrowserRouter를 사용하고 있는 파일에서 다음과 같이 basename 속성을 추가 해줘야 한다.

index.js

<BrowserRouter basename={process.env.PUBLIC_URL}>
      <App />
</BrowserRouter>

여기서 PUBLIC_URL은 package.json에서 설정한 homepage URL이 적용된다고 한다.

 

 

2. React 프로젝트 build 하기

리액트 프로젝트를 배포할때는 build 과정을 진행하여 생성된 /build 폴더 안에 있는 파일들만 배포를 해야 한다!

 

2-1) gh-pages 패키지를 사용하지 않는 방법

다음 명령어를 실행하면 리액트 프로젝트 폴더 안에 build 폴더를 생성해 주는데, 이 폴더가 바로 배포에 필요한 파일들만 압축해 놓은 배포용 폴더이다.

npm run build

 

build 폴더는 GitHub 저장소에 push 해야 하기 때문에 .gitignore 파일에서 다음과 같이 /build 부분을 찾아서 주석 처리 하여야 한다.

# production
# /build

 

그리고 build 폴더를 깃허브 저장소에 push 해준다.

git add .
git commit -m "커밋 메세지"
git push -u origin main

 

GitHub Pages로 배포를 하기 위해서는 repository 안에 build 폴더만을 위한 branch를 만들고, build 폴더만 새로운 branch에 업로드 해야 한다.

다음 명령어를 입력하면 됨.

git subtree push --prefix build/ origin gh-pages

 

 

2-2) gh-pages 패키지를 사용하는 방법

원래 나는 2-1 방법만 사용해 봤었는데, 여러 글을 읽다보니 gh-pages 패키지를 사용해서 배포 하는 방법을 더 많이 쓰는 것 같길래 이 방법도 다음에 사용해 보기 위해 정리함. 

 

gh-pages 패키지 설명

https://github.com/tschaub/gh-pages

GitHub - tschaub/gh-pages: General purpose task for publishing files to a gh-pages branch on GitHub

 

Create React App 공식문서에 gh-pages 패키지를 사용하여 배포하는 방법이 나와있다.

https://create-react-app.dev/docs/deployment/#github-pages

Deployment | Create React App

 

먼저 gh-pages 패키지를 설치한다.

npm install gh-pages --save-dev

 

package.json 파일의 "scripts" 안에 다음 내용을 추가한다.

"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",

 

그러면 이제부터 다음 명령어만 입력해주면 build 과정과 배포 과정을 한번에 해준다고 한다.

npm run deploy

 

 

3. 배포 확인하기

GitHub는 기본적으로 gh-pages 이름으로 된 branch를 GitHub Pages용으로 인식한다고 한다.

따라서 gh-pages branch로 build 폴더를 올렸다면 특별히 설정을 할 필요가 없다고 한다.

 

하지만 한번 확인을 해보고 싶다면 Settings > Pages로 들어가서 Branch가 gh-pages로 되어 있는지 보면 됨.

그리고 여기서 배포된 사이트 주소도 확인해 볼 수 있다. 

 

배포에 몇 분정도 시간이 걸리기 때문에 조금 기다렸다가 사이트 주소로 들어가보면 배포가 잘 됐는지 아닌지 확인할 수 있다!

 

 

+ 프로젝트를 수정하고 다시 배포할때,

2-1 방법의 경우 다음 명령어를 모두 입력해 줘야 함.

npm run build

git add .
git commit -m "커밋 메세지"
git push -u origin main
git subtree push --prefix build/ origin gh-pages

 

2-2 방법의 경우 다음 명령어만 입력하면 된다고 함.

npm run deploy

 

확실히 gh-pages 패키지를 사용하는 게 편할 것 같다..!

 

 

---

참고:

https://dev-yakuza.posstree.com/ko/react/github-pages/

https://codingapple.com/unit/react-build-deploy-github-pages/