git hub를 이용해 웹 사이트 배포하기

1. gh-pages 란?

React로 만든 페이지의 결과물을 github pages에 업로드 할 수 있다.

npm i gh-pages

html , css , javascript를 올리면, 웹 사이트로 만들어서 전 세계에 무료로 배포해주고 도메인도 만들어준다.

 

package.json에 있는 build를 실행하면, 웹 사이트의 production ready code를 생성한다. ( build 파일 생성 )

production ready : 코드가 압축되고 모든 기능이 최적화 된다.

 

 - 이후에 git push 해준다.

---

자동으로 gh-page 실행하는 방법

1. homepage URL 설정하기

이후에 package.json의 마지막에 , 를 찍고 URL을 입력한다.

 },
  "homepage": "https://깃허브아이디.github.id/깃허브저장소이름"
}

깃허브 저장소 이름은

git remote -v

로 확인할 수 있다.

2. deploy 설정

 - package.json에 deploy, predeply를 설정해서 build 와 최적화를 자동으로 할 수 있다.

"deploy": "gh-pages -d build",
"predeploy": "npm run biuld"

predeploy는 build를 먼저 하고 deploy 해야하는 과정을 단축해준다 ( deploy 를 실행하면 predeploy가 먼저 실행되서 build명령을 수행한다)

 

3. deploy 실행

npm run deploy

-> predeploy 명령이 먼저 실행되서 build 파일을 생성하고, 이후에 deploy 명령이 실행되서 최적화를하고 웹 사이트를 업로드한다.

 

** 이후에 변경사항을 추가하고 싶다면, 

npm run deploy만 실행해주면 일련의 과정들이 자동으로 실행되고 push 까지 수행한다..