[gh-pages] CRA 배포 시 homepage 경로를 참조하지 못할 때

gh-pages로 리액트 앱을 배포할 때 URL 설정을 package.json에 homepages로 추가하는 것만으로는 안 돼서 검색하다가 나중에 또 잊을까봐 기록으로 남겨둔다 ..^^

package.json

 

	{
	"name": "twitter",
	"homepage": "https://hannah26hannah/github.io/react-twitter-clone/",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
	"@fortawesome/fontawesome-svg-core": "^1.2.34",
	"@fortawesome/free-brands-svg-icons": "^5.15.2",
	"@fortawesome/free-regular-svg-icons": "^5.15.2",
	"@fortawesome/free-solid-svg-icons": "^5.15.2",
	"@fortawesome/react-fontawesome": "^0.1.14",
	"@testing-library/jest-dom": "^5.11.9",
	"@testing-library/react": "^11.2.5",
	"@testing-library/user-event": "^12.8.3",
	"firebase": "^8.3.0",
	"gh-pages": "^3.1.0",
	"node-sass": "^5.0.0",
	"react": "^17.0.1",
	"react-dom": "^17.0.1",
	"react-router-dom": "^5.2.0",
	"react-scripts": "4.0.3",
	"uuid": "^8.3.2",
	"web-vitals": "^1.1.0"
	},
	"scripts": {
	"start": "react-scripts start",
	"build": "react-scripts build",
	"predeploy" : "npm run build",
	"deploy": "gh-pages -d build"
	},
	"eslintConfig": {
	"extends": [
	"react-app",
	"react-app/jest"
	]
	},
	"browserslist": {
	"production": [
	">0.2%",
	"not dead",
	"not op_mini all"
	],
	"development": [
	"last 1 chrome version",
	"last 1 firefox version",
	"last 1 safari version"
	]
	}
	}

view raw package.json hosted with ❤ by GitHub

gh-pages를 install한 뒤 script에 predeploy와 deploy 명령어를 넣어준 뒤 "homepage"에 내 깃헙 아이디 + github.io + 현재 저장소 이름을 넣어준 것까지는 다른 튜토리얼에 나와 있는 내용과 동일하게 진행했다.

그런데 자꾸 빌드된 파일에 번들된 css나 js 파일을 참조하는 경로가 /github.io...로 시작하고 있었다. 즉, github io를 넣은 완전한 URL을 찾지 못하고 있었다. React-router 라이브러리를 사용할 때도 비슷한 문제가 발생하니 browser-router 쪽 이슈인가 싶어서 아래처럼 Router.js 파일을 일부 수정해주었다.

Router.js

	import React from 'react';
	import {HashRouter as Router, Route, Switch} from 'react-router-dom';
	import Profile from 'routes/Profile';
	import Auth from '../routes/Auth';
	import Home from '../routes/Home';
	import Navigation from './Navigation';
	import { BrowserRouter } from 'react-router-dom';
	const AppRouter = ({refreshuser, isLoggedIn, userObj, setIsLoggedIn}) => {
	return (
	<BrowserRouter basename={process.env.PUBLIC_URL}>
	<Router>
	{isLoggedIn && <Navigation userObj={userObj} />}
	<Switch>
	{isLoggedIn ?
	<>
	<Route exact path='/'>
	<Home userObj={userObj} />
	</Route>
	<Route exact path='/profile'>
	<Profile userObj={userObj} setIsLoggedIn={setIsLoggedIn} refreshuser={refreshuser} />
	</Route>
	</> :
	<>
	<Route exact path='/'>
	<Auth />
	</Route>
	</>
	}
	</Switch>
	</Router>
	</BrowserRouter>
	)
	}
	export default AppRouter;

view raw Router.js hosted with ❤ by GitHub

원래는 <Router>가 최상단에 위치하는데 이를 <BrowserRouter basename={process.env.PUBLIC_URL}>로 감싸주었다.

.env

// root
PUBLIC_URL=https://hannah26hannah.github.io/react-twitter-clone/

루트 바로 아래에는 Firebase 설정 파일을 위한 키가 담긴 .env 파일이 있고, 여기에 위처럼 PUBLIC_URL을 설정해주었다.

이렇게 하고 나니까 정상적으로 빌드되고 배포할 수 있었다.

Reference

• Can't build CRA project with custom PUBLIC_URL

2달 전에 게시된 스택오버플로우 답변을 참고했다.