Vite로 React 프로젝트 빌드 후 github에 배포하기

👉 Vite로 빌드한 프로젝트 배포하기

1. 작업 프로젝트가 github 레파지토리와 연동되어 있어야 한다.

git remote add origin http://레파지토리주소.git

 

2. vite.config.js 에 base url을 수정한다.

참고 : https://ko.vitejs.dev/guide/static-deploy.html#github-pages

// vite.config.js
export default {
  base: '/your-repo-name/', // Change this to your GitHub repository name
}

 

3. 깃허브 레파지토리 설정 페이지에서 GitHub Pages 설정으로 이동한 후, 배포 소스를 "GitHub Actions"로 지정한다.

GitHub Actions란?
Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다.

GitHub Actions를 설정해 놓으면 git push같은 이벤트를 트리거하여 프로젝트를 빌드하고 배포하는 워크플로우(workflow)를 생성할 수 있다.

workflow는 yml 파일로 구성되며 .github/workflows 디렉토리 안에 위치한다.

(참고 https://ko.vitejs.dev/guide/static-deploy.html#github-pages)

프로젝트 터미널에서 git push를 하면 자동으로 빌드가 진행된다.

빌드 진행 상황은 깃허브 액션탭에서 확인할 수 있다.

 

빌드 완료 후 프로젝트 배포 url에 접속해보니 빈화면이 떴다.. 콘솔창에 에러도 뜨지 않는다...🤔

 

생각보다 나와 같은 이슈를 겪은 글이 많이 보였고, 일단 찾아본 결과 라우터와 관련된 이슈였다.

깃허브 페이지는 루트 경로를 '/'로 자동으로 설정되는데, 내가 작업한 프로젝트는 / 뒤에 서브레파지토리가 있기 때문에 페이지 연결이 되지 않아 빈화면이 뜨는 것 같다.

 

✅ 해결 방법

const BASE_URL = import.meta.env.BASE_URL;

<BrowserRouter basename={BASE_URL}>
    <Routes>
        <Route path="/" element={<Layout />}>
           	...생략
        </Route>
    </Routes>
</BrowserRouter>

BrowserRouter 에 basename를 설정해주면 되는데 vite에서 제공하는 환경 변수에서 import.meta.env.BASE_URL을 제공하는 것을 파악해서 위와 같이 설정해 주었다.

(참고 : https://ko.vitejs.dev/guide/build.html#public-base-path)

 

이렇게 설정 후 배포화면을 다시 보니 제대로 작동되는 것을 확인할 수 있었다!