github page만들기

react프로젝트를 github page를 이용해 웹사이트로 만들기

1. vscode에서 terminal을 연다.
2. 'npm i gh-pages' 를 실행한다.
3. 'npm run build'를 실행한다.
   -build폴더가 생성되고 이 폴더는 내 웹사이트의 production ready code를 생성한다.
   -production ready란 코드를 압축하고 모든 것을 최적화 한다는 의미이다.
4. package.json 최하단에
   "homepage": "https://(username).github.io/(repository이름)" 작성한다.
   나의 경우 "homepage": "https://semyeongJ.github.io/Joymovie"
5. package.json "scripts" 부분에

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build", //추가
    "predeploy": "npm run build" //추가
  },

6. terminal에 'npm run deploy' 실행한다.
   그러면 자동으로 predeploy -> build -> deploy 순으로 실행된다.
7. 내 웹사이트에 접속! 처음엔 404에러가 뜨지만 5분정도 후 내 프로젝트 웹사이트가 뜬다.

주의사항!
react-router-dom v5 사용하는 경우
배포시 홈페이지 경로를 참조하기 위해

function Router() {
  return (
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <Switch>
        <Route path="/:coinId">
          <Coin />
        </Route>
        <Route path="/">
          <Coins />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

다음과 같이 basename={process.env.PUBLIC_URL} 를 추가해준다.