gh-pages로 내 React 웹사이트 배포하기

heony·2022년 3월 11일
0

GitHub 레포지토리에 작성한 코드를 무료로 배포하는 방법을 알아봅시다 !

Target .

  • GitHub 레포지토리에 있는 코드로 웹 배포하려는 사람들
  • React를 사용하는 사람들

GitHub Pages

시작하기에 앞서, GitHub Pages는 뭘까요?

GitHub Pages
당신의 GitHub repository의 코드를 host해주는 기능

GitHub repository에 코드를 올리고 몇가지 설정만 해주면 무료로 웹 배포를 할 수 있는 좋은 기능입니다.

보통 웹 배포를 직접 하려면,
1. 유료 서버 혹은 낮은 성능의 무료 서버 구하기 (비용 혹은 유지보수 문제)
2. 그 서버에 웹 배포를 위한 여러가지 세팅을 해주기 (복잡함)

위 두가지가 필요합니다.

직접 웹 배포를 해보는 것도 좋지만 굳이 그럴 필요가 없는 사람들은 GitHub Pages를 쓰는 게 편합니다.

GitHub Pages 들어가보기

그럼 어디서 설정할 수 있을까요 ~
설정하고 싶은 레포지토리에 들어가서 Settings 에 들어갑니다. (22.03.11 기준)

Pages 에 들어가서 Source 를 보면 현재 GitHub Pages가 비활성화되어 있다고 표시됩니다.

GitHub Pages를 활성화하려면 바로 아래 None이라 표시된 부분을 특정 branch로 설정해야 합니다.
그 branch의 코드가 호스팅되는 거에요.

Source에서 None 말고 아무 branch나 눌러서 호스팅될 사이트 주소를 알아야 합니다.
보통 https://ID이름.github.io/repository이름 으로 정해집니다.

그럼 호스팅할 코드는 어떻게 만들까?
웹을 배포하려면 작성한 코드 그대로 올리는 게 아니라, build해서 가볍게 만든 코드를 올려야 합니다.

GitHub Pages에서 호스팅할 수 있도록 gh-pages라는 npm package를 사용할 것입니다.

gh-pages

gh-pages는 GitHub Pages 기능을 위해 파일들을 배포하는 패키지입니다.

패키지 설치하기

배포하고 싶은 프로젝트에 gh-pages를 설치합니다.

npm install gh-pages --save-dev

yarn을 사용한다면 add로...

yarn add gh-pages --save-dev

package.json 수정하기

React 프로젝트의 package.json을 수정해줍니다.

  • "homepage": "호스팅될 웹사이트 주소"
  • "predeploy": "npm run build"
  • "deploy": "gh-pages -d build"

배포하기

이제 배포해줍니다.

npm을 사용한다면 이렇게,

npm run deploy

yarn을 사용한다면 이렇게.

yarn deploy

그러면 배포가 시작됩니다.

배포가 성공적으로 완료되었다면 gh-pages 브랜치가 새로 생깁니다.

Source 의 branch를 gh-pages로 설정해줍니다.
별 일 없으면 정상작동합니다 ㅎㅎ

변경이 제대로 반영되지 않은 것 같다면 캐쉬를 제거해 보기 !
참고로 크롬은 ctrl + R 이 캐쉬제거 단축키.

이렇게 무료로 웹 호스팅을 했습니다 ~ 🥳🥳

이제 호스팅한 웹사이트 주소를 첨부해 readme만 보기좋게 작성하기만 하면 됩니다 !

웹을 여러 개 호스팅하기 힘든 프론트엔드 개발자에겐 정말 좋은 기능이에요.
웹 호스팅을 직접 해보긴 했지만,, 각 프로젝트마다 그렇게 하려니 서버도 그렇게 좀 부담됐는데 ㅎㅎ

profile
개발하는 감자

0개의 댓글