[ReactJS 영화웹 ] #7.7 깃허브에 올리기(build/deploy )

패키지 설치

결과물을 github pages에 업로드 할 수 있게 해준다. 

github pages는 깃허브에서 제공하는 무료 서비스로 html css js를 올리면 웹사이트로 만들어서 전세계에 무료로 배포해준다. *업데이트하는데 시간이 좀 걸릴 수 있음.

$ npm i gh-pages

 

package.json

파일 열고 내용 추가한다.

{
...
"scripts": {
    ...,
    "deploy": "gh-pages -d build",  
    "predeploy": "npm run build"  //deploy하면 depoly되기 전에 먼저 실행되는 것.
  },
...
    },
      "homepage": "https://깃허브주소/react-movie-web" //깃허브 레파지토리에 업로드
}

*깃허브 레파지토리가 없으면 생성하고 써주기

 

build

$ npm run build

production ready란 코드가 압축되고 모든게 최적화 된다는 의미.  build폴더가 생겨남.

 

 

 

deploy

앞서 만들었던 build폴더를 삭제하고 실행해보면 확인 할 수 있다.

$ npm run deploy

> my-app@0.1.0 predeploy
> npm run build
...
...
...
> my-app@0.1.0 deploy
> gh-pages -d build

Published

 gh-pages -d build : build폴더를 "homepage":"https://~~"에 적어놓은 웹사이트에 업로드 하는 것.

 

🚨에러

"homepage": "https://깃허브주소/react-movie-web" 웹사이트에 접속하면 내용이 떠야하는데 빈 화면만 나온다면?

process.env.PUBLIC_URL를 경로앞에 붙여주기.

 <Route path={`${process.env.PUBLIC_URL}/hello`}