React Github page 배포 내가 해냄

인트로

오늘은 react로 만든 프로젝트를 Github page에 배포하는 방법을 정리해 보겠습니다.

ph-pages 패키지를 설치해서 배포하려고 합니다.

딱히 배포할 프로젝트는 없는데 나중에 배포할 때 이 포스팅을 보는 걸로 하고 오늘은 아무거나 배포해 보죠.

---

1. ph-pages install

npm i gh-pages

---

2. package.json 수정

"homepage" 

create-react-app이 사이트를 빌드할 때 URL을 알아야 하기 때문에 필요합니다.

"homepage" : "https://{username}.github.io/{저장소 이름}"

"scripts" 안에 내용 추가

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

---

3. npm run deploy

npm run deploy

터미널에 위 명령어를 입력하면 빌드폴더를 만들어서 업로드를 해줍니다. (homepage url)

deploy가 끝난 후 homepage url에 들어가서 정상적으로 배포된 걸 확인하면 끝입니다.

참고로 deploy가 끝난 후 homepage url에 들어갔을 때 404가 뜨는 경우가 있는데요. 한 2분~3분 정도 기다렸다가 새로고침 하면 됩니다. 

---

그리고 BrowserRouter를 사용했을 경우 배포가 제대로 되지 않는 경우가 있다고 하는데요.

이럴 때는 basename props를 추가해 주면 된다고 합니다. 

<BrowserRouter basename={process.env.PUBLIC_URL}>
...
</BrowserRouter>

이때 PUBLIC_URL은 package.json의 homepage URL 값으로 설정됩니다.

https://create-react-app.dev/docs/advanced-configuration/

---

끝!