[ React ] gh-pages를 이용해서 웹 페이지 호스팅하기

gh-pages 바로가기

repository 만들기 바로가기

 

npm

$ npm install gh-pages

 

package.json

"scripts": {
    // 추가내용
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
},
// 추가내용 ( 내 https://shiro21.github.io -> 내 깃허브 주소, /react-crud -> repository 이름 )
"homepage": "https://shiro21.github.io/react-crud"

repository이름은 깃허브에서 깃저장소를 만들때 사용했던 repository name을 말합니다.

 

deploy

$ npm run deploy

npm run deploy를 해주면 predeploy부분이 먼저 실행되면서 build를 해주고, deploy를 해줍니다.

그리고 1 ~ 5분 정도 지나면, 주소로 접속이 가능해집니다.

 

https://shiro21.github.io/react-crud

 

:: 주의 : 주소창이름이 맞지 않아서 브라우저가 열리지 않는 상황을 주의해야 합니다.

 

react-router-dom을 사용할 경우 BrowserRouter의 basename을 process.env.PUBLIC_URL로 세팅해줍니다.

 

ex : )

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

import Main from './components/main/Main';

function App() {

  const url = process.env.PUBLIC_URL;
  
  return (
    <Router basename={url}>
      <Routes>
        <Route path={`/`} element={ <Main /> } />
      </Routes>
    </Router>
  );
}

export default App;

 

추가 )

깃허브 repository -> Setting -> pages로 들어가보면 Branch가 gh-pages로 구축되어있다는 내용을 볼 수 있습니다.