react 프로젝트 무료 호스팅 하는 방법

리액트를 하면서 프로젝트를 자동으로 업데이트되는 방법이 있다는 것을 알게 되었다.

하지만 아직 시도는 해보지 않았지만, 이번기회에 시도를  해보려고 한다.

 

 

 

1. 프로젝트에 gh-pages를 설치를 한다.

yarn add --dev gh-pages

위 명령어를 사용하는 이유는, 개발자모드에서만 사용하기에 이렇게 패키지 설치를 진행하였다.

하지만, --dev를 제외한 상태로 패키지를 설치할 수 도 있다.

 

2. 설치가 완료 된 후 아래와 같이 패키지에 추가적으로 작성한다.

 // 생략
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "react-scripts build",
    "deploy": "gh-pages -d build"
  },
// 생략

deploy(배포)는 gh-pages에서 나오는 배포 방법이지만, 저 predeploy는 아직 못 찾았다.

 

package.json의 scripts를 추가한 이미지

위 이미지는 실제로 작성한 패키지 내용이다.

 

다음으로는 프로젝트에서 yarn deploy를 실행한다.

yarn deploy 실행 모습

3. 성공적으로 실행이 되었다면 Gihub repo에서 gh-pages 브랜치가 추가 생성이 된 것을 확인할 수 있다.

github에 추가된 브랜치 이미지

 

4. 내 프로젝트 -> Settings -> Pages -> GitHub Pages -> Source에서 gh-pages를 브랜치로 지정된 것을 확인한다.

github -> Settings -> Pages -> GitHub Pages -> Source -> gh-pages 선택 확인하기

 

5. package.json에 homepage 프로퍼티를 설정한다. 홈페이지에는 위에서 제공하는 사이트를 입력한다.

homepage를 package.json에 추가한 이미지

 

6. yarn deploy를 실행하면 해당하는 홈페이지에서 확인이 가능하다.

 

 

 

생각보다 지금 사용하는 gh-pages의 방법은 매우 간단하였다.

이전에 학원 다닐 때에는 이해하지 못하였던 프로젝트 파트너가 하던 것이었다.

지금 생각해보면, 너무 민폐를 가졌고 사과를 하고 싶다.

하지만, 현재 내 실력은 매우 부끄러웠고 나중에는 부끄럽지 않게 만나기를 바라며 이상 글을 마무리하려 한다.