gh-pages을 이용하여 Github Pages에 배포하기

gh-pages? 

Github Pages에 build된 정적인 파일을 올리기위한 npm package

Github Pages?

git 저장소에 있는 정적인 페이지를 호스팅 해주는 서비스

 

설치

npm i gh-pages

 

package.json 수정

homepage키를 추가한다. 
깃헙 아이디와 저장소 이름을 요 형식에 맞춰서 "https://깃헙아이디.github.io/저장소이름" 넣어주면 된다. 

 

저장소 이름 확인하는 방법

git remote -v로 확인해 볼 수 있다. 아래 이미지에서 todo가 저장소 이름이 된다. 

 

{
    ....other code,
    "homepage": "https://깃헙아이디.github.io/저장소이름"
}

 

스크립트에 deploy, predeploy를 추가해 준다. 

predeploy는 deploy스크립트를 실행하면 먼저 실행이 되는 스크립트 이다. 

항상 배포전에 빌드가 되어야하기때문에 predeploy를 추가해 주었다. 


npm build 스크립트를 실행하면 우리 웹사이트의 production ready code를 생성하게 된다. 
production ready code? 코드가 압축되고 모든게 최적화 된다는 의미  

"scripts": {
	... 다른 스크립트, 
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
},

 

실행

작업을 완료하고 npm run deploy로 배포를 하게되면 Published라고 뜨는 것을 볼 수있다. 

npm run build 스크립트를 실행하면 build 폴더가 생긴다. 

배포하는데 5분? 정도 걸린다고한다.
배포 후 https://yunsunji9.github.io/todo/ 에 들어가서 확인하면 된다.

 

혹시 배포를 했는데도 페이지가 404가 뜨는경우 

배포한 저장소 settings -> pages 에 들어가서 branch를 gh-pages로 변경해 주면 된다. 

배포하려는 프로젝트에 router 설정이 있다면! 
BrouserRouter에 basename을 설정해 줘야한다. 

import { QueryClient, QueryClientProvider } from "react-query";

import App from "./App";
import { BrowserRouter } from "react-router-dom";
import GlobalStyle from "./GlobalStyle";
import React from "react";
import ReactDOM from "react-dom/client";
import { ThemeProvider } from "styled-components";
import { darkTheme } from "./theme";

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <QueryClientProvider client={queryClient}>
    <React.StrictMode>
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <ThemeProvider theme={darkTheme}>
          <GlobalStyle />
          <App />
        </ThemeProvider>
      </BrowserRouter>
    </React.StrictMode>
  </QueryClientProvider>
);

 

 

 

참고

https://dev-yakuza.posstree.com/ko/react/github-pages/

https://mantdu.tistory.com/882