[React] Publishing to Github - gh-pages

create-react-app을 통해 만든 React 프로젝트를 깃허브에 배포하는 방법이다.

react로 개발하면서 사용한 JSX문법, react의 일부 코드 등은 브라우저가 이해할 수 없는 문법과 언어들이 포함되어있기에 배포 과정에서 build 폴더를 만들어 업로드한다, build 폴더를 생성하게되면 개발자가 만든 코드들을 브라우저에 최적화되도록 HTML, CSS, 그리고 JS로 자동으로 압축 및 변환하여 담아준다.

1. gh-pages 패키지를 설치한다 (gh-pages: github page에 업로드할 수 있게 하는 패키지)
   npm install gh-pages

2. build 폴더를 생성한다.
   npm run build

3. package.json 파일에 아래 내용 추가

• script 항목에 deploy, predeploy 추가
  (deploy는 gh-pages를 빌드해주는 코드, predeploy는 deploy가 실행되기 전에 작동하는 코드)
• package.json 맨 하단 부에 homepage 항목 추가하여 본인의 repository url을 입력

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
},
  ...
"homepage": "https://{gitgub username}.github.io/{repository name}"

4. 프로젝트를 깃허브에 deploy하여 업로드한다.
   (코드 수정 시 다시 deploy하여 push하면 됨)
   npm run deploy

5. 터미널에 Published뜨면 배포된 것.

6. 배포가 완료되면 자신의 깃허브 repository url을 통해 웹페이지에서 해당 앱을 조회할 수 있다.