[ React ] React 프로젝트 GitHub Pages로 배포하기

 

 

만든 React 프로젝트들은 GitHub 를 통해 배포하려면

추가적으로 처리해줘야하는 단계들이 존재했다.

( 그냥 GitHub Pages 에서 배포하려하면 아무런 주소가 뜨지 않는다. )

 

 

여러 배포 방법들이 존재하지만

나는 이 글에선 gh-pages 패키지를 통해 배포하는 방법을 소개하겠다.

 

 

✅ gh-pages 패키지 설명

 

https://github.com/tschaub/gh-pages

GitHub - tschaub/gh-pages: General purpose task for publishing files to a gh-pages branch on GitHub

 

 

✅ Create React App 공식문서에 나와있는 gh-pages 패키지 사용법

 

https://create-react-app.dev/docs/deployment/#github-pages

Deployment | Create React App

 

 

 

🚀 gh-pages 패키지 설치 방법

 

1. gh-pages 패키지 설치

npm install gh-pages --save-dev

 npm install gh-pages --save-dev

 

2. package.json 파일의 "scripts" 안에 다음 내용을 추가

"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",

"predeploy": "npm run build",

"deploy": "gh-pages -d build",

 

3. 이제 위의 과정들을 마쳤다면, 다음 명령어를 입력해주면 build 과정과 배포 과정을 한번에 실행해준다.

npm run deploy

npm run deploy

 

 

위 사진과 같이 Published 가 뜬다면 완료다

 

 

Settings > Pages 로 들어가면 배포된 링크를 볼 수 있다.

( 배포에 길게는 몇 분 정도가 소요되니 조금 기다려야한다. )

( 사진의 Branch가 gh-pages로 설정되어있는지 확인 )

 

✅ 만약 프로젝트를 수정하고 다시 배포한다면 ?

수정이 완료된 프로젝트에서
npm run deploy
를 입력해주면 끝이다 !