Github Pages에 React Router 적용된 React App 배포하기

Github Pages라는, Github에서 무료로 제공하는 호스팅 서비스가 있습니다. 

 

보통은 HTML/CSS/JS로 만들어진 간단한 페이지를 배포하지만, React App도 build하면 결국 HTML/CSS/JS로 이루어져 있기 때문에 React App도 배포 가능합니다.

 

하지만 문제가 있습니다. React Router를 사용한 React App을 Github Pages에 배포하면 제대로 동작하지 않고 아래와 같은 화면이 나온다는 겁니다.

 

 

이건 왜 발생하고 어떻게 해결할까요?

---

왜 안 될까?

React Router에서는 HTML history라는 기술을 사용해 URI 이동을 구현하고 있는데, Github Pages에서는 HTML history를 지원하지 않는다고 합니다.

 

그래서 React Router가 URL에 따른 적절한 동작을 해야 하는데 이를 실행하지 못 하고, 엉뚱하게 해당 URL에 해당하는 HTML 파일을 찾으려고 하니 당연히 에러 페이지(404.html)를 보여주는 겁니다.

---

해결법

해결법은 간단합니다.

index.html을 복사하고 이름을 404.html로 바꿔서 index.html과 같은 폴더에 둔다

 

이게 왜 해결책일까요? 결국 문제의 핵심은 Github Pages에서 특정 URL을 이동해도 index.html로 이동해 React가 HTML을 Render하게 해야 하는데 404.html로 이동한다는 것입니다. 그렇기 때문에 에러 페이지를 index.html과 같은 페이지로 바꿔 주면 됩니다.

 

그 전에 당연히 package.json에 홈페이지를 Github Pages가 배포될 URL로 바꿔야 합니다.

 

{"homepage": "https://www.example.com"}

 

또, BrowserRouter에 basename을 추가해야 합니다.

 

import { BrowserRouter as Router } from 'react-router-dom';

...

ReactDOM.createRoot(document.getElementById('root')).render(
    <Router basename={process.env.PUBLIC_URL}>
        <App />
    </Router>
);

 

---

자동화하기

404.html을 index.html 파일과 똑같이 해서, root(/)가 아닌 다른 경로에 가도 에러 페이지가 아닌 index.html이 실행되고, 이를 바탕으로 경로에 맞는 페이지를 라우팅 할 수 있었지만, 1가지 큰 문제가 있습니다.

 

build를 할 때 마다 매번 index.html파일을 복사하고, 이름을 404.html로 바꿔야 한다는 것입니다.

 

프로그래머로서, 이런 반복되는 작업이 있을땐 항상 자동화할 방법이 없나 고민해 봐야 합니다.

 

그 방법은 package.json에 있는 scripts에 npm run build를 실행하면 자동으로 실행할 script를 추가하는 것입니다.

 

"scripts": {
	"postBuild": "cp index.html 404.html"
}

 

cp는 파일을 복사하는 명령어 입니다. index.html 파일을 같은 경로의 404.html이라는 이름으로 복사하는 명령어를, postbuild, 즉 build가 되고 난 뒤에 실행한다는 것입니다.

 

위의 명령어를 입력해 놓으면 npm run build를 할 때 마다 react app이 github pages에 배포할 수 있는 상태가 됩니다.

---