[Git 기초] GitHub Pages로 리액트 배포하기

Vite에서 gh-pages로 배포하기

코드를 완성했으면 이제 세상에 내보낼 차례입니다. GitHub Pages는 별도 서버 없이 GitHub 저장소만 있으면 무료로 정적 웹사이트를 배포할 수 있는 서비스입니다. gh-pages 패키지 하나면 터미널 명령어 한 줄로 배포까지 끝낼 수 있습니다.

01. 사전 준비

배포 전에 아래 두 가지가 준비되어 있어야 합니다.

• GitHub 계정과 원격 저장소(remote repository) 연결 완료
• React + Vite 프로젝트

02. gh-pages 설치

터미널에서 아래 명령어로 gh-pages 패키지를 개발 의존성으로 설치합니다.

npm install gh-pages --save-dev

설치 후 package.json의 devDependencies에 gh-pages가 추가된 것을 확인하세요.

03. vite.config.ts 설정

Vite 프로젝트는 배포 경로를 맞춰주기 위해 base 옵션을 추가해야 합니다.

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
export default defineConfig({
  plugins: [react()],
  base: "/저장소이름/",
});

04. package.json 스크립트 추가

package.json에 homepage와 배포 스크립트를 추가합니다.

{
  "homepage": "https://깃허브아이디.github.io/저장소이름",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
}

05. 배포 실행

설정이 완료되면 아래 명령어 하나로 배포합니다.

npm run deploy

배포가 성공하면 터미널에 Published가 출력되고, GitHub 저장소에 gh-pages 브랜치가 자동으로 생성됩니다.

06. GitHub Pages 설정 확인

GitHub 저장소의 Settings > Pages > Branch에서 gh-pages 브랜치가 선택되어 있는지 확인합니다.

정리

한 번 세팅해두면 이후에는 npm run deploy 한 줄로 끝납니다. 수정사항이 생기면 코드를 변경하고 다시 실행하면 자동으로 빌드 후 배포됩니다.