진짜.. 오래걸렸던.. SPA github.io 배포
1.포트폴리오 사이트 무료 호스팅을 위해 깃헙을 이용하려함
2.SPA인 리액트를 정적 호스팅으로 하려면 빌드 및 파일 설정 필요
첫번째, 깃에 코드 올리기
git init
git remote add origin your-url
git checkout -b your-branch
git add .
git commit -m "commit message"
git push origin your-branch
두번째, 추가 모듈 설치
// 터미널 명령어
sudo npm install gh-pages // sudo를 안하면 안됐었음
세번째, 파일 설정
- package.json
"homepage": ".", // 이거.. github.io 넣었다가 12시간 버렸다 ㅋㅎ . 으로 넣어야함
"name": "portfolio",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build", // 이거랑
"deploy": "gh-pages -d build", // 이거랑
"postbuild":"cp build/index.html build/404.html" // 이거
},- App.js
import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Route, Routes, HashRouter } from "react-router-dom";
import routes from "./routes";
import NotFound from "./views/Error/NotFound";
function App() {
return (
<>
<BrowserRouter basename={process.env.REACT_APP_PUBLIC_URL}> // BrowserRouter에 basename 추가(REACT_APP_PUBLIC_URL=react_portfolio)
<Routes>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
name={route.name}
element={<route.element />}
/>
))}
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
</>
);
}
export default App;- index.html (public/index.html)태그 안에 추가, 라이센스 필수 표기
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function(l) {
if (l.search[1] === '/' ) {
var decoded = l.search.slice(1).split('&').map(function(s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
</script>
<!-- End Single Page Apps for GitHub Pages -->
- 404.html
index.html과 동일 디렉토리에 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single Page Apps for GitHub Pages</title>
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// https://github.com/rafrex/spa-github-pages
// Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
// ---------------------------------------------- ------------------------
// This script takes the current url and converts the path and query
// string into just a query string, and then redirects the browser
// to the new url with only a query string and hash fragment,
// e.g. http://www.foo.tld/one/two?a=b& c=d#qwe, becomes
// http://www.foo.tld/?p=/one/two& q=a=b~and~c=d#qwe
// Note: this 404.html file must be at least 512 bytes for it to work
// with Internet Explorer (it is currently > 512 bytes)
// If you're creating a Project Pages site and NOT using a custom domain,
// then set segmentCount to 1 (enterprise users may need to set it to > 1).
// This way the code will only replace the route part of the path, and not
// the real directory in which the app resides, for example:
// https://username.github.io/repo-name/one/two? a=b&c=d#qwe becomes
// https://username.github.io/repo-name/? p=/one/two&q=a=b~and~c=d#qwe
// Otherwise, leave segmentCount as 0.
var pathSegmentsToKeep = 1;
var l = window.location;
l.replace(
l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
(l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
l.hash
);
</script>
</head>
<body>
</body>
</html>- 깃헙에서 확인
npm run deploy 하면 아래 브랜치 자동생성, 해당 브랜치로 웹사이트 만들면 됨!!
후론트엔드 개발자