[React 오답노트] 배포하기

< 목표 >
리액트로 만들고 깃헙에 있는 프로젝트를 배포하기

* 먼저 gh-pages를 다운로드 해줘야 한다.

yarn add gh-pages

pakage.json

{
  "name": "new_haninbridge",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "axios": "^1.2.3",
    "gh-pages": "^5.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-innertext": "^1.1.5",
    "react-navigator-geolocation": "^1.0.8",
    "react-responsive": "^9.0.2",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.6",
    "swiper": "^8.4.6",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "yarn 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://Yang-Min-Seok.github.io/new-HanInBridge"
}

App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Landing from "./pages/landing";
import Consulting from './pages/consulting';
import Interpretation from './pages/interpretation';
import Aboutus from './pages/aboutus';
function App() {
  return (
    // Routing format
    <div>
      <Router basename={process.env.PUBLIC_URL}>
        <Routes>
          <Route path={`/`} element={<Landing />}></Route>
          <Route path={`/aboutus`} element={<Aboutus />}></Route>
          <Route path={`/interpretation`} element={<Interpretation />}></Route>
          <Route path={`/consulting`} element={<Consulting />}></Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

문제의 발생

리액트를 이용하여 사이트를 배포하려 하였으나 실패하였다.

해결 방안

먼저 pakage.json파일에 

"homepage": "https://깃헙이름.github.io/레퍼지토리이름", "deploy": "gh-pages -d build"와 "predeploy": "yarn run build"을 넣어줘야 한다.

그리고 App.js에서 BrowserRouter 태그 부분에 basename={process.env.PUBLIC_URL}을 넣어줘야 한다.

마지막으로 deploy를 run 시켜주면 끝!

yarn run build

해결 코드

============script=============
	"deploy": "gh-pages -d build",
	"predeploy": "yarn run build"
============맨마지막=============
  "homepage": "https://Yang-Min-Seok.github.io/new-HanInBridge"

<Router basename={process.env.PUBLIC_URL}>

* 추가적으로 배포한 애플리케이션을 수정할 때는

yarn run deploy

를 실행해 주면 된다.