배포

아래 내용은 노마드코더님의 강의를 통해 학습한 내용들을 기반으로 작성하였습니다.

Github 페이지로 배포하는 방법은 간단합니다.

1. package.json 수정

 "scripts": {
	...
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  },

위와 같이 package.json의 script부분에 deploy와 predeploy를 추가해줍니다. 나중에 터미널을 통해 배포하고자 할 때, npm run deploy 명령을 통해 자동으로 npm run build와 npm run predeploy가 실행되고, gh-pages 브랜치에 배포를 위한 최적화된 파일들을 커밋해줍니다.

  "homepage": "https://본인의 깃허브명.github.io/깃허브 레포지토리명"

package.json에 위의 문장도 추가해주어야 합니다. 위의 주소를 더 간단히 확인할 수 있는 방법은, 해당 깃허브 레포지토리에 가서, settings -> pages를 통해 해당 레포지토리의 github page를 볼 수 있는데, 그 주소를 넣으시면 됩니다.

2. App.js 수정

<Switch>
      <Route path="/movie/:id">
        <Detail />
      </Route>
      <Route path={`${process.env.PUBLIC_URL}/`} element={Home} >
        <Home />
      </Route>
 </Switch>

저와 같은 경우에는 위의 방법만으로는 빈 페이지가 나오고 로딩이 되지 않아서 구글링을 해보니 위와 같이 추가한 후에는 정상적으로 실행이 되었습니다.

아직까지 ${process.env.PUBLIC_URL}을 추가해주어야 하는 이유에 대해선 찾지 못했는데, 아시는 분이 계시다면 댓글로 알려주심 감사하겠습니다..