[React] github hosting

이번에 Nomadcoder님의 Twitter clone project를 해보면서 github로 호스팅할 수 있는 방법을 알게 되어 정리해본다.

git 연동

본인의 프로젝트에 다음과 같은 작업을 통해 project와 git을 연동시킨다.

git init
git remote add origin <git 주소>

pakcage 설치

다음 명령어를 통해 github hosting이 가능하도록 해주는 package를 설치한다.

npm i gh-pages

Package.json 작성

package.json 파일에 다음 내용을 입력한다. (전체적인 구조에서 필요한 부분만 볼 수 있도록 작성하였음)

 {
  "name": "jwitter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "homepage": "https://jeeseongmin.github.io/jwitter",
}

1. scripts 부분에서 deploy 명령어를 위해 predeploy, deploy를 입력해준다.

2. homepage를 작성한다.
   현재 git 저장소가 github.com/peration/jwitter라면, https://peration.github.io/jwitter 라고 작성해주면 된다.

project build

npm run build 명령어를 입력하면, build 파일이 생성되면서 자동으로 지정한 homepage url에 업로드를 해준다. 업로드 시간을 충분히 기다린 후에 동작을 확인하면 된다.