React - (7) gh-pages 를 이용한 웹사이트 배포

gh-pages를 사용해 내가 만든 웹사이트를 빌드해서 배포할 수 있다.

깃허브에서는 리퍼지토리에 무료로 웹사이트를 빌드하게 해주는데, 주소는 다음과 같다.

 

https://{github아이디}.github.io/{repository_name} 

gh-pages 설치

먼저 gh-pages를 설치한다.

npm i gh-pages

 

이후 프로젝트 폴더의 package.json 파일을 수정해준다.

 

(1) hompage 프로퍼티 추가

... 
 	],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://sweethoneybee.github.io/movie_app/"
}

먼저 homepage 프로퍼티를 추가해주는데, 빌드한 프로젝트를 올릴 주소를 적어주면 된다.

위에서 언급했듯이 깃허브에서 무료로 제공해주기에 그 주소를 사용했다.

 

(2) deploy, predeploy 추가

...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  },
  ...

deploy는 gh-pages가 build 폴더를 homepage 프로퍼티에 적힌 주소에 배포하는 역할을 한다.

predeploy는 우리가 deploy 명령을 했을 때 먼저 앞서서 실행되는 명령어이다.

(같은 명령어이기만 하면 pre를 붙여서 먼저 실행하도록 하게 할 수 있음)

 

그래서 다음과 같이 입력하면 build를 해서 build 폴더를 만들고, gh-pages가 지정된 주소(homepage)에 배포를 시작하는 것이다.

npm run deploy

 

빌드만 하기 위해선 다음과 같이 입력한다.

npm run build

 

만약 소스코드를 수정해서 빌드를 다시 해야 하는 경우, 또 npm run deploy 를 통해 다시 배포하면 된다.

 

 

여기까지 React를 간단히 사용해서 하나의 프로젝트를 완성했다. 

완성된 홈페이지는 다음과 같다.

 

https://sweethoneybee.github.io/movie_app/

Movie App