GitHub 페이지를 사용하여 무료로 React 앱을 배포하는 방법

몇 가지 간단한 단계를 통해 라우팅된 React 앱을 GitHub 페이지에 배포하는 방법을 알아보세요.

프로젝트가 있고 도메인을 구매하지 않고 무료로 호스팅하고 싶다면 GitHub 페이지를 사용하는 것이 좋은 선택입니다. GitHub Pages는 저장소를 웹사이트로 변환하고 무제한의 프로젝트 사이트를 호스팅할 수 있도록 해줍니다.

탐색 기능이 포함된 React 사이트를 배포하려면 정적 사이트 배포에 비해 추가 구성이 필요합니다. 이 튜토리얼에서는 GitHub 저장소 생성부터 호스팅 사이트 보유까지 전체 프로세스를 안내합니다.

반응 앱 만들기

데모를 위해 나중에 배포할 라우팅이 포함된 React 프로젝트를 생성해야 합니다. 그러나 기존 React 프로젝트가 있는 경우 이 단계를 건너뛰어도 됩니다.

터미널에서 create-react-app 명령을 실행하여 React 프로젝트를 빠르게 스캐폴딩하세요.

npx create-react-app react-gh

생성된 폴더로 이동하여 애플리케이션을 시작합니다.

npm run start

다음으로, 원하는 코드 편집기를 사용하여 프로젝트 폴더를 엽니다. src 폴더에서 App.js 및 index.js를 제외한 모든 항목을 삭제합니다. App.js의 내용을 다음으로 바꿉니다.

function App() {
  return (
    <div>
     <h2>Github Pages</h2>
     <h3>Deploying React to Github</h3>
    </div>
  );
}
export default App;

라우팅 추가

애플리케이션에 라우팅을 추가하려면 먼저 react-router-dom을 설치하세요.

npm install react-router-dom

App.js에서 정보 페이지에 대한 링크를 추가합니다.

import { Link } from "react-router-dom";
function App() {
  return (
    <div>
      <Link to="/about">About</Link>
     <h2>Github Pages</h2>
     <h3>Deploying React to Github</h3>
    </div>
  );
}
export default App;

App.js가 홈페이지 역할을 하므로 정보 구성요소만 생성하면 됩니다.

const About = () => {
    return ( 
        <div>
          <Link to="/">Home</Link>
          <h2>About Page</h2> 
        </div>
        );
}
export default About;

이제 경로를 생성하고 React 라우터를 구성해야 합니다.

URL이 각 구성 요소와 일치하도록 index.js를 수정합니다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { HashRouter, Routes, Route } from "react-router-dom";
import About from "./About";
ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <Routes>
        <Route path="/" element={<App/>} />
        <Route path="/about" element={<About/>}/>
      </Routes>
    </HashRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

BrowserRouter 대신 HashRouter를 어떻게 사용했는지 확인하세요. BrowserRouter를 사용하면 404 오류가 발생합니다. 이는 GitHub 페이지에서 라우팅이 다르게 작동하기 때문입니다. Hashrouter는 URL의 해시 부분을 사용하여 UI를 URL과 동기화하므로 오류가 발생하지 않습니다.

마지막 단계는 모든 새로운 변경 사항을 Git에 커밋하는 것입니다.

git add .
git commit -m "Create React app"

GitHub 저장소 생성

GitHub 페이지는 저장소를 웹사이트로 변환하여 애플리케이션을 호스팅하므로 GitHub 저장소를 생성해야 합니다. GitHub 계정으로 이동하여 프로젝트와 동일한 이름으로 새 저장소를 만듭니다.

다음으로 GitHub 저장소를 로컬 저장소에 원격으로 추가합니다.

git remote add origin <https://github.com/><username>/<repository name>.git

마지막으로 로컬 저장소를 GitHub에 푸시합니다.

git branch -M main
git push --set-upstream origin main

GitHub 페이지에 React 앱 배포

GitHub 페이지를 사용하려면 먼저 설치해야 합니다.

npm install gh-pages

gh-pages를 사용하면 코드를 배포할 gh-pages 분기를 만들 수 있습니다.

다음으로, package.json 파일로 이동하여 앱의 홈 URL이 될 홈페이지를 추가하세요.

"homepage": "https://<username>.github.io/<repository-name>/",
"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build", 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

다음 명령을 실행하여 배포 프로세스를 완료합니다.

npm run deploy

이제 애플리케이션이 GitHub에 배포되었으며 https://.github.io/에서 방문할 수 있습니다.

GitHub 페이지로 더 많은 작업 수행