Software Develop/Web

[React] github pages를 활용하여 React 프로젝트 배포하기

jaywapp 2023. 3. 8. 09:59

패키지 설지

gh-pages 패키지를 설치합니다.

npm install gh-pages --save-dev

package.json 업데이트

homepage 주소 추가

hompage 주소 정보를 업데이트 합니다.

"homepage": "http://[github id].github.io/[github repository name]"

deploy script 추가

deploy 관련 script를 추가합니다.

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

github pages 설정

github pages에서 사이트 주소 확인하기

작업 & Deploy

작업이 완료된 후, 아래 명령어를 수행합니다.

npm run deploy

predeploy를 설정하였기 때문에 자동 Build 하지만, 만약에 안될 경우 아래 명령어를 수행합니다.

npm run build