Git gh-pages로 React 프로젝트 배포하기

프로젝트를 로컬에서 완성하고 업로드 하는김에 호스팅까지 하고 싶다

 

github에 호스팅을 하려면 gh-pages 모듈이 필요하다.

cd TodoApp
npm install gh-pages --save-dev

 

모듈 설치 후 devDependencies가 package.json에 잘 추가되었는지 확인한다.

{
  ...
  "devDependencies": {
    "gh-pages": "^3.2.3"
    },
  ...
}

 

추가로 packages.json을 수정한다

 

{
  "homepage": "https://usgnusmig.github.io/todoApp",
  ...
  "scripts": {
    ... "predeploy": "react-scripts build",
    "deploy": "gh-pages -d build",
    ...
  },
  ...
}

homepage에 https://<사용자이름>.github.io/<저장소이름> 값을, scripts는 predeploy와 deploy를 넣는다.

 

predeploy는 deploy전에 실행 된다

설정을 마쳤으면 배포를 한다

 

yarn deploy

 

위 명령어를 수행하면, predeploy가 먼저 실행되어 프로젝트 빌드가 수행된다.

빌드가 완료되면 deploy가 실행되어 github page에 호스팅이 된다

 

이제 Git 저장소의 settings로 가 ‘Check it out here!’을 클릭하고

 

아래와 같이 화면이 나타나면 성공이다.