💻 gh-pages

github에서 제공하는 무료 서비스로, 결과물을 github pages에 업로드 할 수 있게 해주는 패키지

🚩 1. 설치하기

npm i gh-pages

package.json에 "scripts" 아래를 보면 “build” 가 있다.

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

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

🚩 2. build script run

npm run build

위처럼 build script를 실행하면 build 라는 폴더가 새로 생긴다.

🚩 3. Github Pages에 push하기

package.json에

"homepage": "https://{github_username}.github.io/{github_repository_name}"

🚩 4. deploy script 만들기

# package.json

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

이후 npm run deploy 하면 Node.js가 predploy 를 먼저 실행시킨다.

그리고 나서 package.json의 homepage에 작성한 링크로 들어가면 정상적으로 배포된 것을 확인할 수 있다.

💡 배포 후 빈 화면이 나올 경우

1. .env 파일 생성 후 아래 내용 추가

PUBLIC_URL=https://jiwonmik.github.io/wanted-pre-onboarding-frontend

2. <BrowserRouter> 부분 수정하기

  <BrowserRouter basename={process.env.PUBLIC_URL}>
    ...
  </BrowserRouter>