[React] Publishing / GitHub Pages에 배포하기

create-react-app을 통해 만든 React 프로젝트를 GitHub Pages에 배포하는 방법을 알아보자.

 

Github Pages는 무료로 정적인 웹페이지를 만들 수 있도록 해준다.

html, javascript, css 파일을 올리면 웹사이트로 만들어서 전 세계에 무료로 배포해주는 서비스이다.

 

 

1. gh-pages를 설치

npm install gh-pages

Github Pages 사용을 위해 우선 gh-pages를 설치해준다.

gh-pages란 github pages에 업로드할 수 있게 해주는 패키지이다.

 

 

2. Build

package.js 파일을 확인해보면 build라는 스크립트가 있다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

이 스크립트를 실행하면 웹사이트의 production ready code를 생성하게 된다.

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

 

프로젝트를 배포하기 위해 build를 한다.

npm run build

 

build를 실행시키면 코드를 압축하고 최적화 된다. 

실행이 완료되면 build라는 폴더가 생성되고 폴더 안에 코드가 압축된 다양한 javascript를 확인할 수 있다.

이렇게 최적화된 코드는 브라우저가 이해할 수 있는 코드이다.

 

 

3. 업로드

build가 완료되면 github에 push해준다.

 

 

3-1. package.js 수정

package.js 파일 마지막 부분에 다음 코드를 추가해준다.

콤마 다음에 hompage를 써주고 url 주소에 깃헙 username과 마지막에 레파지토리 이름을 써준다.

,
"homepage":"https://{github username}.github.io/{repository name}"

 

또한 package.js 파일 script에 deploy와 predeploy를 추가한다.

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

deploy를 실행시키면 predeploy가 먼저 실행된다.

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

deploy가 하는 일은 gh-pages가 build 폴더를 homepage로 적어놓은 웹사이트에 업로드하도록 하는 것이다.

 

3-2. deploy

npm run deploy

package.js 파일을 수정하고 코드를 실행시켜 배포를 진행한다.

배포가 완료되면 url 클릭 시 웹페이지가 만들어진다.

웹사이트가 업데이트된 것을 확인하는 데에는 시간이 오래 걸리기 때문에 404 페이지가 보여도 당황하지 말자. 약 5~10분 정도 소요된다.

 

다시 코드를 수정하고 업데이트하고 싶다면 다시 "npm run deploy"를 실행시킨다.

그럼 자동으로 다시 프로젝트가 build 되고 build 폴더가 깃헙 페이지에 push 된다.

 

 

 

 

 

---

• 참고

[React] GitHub Pages에 배포