리액트10 gh-page를 이용하여 github pages에 올리기

npm i gh-pages

설치 

 

gh-pages란 

결과물을 github pages에 업로드 할 수 있게 해주는 패키지 

github에서 무료로 제공한다.

 

package.json 안의 scripts - build 확인 

npm run build

위의 스크립트를 실행하면 웹사이트의 production ready code를 생성

production ready 란? 코드가 압축되고 모든게 최적화 된다는 의미 

명령어로 build 실행 -> 압축, 최적화 실행 

실행이 완료되면 build라는 폴더가 생김 

안의 js를 살펴보면 

내가 작성했던 코드가 압축되어 있는것을 확인할 수 있음 (확인용)

 

그 후에 

깃에서

repository를 생성해주고,

git init 

git remote -v를 이용하여 repository 확인

만약 repository가 존재하지않다면

git remote add origin https://github.com/**/폴더이름 

으로 추가해준 후,

 

package.json에서 

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "gh-pages": "^6.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.3.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",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run 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"
    ]
  },
  "homepage": "https://*username*.github.io/react-app"
}

    스크립트에
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
    
    와 맨마지막에
      "homepage": "https://*username*.github.io/react-app 
      추가

 

deploy : 우리가 설치한 gh-pages를 실행  / build 된 파일들을 가져와서 실행 -> homepage의 웹사이트에 업로드

predeploy : deploy전에  실행, npm run build를 실행시켜 build된 파일들을 가져옴 

                  "build": "react-scripts build",를 통해 build됨.

 

그 후에 

npm run deploy

실행을 하게되면 prodeploy가 실행되고, 그 후에 deploy가 실행되고 

url 주소를 통해 저 프로젝트가 올라감 

 

수정 후 업데이트를 하고 싶다면

npm run deploy 다시 실행하면 된다 

그럼 자동으로 프로젝트가 build 되고 

그 폴더가 github pages에 push될것임 

다만 업데이트하는데 시간이 좀 걸림