[React] react-router 적용한 React 앱을 github pages로 배포하는 법

Diana

6 min readMay 5, 2020

이 글은 당신이 create-react-app과 react-router를 사용 중이라고 가정하고 있습니다

지금까지 CRA(Create React App)를 사용하여 프로젝트를 여러번 만들어왔지만, 생각해보니 완성된 React 웹 또는 앱을 배포해본 적이 없었다.

Amazon S3, Nginx, heroku 등등을 이용해 배포하는 방법도 있지만, 나는 github pages로 배포하는 법을 소개하고자 한다.

처음부터 차근차근 해보자구요(CRA)

우선 CRA로 React 프로젝트를 시작하여 개발을 완료하고, 해당 프로젝트가 Github 저장소에 업로드 되어있는 환경을 먼저 만들어보자.

Github Repository를 생성한다

2. CRA로 리액트 프로젝트를 생성한다

yarn create react-app react-deploy-test --template typescript

3. react-router를 이용해 라우터를 설정하고 git에 push한다.

해당 코드: https://github.com/DianaLeee/react-deploy-test

배포(Deploy)

프로젝트가 완성되었다면 이제 github pages에 배포할 차례다!

배포 방법은 CRA 공식 문서에 deployment 가이드가 상세하게 나와있다.

Create React App · Set up a modern web app by running one command.

npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so…

create-react-app.dev

package.json 파일에 hompage 필드를 추가한다.

// package.json
{
 "homepage": "http://dianaleee.github.io/react-deploy-test"
}

2. gh-pages 패키지를 설치하고 package.json에 deploy script를 작성한다.

// gh-pages 설치
yarn add gh-pages// package.json에 predeploy와 deploy 추가
"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",

3. deploy

yarn deploy

위의 주소에 접속해서 결과를 확인해보면

The Problem

라우터가 가리키는 “/” 경로는 “https://dianaleee.github.io” 주소 뒤에 오는 “/” 경로다. (https://dianaleee.github.io/)

하지만 내 프로젝트는 /react-deploy-test 경로에 존재하고 있다.

즉, 라우터는 https://dianaleee.github.io/로 이동하려하고 있지만, 실제 프로젝트는 https://dianaleee.github.io/react-deploy-test/ 에 있기 때문에 의도대로 동작하지 않았던 것이다.

The Solution

두가지 방법이 있다.

BrowserRouter 대신에 HashRouter를 사용한다

근데 주소에 #붙는게 맘에 안들어서 다른 방법을 찾아보았다

2. BrowserRouter에 basename을 추가한다

basename props를 추가함으로써 프로젝트의 기본 URL을 설정할 수 있다.

즉 라우터한테 기본 URL을 제공하여 “/”이 아닌 레포지토리 주소 “/react-deploy-test/”로 이동하라고 지시하는 것이다. 이렇게 하면 github pages를 이용한 React 프로젝트 배포 시 생기는 라우팅 오류를 없앨 수 있다.

참고로, PUBLIC_URL은 package.json의 homepage URL값으로 설정된다.

결과물 확인하기

아무튼 basename을 지정하고, 다시 deploy를 해주면…

모든 페이지가 정상적으로 라우팅되어 보여진다!

배포한 프로젝트: https://dianaleee.github.io/react-deploy-test/

배포를 위해 만든 레포지토리: https://github.com/DianaLeee/react-deploy-test