[Git] GitHub Page 사용하기

GitHub 페이지는 react-scripts@0.2.0 이상에서 사용할 수 있다.

https://create-react-app.dev/docs/deployment/

 

 

1. package.json 파일을 열어 homepage 필드를 추가한다.

• GitHub Page 의 주소는 기본적으로 "UserId.github.io/RepositoryName" 의 형태로 프로젝트 페이지를 이용한다.
• Create React App 은 홈페이지 필드를 사용하여 빌드된 HTML 파일의 루트 URL 을 결정한다.
• 아래의 3가지 방법 중 택 1 하도록 한다.

// gh-pages 기본 주소(프로젝트 페이지)로 입력하는 방법.

"homepage": "https://myusername.github.io/my-app"

 

// 또는 GitHub 유저 페이지로 입력하는 방법.

"homepage": "https://myusername.github.io"

 

// Custom domain 을 입력하는 방법.

"homepage": "https://mywebsite.com"

 

 

 

2. gh-pages 를 설치하고 package 의 script 에 배포를 추가한다.

• npm 실행 빌드를 실행할 때마다 GitHub Pages 에 배포하는 방법을 이용
• predeploy script 는 deploy script 가 실행하기 전에 자동으로 실행

// gh-pages 설치(npm 사용 시)

npm install --save gh-pages

 

// gh-pages 설치(yarn 사용 시)

yarn add gh-pages

 

// package.json 파일의 scripts 에 추가 사항

"scripts": {

+    "predeploy": "npm run build",

+    "deploy": "gh-pages -d build",

      "start": "react-scripts start",

      "build": "react-scripts build",

 

// 프로젝트 페이지 대신 GitHub 사용자 페이지로 배포하는 경우 추가 사항

"scripts": {

+    "predeploy": "npm run build",

-     "deploy": "gh-pages -d build",

+    "deploy": "gh-pages -b master -d build",

 

 

 

3. Deploy

// gh-pages 배포

npm run deploy