7.7 Publishing

자 오늘은 github page에 deploy를 해보자.

 

먼저 gh-pages라는 툴을 설치해보자.

npm i gh-pages

gh-pages는 github에 결과물을 업로드 할 수 있게 해주는 페키지이다.

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

 

가장 먼저 package.json에 있는 scripts를 확인해보자.

build라는 script가 있다.

이를 실행하면 웹사이트의 production ready code를 생성하게 된다,

production ready는 코드가 압축되고 모든게 최적화 된다는 의미다.

 

아래와 같이 build(압축, 최적화)를 실행시키면

npm run build

아래와 같이 build폴더가 생성된다.

그리고, cmd창에 아래의 명령어를 입력하면

git remote -v

아래와 같이 나오는데 이를 인용하여

origin  https://github.com/ddo0ii/NomadCoders_React.git (fetch)
origin  https://github.com/ddo0ii/NomadCoders_React.git (push)

package.json에 아래와 같이 추가하자.

"homepage": "https:// + github username + .github.io/ + github repositofy

 

다음으로는 deploy를 만들어주자.

deploy는 방금 설치한 gh-pages를 실행시키고, build라는 디렉토리를 가져가는거다.

근데 build후 deploy해야하는 번거로움을 없애기 위해 predeploy 커맨드를 만들어주자.

predeploy는 npm rin build를 실행시킨다.

 

build 폴더를 삭제하고

 

deploy를 실행하면, node.js가 predeploy를 먼저 실행시킬 것이다.

그래서 아래를 실행해보자.

npm run deploy

그럼 다음과 같이 자동적으로 실행되는 것을 확인할 수 있다.

gh-pages -d build

는 gh-pages가 build 폴더를 package.json에 입력해 놓은 homepage에 업로드하는 것이다.

이제 링크를 클릭해서 접속해보자. (좀 걸릴수도 있다. 5-10분)

정상적으로 출력이 되었다!!!

 

 

다음에 코드를 수정하고싶다면

npm run deploy

만 하면된다!

 

그럼 자동으로 프로젝트가 build되고, 그 폴더가 github pages에 push될것이다.