GitHub Pages로 배포하기(Vite + React)

기존 GitHub Pages에 배포하는 방법을 정리해 놓은 글이 있지만,

CRA(create-react-app) 환경에서 가능한 방법이다.

 

하지만 CRA의 문제점으로 인해 더 이상 CRA를 사용하지 않는 것이 좋다.

따라서 CRA 환경이 아닌 Vite로 리액트를 개발했을 때 GitHub Pages에 배포하는 방법을 정리해 두려고 한다.

 

 

gh-pages 설치

Vite에서 gitHub Pages로 배포하기 위해 gh-pages 패키지를 설치해야 한다.

https://www.npmjs.com/package/gh-pages

gh-pages

npm install gh-pages --save-dev

 

 

배포 환경 설정하기

우선 Vite로 진행하기 때문에 프로젝트의 루트 폴더에 vite.config.ts 파일이 존재할 것이다.

이 파일에서 배포할 레포지토리 이름을 적어줘야 한다.

export default defineConfig({
  plugins: [react()],
  base: '/레포명/', // <- 이 부분
});

즉, 우리는 [[ https://깃헙아이디.github.io/레포명/ ]] 으로 접속하면 구현한 웹을 볼 수 있다.

(이때, 코드에 작성된 레포명과 실제 Git에 올라가 있는 레포지토리 이름이 다르면 리소스 경로가 달라서 오류가 뜬다.)

 

 

이제 package.json 파일을 수정할 차례이다.

기존 CRA에서는 vite.config.ts 파일에 base를 적는 대신, package.json에 "homepage"를 작성했을 것이다.

이제 Vite에서는 그럴 필요가 없다.

 

단지 "script"에 deploy 명령어를 추가하면 된다.

  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist" // <- 이 부분
  },

빌드를 진행하면 build 폴더가 아닌 dist 폴더가 생성되기 때문에,

dist폴더를 배포하는 것이다.

 

 

배포하기

이제 설정이 다 끝났기 때문에 빌드를 진행하면 된다.

다음 명령어로 프로젝트를 빌드할 수 있다.

npm run build

 

빌드가 끝나면 배포를 진행하면 된다.

(이때, Git 레포지토리와 연동이 되어 있어야 한다는 것을 기억해 두자)

 

다음 명령어로 프로젝트를 배포할 수 있다.

npm run deploy

 

Published가 뜨게 되면 배포를 완료했다는 뜻이다.

 

 

웹 접속

이제 배포된 웹을 확인하면 끝이다.

아까 base를 설정할 때 사용했던 주소로 접속하면 내가 만든 웹을 볼 수 있다.

 

[[ https://깃헙아이디.github.io/레포명/ ]]

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)