리액트 gh-pages 적용

리액트 gh-pages 적용

• 리액트로 만든 사이트를 github에서 호스팅할 경우, gh-pages 패키지를 사용하면 편하다.

• 일반적인 깃허브 페이지는 빌드한 파일들을 해당 브랜치에 넣어두는데, 이 패키지를 사용하면 원격 리포지토리에 gh-pages라는 브랜치가 생기고, 거기에 빌드하게 된다.

---

적용 과정

• 다음 명령어 중 하나로 gh-pages 패키지를 설치한다.

  $ npm install gh-pages
  $ yarn add gh-pages

  • --save 옵션은 관습적으로 사용하는 것 같다. (https://xtring-dev.tistory.com/entry/NPM-npm-install-%ED%95%A0-%EB%95%8C-save%EB%A5%BC-%ED%95%A8%EA%BB%98-%EC%9E%85%EB%A0%A5%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0)

• 프로젝트의 package.json 파일을 아래처럼 수정한다.

  {
    "homepage": "도메인주소",
    ...(생략),
    "scripts": {
      ...(생략),
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build"
    }
  }

• 이 후 배포할 때 다음 명령어 중 하나를 실행하면 새로운 브랜치로 pull request를 할 수 있고, 이를 처리하면 gh-pages 브랜치가 생성된다.

  $ npm run deploy
  $ yarn deploy

• 이후 깃허브의 Settings -> Pages 에서 브랜치를 설정하면 페이지가 해당 브랜치에 대해 설정된다.

---

참고

• https://www.hohyeonmoon.com/blog/react-js-github-pages-deploy/