gh-pages

gh-pages : GitHub Pages 기능을 통해 파일을 배포하는 패키지
React로 만든 프로젝트는 Github의 page를 통해 배포할 경우, html 파일이 아니라 README.md 과 해당 레포에 올린 파일의 목록이 표시된다.
이럴 때 사용할 수 있는 것이 gh-pages이다

React 프로젝트 배포

Github와 프로젝트 연결

git init
git add .
git commit -m "first commit"
git remote add origin [사용하고자 하는 레포지토리 주소]
git push origin main

해당 과정을 통해 프로젝트를 깃허브에 연결 시킨다

Page 설정

레포의 Settings > Pages 를 통해 page 설정, 배포
배포 된 페이지의 주소를 확인한다
https://[github아이디].github.io/[레포지토리의 이름]/

gh-pages

설치

npm install gh-pages

설정

//package.json
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build"
    // deploy 명령어로 gh-pages가 실행되도록 추가
  },
  "homepage": "배포된 페이지의 주소",
			  // (https://[github아이디].github.io/[레포지토리의 이름]/)
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

build

프로젝트를 한 번 빌드 한 후, gh-pages를 통해 다시 빌드 해준다.

npm run build
npm run deploy

npm run deploy를 통해 npm run build 까지 실행된다고 하지만, 그래도 가장 처음에 npm run build를 해서 build 파일을 만들어줘야 한다.

page 재설정

settings-pages에 가서 Branch를 gh-pages로 설정해준다