[React] 14. 리액트 스터디 - github 배포 테스트

vscode에서 작성한 리액트 프로젝트를 github 에 배포하여

나만의 테스트 서버를 구축하는 방법. (니꼬쌤 강의를 보면서 복습해봅니다~)

 

선행되는 작업으로는 

1. 깃헙 가입하여 계정 정보가 있어야 하며 신규 repository를 생성 후 프로젝트와 연결이 필요

2. 로컬 PC에 git 을 설치한 후 프로젝트에 git remote를 통한 깃헙 리포지토리와 연결

 

[ gh-pages ] 

github pages 
git으로 관리하는 로컬 프로젝트를 호스팅 서버로 배포해주는 기능

프로젝트 내 콘솔창에서 npm 명령어를 이용하여 해당 라이브러리를 설치
# npm install gh-pages

[ package.json ] - 파일 수정

deploy 스크립트 추가 및 타겟 홈페이지 url (깃헙 주소) 를 매핑하여 
빌드 및 배포 시 해당 경로를 바라보게 처리

"scripts" 구문의 "deploy" / "predeploy" 항목 추가
"homepage" 구문 추가 : 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"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://TheValue.github.io/my-app/"

 

[ 빌드 및 배포 ]

npm run deploy 명령어를 실행하면
빌드 및 배포가 진행됨

PS C:\Users\mscho\react\myapp> npm run deploy

> myapp@0.1.0 predeploy
> npm run build


> myapp@0.1.0 build
> react-scripts build

Creating an optimized production build...
Compiled with warnings.

[eslint] 
src\routes\Detail.js
  Line 19:8:  React Hook useEffect has a missing dependency: 'getMovieDetail'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  56.99 kB  build\static\js\main.d85e1381.js

The project was built assuming it is hosted at /my-app/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment


> myapp@0.1.0 deploy
> gh-pages -d build

Published

 

github 페이지로 배포된 화면