리액트 깃허브 배포하는 법 (with Vite)

지금까지 firebase , aws 배포를 해봤는데 그중 제일 간단하고 쉬운 깃허브 배포를 작성해 보겠다

 

1. npm i gh-pages 명령어 
2. package.JSON 수정
3. npm run build 명령어 
4. npm run deploy 
5. 홈페이지 확인하기

1. npm i gh-pages 명령어

우선 vs 터미널에 npm i gh-pages 명령어를 입력한다

 

2. package.JSON 

package.JSON에 들어가서 "homepage" : "내 레포 주소"를 추가해 주면 된다

다음 scripts안에 "deploy" : "gh-pages -d build" 추가

 

3. npm run build

내 폴더 빌드하기!!

build 폴더가 생성됐다면 성공적으로 끝난 것 

 

4. npm run deploy

마지막으로 npm run deploy 명령어를 통해 내 프로젝트를 배포한다.

 

5. 홈페이지 확인하기

아까  package.JSON에 추가해 줬던 홈페이지로 들어가 내 사이트를 확인하면 된다.

 

kimnambin Portfolio

나는 나의 포트폴리오 사이트를 만들어봤는데

왼쪽에서 오른쪽으로 수정 후 배포하였다.

 

번외 : Vite

만약 vite를 사용 중인 프로젝트라면 

vite.config에 다음과 같이 추가해 주면 npm run build 명령어시 dist 폴더가 아닌

build 폴더가 생성된다 ​

또한 base에 내 레포 이름을 넣어주면 된다.