[React] Github Pages로 리액트 프로젝트 무료 호스팅하기

참고 사이트 : https://reactgo.com/deploy-react-app-github-pages/

리액트로 생성한 정적 웹페이지는 AWS의 S3, Heroku, Github Pages 등을 사용하여 무료 또는 저렴한 가격으로 호스팅할 수 있습니다.

Heroku의 경우에는 한국 Region을 지원하지 않기 때문에 접속 시 해외망을 경유하여 속도가 매우 느립니다. 

AWS S3의 경우에는 소액이지만 S3 공간에 대한 금액이 발생합니다. 

 

따라서 무료로 사용 가능한 Github Pages를 활용하여 리액트 프로젝트를 호스팅 해보겠습니다. 

Github Page는 Github에서 제공하는 웹 호스팅 서비스로 무료로 사용하기 위해서는 Gibhub 리포지터리를 공개형(Public)으로 설정해야 합니다. 보안상 소스 공개가 불가능한 프로젝트라면 AWS S3를 추천드립니다. 

 

이번 튜토리얼은 gh-pages라는 라이브러리를 활용하며 다음과 같이 진행합니다. 

 

1. CRA로 테스트용 리액트 프로젝트 생성

$ npx create-react-app github-pages-test
$ cd github-pages-test
$ code . (MacOS로 VS Code 사용 시)

 

2. Github repo 생성 (Github pages를 사용하기 위해서는 Public으로 repo를 생성해야 합니다.) 

3. 테스트용 프로젝트 Github 세팅

echo "# github-pages-test" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/november11th/github-pages-test.git
git push -u origin master

 

4. Github 프로젝트 repo 내 Settings로 이동 

    - GitHub Pages 메뉴에서 Source를 master branch로 지정하여 웹사이트 URL을 확인합니다.

       예제에서는 https://november11th.github.io/github-pages-test/ 입니다. 

5. 프로젝트 내 package.json 파일에 homepage 프로퍼티 설정

 

6. 프로젝트 내 gh-pages 모듈 설치 

yarn add gh-pages

 

7. 프로젝트 내 package.json 파일에 다음 predeploy, deploy 스크립트 명령어 추가

"scripts":{
 "predeploy": "react-scripts build",
 "deploy": "gh-pages -d build",
}

 

8. 프로젝트에서 yarn deploy 실행

$ yarn deploy                                                                                                            1 ↵
yarn run v1.21.1
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  39.4 KB  build/static/js/2.389e231c.chunk.js
  787 B    build/static/js/runtime-main.85847e19.js
  654 B    build/static/js/main.17df9291.chunk.js
  547 B    build/static/css/main.5f361e03.chunk.css

The project was built assuming it is hosted at /github-pages-test/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  bit.ly/CRA-deploy

$ gh-pages -d build
Published
✨  Done in 15.57s.

yarn deploy가 문제 없이 실행 되었다면 Github repo 내 gh-pages 브랜치가 추가 생성되었습니다.

 

 

9. 다시 Github 프로젝트 repo 내 Settings로 이동하여 GitHub Pages 메뉴에서 Source를 변경합니다.
    이번에는 master가 아닌 방금 생성된 gh-pages 브랜치를 지정합니다. 

 

10. 이제 https://november11th.github.io/github-pages-test/로 접속하면 다음과 같이 CRA로 생성한 테스트 웹사이트가 화면상에 출력됩니다. 이후 코드가 변경될 시에는 yarn deploy로 변경사항을 바로 Gitub pages에 배포할 수 있습니다.