[REACT] Github(gh-pages)를 이용한 리액트 프로젝트 배포 방법

깃허브 호스팅을 이용한 리액트 배포 방법은 아래 5가지 과정으로 이루어 진다.

 

1. package.json 파일 수정

package.json 파일 최하단(중괄호{} 안에)에 아래 코드를 삽입한다.

"homepage": "https://깃허브아이디.github.io/레포지토리명"

삽입 후 package.json 코드 예시

// homepage 삽입 후 package.json 코드 예시
{
  "name": "for-mj",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.9",
    "@mui/material": "^5.14.10",
    "@mui/styled-engine-sc": "^5.14.10",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "firebase": "^10.4.0",
    "framer-motion": "^10.16.4",
    "gh-pages": "^6.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.18.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.11",
    "web-vitals": "^2.1.4"
  },
  "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"
  },
  "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://LDK1009.github.io/FOR_MJ"
  ////////////////////////////////////////
}

(Tip) 깃허브 아이디 & 프로젝트 명 확인 방법(깃허브 홈페이지 =>  프로필 클릭 => 레포지토리)

 

 

 

2. gh-pages 설치 

터미널 창(Ctrl + ` 또는 VSC에서 View > Terminal)을 켠 후 아래 코드를 입력한다. 

npm install --save gh-pages

 

 

 

3. package.json 파일 수정

package.json 파일의 scripts에 아래 코드를 삽입한다.

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

삽입 후 package.json 코드 예시

{
  "name": "for-mj",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.9",
    "@mui/material": "^5.14.10",
    "@mui/styled-engine-sc": "^5.14.10",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "firebase": "^10.4.0",
    "framer-motion": "^10.16.4",
    "gh-pages": "^6.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.18.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.11",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    ////////////////////!!!scripts에 삽입!!!////////////////////
    "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"
    ]
  },
  "homepage": "https://LDK1009.github.io/FOR_MJ"
}

 

 

 

(선택) 라우터 사용 시 App.js 파일 수정

라우터에 basename을 설정한다.

(여기서 process.env.PUBLIC_URL는 package.json의 homepage 주소로 설정된다.)

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

삽입 후 예시

import { BrowserRouter, Route, Routes } from "react-router-dom";

<BrowserRouter basename={process.env.PUBLIC_URL}>
	<Routes>
		<Route path="/" element={<Home />} />
		<Route path="/SelectPlayGround" element={<SelectPlayGround />} />
	</Routes>
</BrowserRouter>

 

 

 

4. 리액트 프로젝트 배포

터미널 창을 켠 후 아래 코드를 실행시킨다.

npm run deploy

배포 성공 시 아래와 같은 코드가 나온다(Published)

 

 

 

5. 깃허브 페이지 설정

깃허브 페이지가 호스팅할 브랜치를 gh-pages로 변경한다.

 

 

6. 기다리기(10~20분)