[React.js] github pages로 배포했을 경우 새로고침 OR 직접 입력시 에러 해결

이번 포트폴리오를 리액트로 완성하여 깃허브 페이지로 배포를 했는데 문제는 깃허브 페이지는 SPA 를 지원하지 않는다. 즉 history API 기능을 제공하지 않아서 렌더링 없이 URL만 이동하는 것은 불가능하다.

그래서 포트폴리오 메인에서 다른 페이지로 이동후 다시 그상태에서 새로고침을 할경우 github pages의 404 페이지 화면이 나오는 문제가 발생했다. 또한 직접 메인아닌 서브페이지의 URL를 입력하고 접근 시도시에도 동일한 현상이 생겼다.

다음과 같이 해당 문제를 해결하였다.

 

[spa-github-pages 오픈소스]

이를 해결해주는 오픈 소스가 있다.

https://github.com/rafgraph/spa-github-pages

GitHub - rafgraph/spa-github-pages: Host single page apps with GitHub Pages

사용시 MIT 라이센스를 꼭 명시해야 한다.

 

public/index.html 안 head태그에 아래의 스크립트를 추가

 

public/404.html 생성하여 아래의 소스를 추가

https://github.com/rafgraph/spa-github-pages/blob/gh-pages/404.html

 

[라우터에 basename 설정]

깃허브 페이지를 배포할때 package.json 파일에 "homepage"값으로 userName.github.io/projectName 으로 진행되기때문에 리액트 라우터 path 경로나 Link to의 경로가 projectName이 들어가지 않고 "/" 나 "/works" 이런식으로 진행이된다. 따라서 basename을 라우터에 설정해야한다.

 

.env안 PUBLIC_URL 설정

REACT_APP_PUBLIC_URL = /projectName

Router 페이지에 basename 설정

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function AppRouter() {

	return (
		<Router basename={process.env.PUBLIC_URL}>
			<Switch>
				<Route exact path="/">
					<Home />
				</Route>
                ...
			</Switch>
		</Router>
	);
}

export default AppRouter;

 

그후 배포하고 확인하면 새로고침 또는 URL 직접 입력해도 정상으로 보인다.