[React] gh-pages 배포하기

👀gh-pages란?

github는 계정당 하나씩 배포용 도메인을 사용가능하도록 지원하고 있습니다.

깃허브 찬양해

이렇게 {username}.github.io의 형태의 도메인은 깃허브에서 지원해주는 도메인이라고 생각하면 됩니다.

 

https://jojoldu.github.io/

서버 백엔드 엔지니어

 

보통은 이걸 이용해서 개발블로그로 이용하시는 분들이 많고,

주어진 도메인 안에서 레포지토리별로 배포가 가능합니다.

 

프로젝트를 배포하게 되면 도메인은 이런 형태가 됩니다.

{username}.github.io.{repo}

 

다만 정적 웹페이지만 배포할 수 있기 때문에

동적인 기능이 들어갔다면 배포가 제한적일 수 있습니다.

 

이제 프로젝트를 배포하러 가봅시다

📤github repo 만들고 업로드하기

git으로 프로젝트를 push하는 방법에 대해서는 따로 다루지 않도록 하겠습니다.

git이 어렵다면 생성한 github repo에 폴더를 드래그 앤 드롭해도 업로드 가능합니다.

 

깃허브 레포지토리를 생성한 다음에

$ git remote add origin [github repo]

remote 연동까지 마쳐줍니다.

⚙프로젝트에 gh-pages 설치 & 세팅

// npm
$ npm install gh-pages --save-dev

//yarn
$ yarn add -D gh-pages

gh-pages를 devDependency로 설치합니다.

package.json에 "homepage": "http://{username}.github.io/{repo}" 추가합니다.

package.json파일의 scripts에 predeploy와 deploy 명령어 추가합니다.

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

 

이렇게하면 환경설정은 모두 끝났습니다.

 

파일들을 모두 main 브랜치에 push해주세요.

$ git push origin main

🚀gh-pages 배포하기

// 배포하기
$ npm run deploy

// 메시지와 함께 배포하기
$ npm run deploy -- -m "Deploy React app to GitHub Pages"

 

scripts에 추가해준 deploy 명령어를 실행해서 배포를 시작합니다.

깃허브에 메시지가 default로 올라가는 게 싫다면 -m 옵션으로 메시지를 작성해주어도 됩니다.

 

default 메시지는 Updates가 끝.

 

터미널에서 작업이 끝나면

깃허브 레포지토리로 확인하러 가봅시다.

🔮gh-pages 배포 확인하기

gh-pages 브랜치가 생겨있는 걸 확인할 수 있습니다.

gh-pages 브랜치는 배포용 브랜치이기 때문에 따로 건드리시면 안됩니다!

 

오른쪽 메뉴에 Environments에 github-pages라는 게 추가되어 있는 걸 볼 수 있습니다.

View deployment를 클릭하면 설정할 때 homepage에 입력했던 url로 배포가 되어 있는 걸 확인할 수 있습니다.

▶Reference

react-gh-pages 깃허브 

GitHub - gitname/react-gh-pages: Deploying a React App (created using create-react-app) to GitHub Pages

사실 여기 리드미에 다 나와있음