React + Vite 프로젝트를 GitHub에 올렸고, 이제 그걸 GitHub Pages에 배포해서 실제 웹에서 볼 수 있게 배포하기

✅ 목표

• https://your-username.github.io/port-react/ 같은 주소로 React 앱 배포
• Vite 기반 + SCSS + GitHub 연동 상태 기준

✅ 사전 준비

• ✅ GitHub 레포에 이미 push 되어 있어야 함
• ✅ 브랜치는 main 기준으로 설명할게

✅ 1단계. gh-pages 패키지 설치

bash
복사편집
npm install --save-dev gh-pages

✅ 2단계. vite.config.js에 base 경로 설정

파일: vite.config.js

js
복사편집
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/port-react/', // 💥 꼭 GitHub repo 이름으로 설정!
})

예: GitHub 주소가 https://github.com/joyeji/port-react → base: '/port-react/'

✅ 3단계. package.json에 script 추가

json
복사편집
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "deploy": "gh-pages -d dist"
},
"homepage": "<https://joyeji.github.io/port-react>"