최근 React 앱을 GitHub Pages에 띄우면 좋겠다는 생각을 했다. 그렇게 된다면 배포 과정을 GitHub 상에서 처리함으로써 대역폭도 절약하고 서버 구조도 단순화 시킬 수 있을 것이라 생각했다. 그래서 이를 위한 boilerplate 코드를 만들어보았다.

요점

  • GitHub에는 docs 폴더를 자동으로 랜딩 페이지처럼 만들어주는 기능이 있다.
  • Create-React-App은 완성본을 build 폴더에 저장한다.
  • 앱을 빌드할 때마다 자동으로 /build 폴더에서 /docs 폴더로 내용물을 옮긴다면 마치 CI/CD를 구축한 효과를 얻을 수 있을 것이다.

구현

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build && rm -rf docs && mv build docs",
  "test": "react-scripts test --verbose",
  "eject": "react-scripts eject"
},

yarn build 명령을 통해 docs 폴더 안의 앱을 최신 빌드로 업데이트 할 수 있다.

결과

React App
Web site created using create-react-app
anaclumos/react-on-github-pages
Contribute to anaclumos/react-on-github-pages development by creating an account on GitHub.