[리액트(React)] Github page 배포

전에 바닐라 JavaScript로 코딩해서 직접 Github 사이트에서 설정을 통해 배포한 적이 있는데, React는 배포가 훨씬 간편하다.

먼저 gh-pages를 설치해준다.

npm install gh-pages

다음으로는 루트 하위에 .env.production 파일을 생성하여 배포 사이트 주소를 적어준다.

PUBLIC_URL=https://github이름.github.io/repository명

깃허브 사이트의 주소 규칙은 따로 도메인을 설정하지 않는 한 항상 일정하다.

router v6 를 사용하는 경우, basename도 따로 설정해주어야 한다.

const router = createBrowserRouter(
  [routes들], 
  {
    basename: process.env.REACT_APP_PROFILE === 'DEV' ? '/' : '/cypto-tracker/',
  },

※ .env.development

REACT_APP_PROFILE=DEV

※ .env.production

REACT_APP_PROFILE=PRD
PUBLIC_URL=github page 주소

 

이제 파일을 build해서 올리면 되는데, package.json의 scripts에 명령어를 추가함으로써 간단하게 할 수 있다.

"deploy": "gh-pages -d build",
"predeploy": "npm run build"

predeploy로 build 명령어를 입력해 놓으면, build 따로 배포 따로 할 필요 없이 배포할 때 자동으로 build가 먼저 되기 때문에 아주 편하다!

마지막으로 배포 명령어를 실행한 후 기다리면 배포 끝!

npm run deploy

---