git배포하기

✅ 1. gh-pages 브랜치가 필요 없는 경우

👉 **정적 파일(HTML, CSS, JS 등)**로 이루어진 프로젝트고,
👉 그리고 main 브랜치의 루트 폴더에 직접 파일들이 있는 경우

➡️

• GitHub 저장소 > Settings > Pages
• 배포 브랜치: main
• 폴더: / (root)
  이렇게 하면 그냥 main 브랜치의 루트에 있는 HTML 파일이 배포돼.

즉, 이 경우엔 gh-pages 브랜치 안 써도 됨!

✅ 2. gh-pages 브랜치가 필요한 경우

👉 빌드 툴(e.g. React, Vue, Svelte 등)을 사용하고,
👉 결과물이 /build 혹은 /dist 디렉터리에 생성되는 경우

➡️ 이런 경우엔 gh-pages 브랜치를 만들어서 빌드된 결과물만 따로 올리는 게 일반적.

보통 gh-pages npm 패키지를 이용해 자동 배포:

npm install gh-pages --save-dev

그리고 package.json에 스크립트 추가해서

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist" // 또는 build
   "homepage": "https://아이디.github.io/레포이름"
}

💡vite로 생성한react인경우 dist로..!!!

그 다음:

npm run deploy

✅ 일반의 경우에는?

그냥 정적인 HTML/CSS 프로젝트나, main 브랜치 root에 올린 거라면…

➡️ gh-pages 브랜치는 안 써도 된다!
➡️ Settings > Pages 가서 설정만 잘했으면 잠시 뒤에 링크 생김.

🔧 배포중 문제생김

난 vite로 react를 만들었고 배포후 url까지 다완료했는데 아무것도 안뜬다..
콘솔 보니 오류에 “Failed to load resource: the server responded with a status of 404”가 떠있음
👉 빌드된 파일 경로 문제 때문이란다

React 같은 SPA를 GitHub Pages에 배포할 때, 빌드된 자바스크립트 파일들이 상대경로가 아니라 절대경로(/index-NdsV6PRJ.js)로 접근하려고 해서 이런 404 에러가 나올 수 있다한다.

왜?

• Vite(빌드 도구)는 기본적으로 빌드 결과물의 경로를 / (루트)로 잡는다.
• 그런데 GitHub Pages는 https://github.com/username/repo-name 경로에 프로젝트가 올라가기 때문에, 빌드할 때 base 옵션을 "./" 혹은 "/repo-name/" 등으로 설정해줘야 정상 작동.

해결법

vite.config.js 파일에 base 옵션을 추가. 예를 들면:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base: '/todo-app-context-reducer/', // 여기 repo 이름 맞춰서 바꿔줘야 함
  plugins: [react()]
})

• base에 내 깃허브 저장소 이름(레포지토리 이름)을 정확히 써줘야 함.
• 이렇게 하면 빌드할 때 js, css 파일 경로가 올바르게 설정돼서 404 에러가 사라짐.

요약

1. vite.config.js 열기
2. base 옵션 추가 (base: '/레포이름/')
3. 다시 빌드 (npm run build)
4. 다시 배포 (npm run deploy)