[Vite] Vite 프로젝트 gh-pages로 배포하기

Vite로 만든 프로젝트를 gh-pages로 배포할 때는 gh-pages 라이브러리를 설치하지 않아도 된다.

 

vite.config.js 파일로 가서 base를 추가한다.

// vite.config.js

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


// https://vitejs.dev/config/
export default defineConfig({
  base: '/레포이름/',
  plugins: [react()],
});

 

BrowserRouter에 basename을 추가한다.

const Router = () => {
  return (
    <ThemeProvider theme={theme}>
      <BrowserRouter basename='/레포이름'>
        <Routes>
          <Route path='/' element={<Main />} />
          <Route path='/detail/:id' element={<Detail />} />
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  );
};

 

HashRouter라면 basename은 필요없다!

 

gh-pages로 배포하는 것이니 목데이터나 이미지 src 경로가 잘되어있는지 확인한다.

index.html에 파비콘 경로도 확인할 것!

./경로도 된다는 블로그 글이 있던데 지인은 그렇게 해도 이미지가 안떴다고 해서 /없이 바로 시작하는 경로를 추천한다.

// bad 👎
./images/photo.png
/images/photo.png

// good 👍
images/photo.png

 

빌드 명령어를 실행한다.

npm run build

 

기존에 gitignore에 있는 dist 폴더를 강제로 스테이징에 추가한다.

git add dist -f

 

변경사항을 커밋한다.

git commit -m "🚀Add : Adding dist”

 

gh-pages 브랜치를 생성하는 명령어를 입력한다.

git subtree push --prefix dist origin gh-pages

 

그리고 조금 기다리면 해당 깃헙페이지에 settings의 pages에서 링크를 확인 할 수 있다.

---

위 방법과 똑같이 배포했는데도 404가 뜬 동기가 있어서 확실하지는 않지만 재배포를 할 때는

1. 로컬에 dist폴더를 삭제하고 npm run build를 실행한다.

2. 원격에 gh-pages 브랜치를 삭제하고 진행한다.

 

이 2가지를 지키려고 한다.😀 뭐든 다 없애고 다시하는게 낫지!👍