[ReactJS] React로 영화 서비스 만들기 : 12. Publishing

TOC

• gh-pages
  • 설치
  • build 실행
  • 원리
  • 홈페이지 연동
  • scripts에 deploy 추가
  • 실행
• 오류 해결

gh-pages

결과물을 github에 올릴 수 있게(deploy) 하는 패키지

설치

$ npm i gh-pages

build 실행

npm run build

원리

package.json > scripts > build

production ready code 생성

production ready

코드 압축, 모든 게 최적화

홈페이지 연동

package.json에 홈페이지와 관련된 내용들을 추가해주어야 한다

// package.json

...
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://orchemi.github.io/cra-practice"
}

homepage를 key로, github url과 repo 이름을 위와 같이 기입

scripts에 deploy 추가

build를 관장하는 scripts에 deploy 항목을 넣어주자

// package.json

"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"
},

• deploy는 gh-pages에게 build라는 디렉토리를 가져가라고 명령하는 것
• deploy는 build가 있고 난 뒤에 실행해야 한다.
• 그런데 deploy 전에 항상 build하는 것을 기억하고 싶지 않다.
• 그래서 predeploy를 만들어 deploy 전에 항상 build할 수 있도록 한다.

실행

무언가 수정 이후 이를 deploy하고 싶을 때에는 아래의 명령어를 입력

$ npm run deploy

내부 진행 순서는 아래와 같다.

1. deploy 이전에 predeploy 실행
2. 수정 사항을 반영한 전체 코드 build
3. build된 내용을 기반으로 repo에 푸시
4. github page에 deploy

오류 해결

만약 route 컴포넌트가 나오지 않는다면?

가. basename 추가

컴포넌트 속성값으로 basename={process.env.PUBLIC_URL}을 추가

나. Route에 path 추가

Route path={`${process.env.PUBLIC_URL}/`} element={< Home />}