Written by Nostrss
on 

React 프로젝트 Github-Page에 배포하기

깃허브에 react 정적 페이지 배포하기

next.js를 사용하면 배포 방법이 다른 것 같다.확인이 필요함

1. 깃허브 레파지토리 생성하기

2. 로컬 PC에서 react 프로젝트 생성하기

npx create-react-app my-app
cd my-app // 생성된 폴더로 들어가야한다

3.깃허브와 프로젝트 연결하기

git remote add origin https://github.com/nostrss/react-deploy.git

또는 깃클론 한뒤 프로젝트를 생성

4. gh-pages설치

https://www.npmjs.com/package/gh-pages

npm install gh-pages --save-dev

5.package.json 세팅

{
  "name": "react-deploy",
  "version": "0.1.0",
  "private": true,

  // 홈페이지 주소 추가
  "homepage": "http://nostrss.github.io/react-deploy",


  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",

     // `predeploy`, `deploy` 추가
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^4.0.0"
  }
}

6. 실행(빌드)

npm run deploy
yarn deploy

7. github 세팅

8. 완료

참고링크 : https://velog.io/@byjihye/react-github-pages