Github Pages를 사용하면 React 앱 배포가 그 어느 때보다 간편해집니다.

클라이언트와 진행 상황을 공유하거나 다음 사이드 프로젝트를 선보이고 싶었던 때를 기억하십니까? 우리 모두는 클릭 몇 번이면 가능하기를 바랐습니다.

이제 React 앱을 무료로 배포할 수 있는 간단한 방법이 있습니다.

패키지: gh-페이지

"GitHub의 gh-pages 분기(또는 다른 위치의 다른 분기)에 파일을 게시"할 수 있는 기능gh-pages을 제시합니다.
이 패키지는 반응 앱을 GitHub 페이지에 배포하는 데 필요한 일상적인 단계를 세 가지 간단한 단계로 자동화합니다.
기술적으로 이 패키지는 정적 파일의 기본 디렉토리가 적절하게 설정되어 있는 한 정적 사이트를 배포하는 데 도움이 될 수 있습니다. 자세한 내용은 2단계를 참조하십시오.

1단계: package.json에 홈페이지 추가

아래 단계가 중요합니다!
건너뛰면 앱이 올바르게 배포되지 않습니다.package.json를 열고 프로젝트에 대한 homepage 필드를 추가합니다.

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

또는 GitHub 사용자 페이지의 경우:

“homepage”: “https://myusername.github.io",

또는 사용자 지정 도메인 페이지의 경우:

“homepage”: “https://mywebsite.com",

Create React App은 homepage 필드를 사용하여 빌드된 HTML 파일의 루트 URL을 결정합니다.

2단계: gh-pages 설치 및 package.json의 스크립트에 배포 추가

이제 npm run build를 실행할 때마다 GitHub 페이지에 배포하는 방법에 대한 지침이 포함된 치트 시트가 표시됩니다.
https://myusername.github.io/my-app에 게시하려면 다음을 실행합니다.

npm install — save gh-pages

또는 원사를 사용할 수 있습니다.

yarn add gh-pages

package.json에 다음 스크립트를 추가합니다.

“scripts”: {
+ “predeploy”: “npm run build”,
+ “deploy”: “gh-pages -d build”,
“start”: “react-scripts start”,
“build”: “react-scripts build”,

predeploy 스크립트는 배포가 실행되기 전에 자동으로 실행됩니다.
deploy 스크립트는 앱을 자동으로 배포합니다.

참고: -d 옵션은 정적 파일의 기본 디렉토리를 가리킵니다. 프로젝트 구성에 따라 설정하십시오. 예를 들어 create-react-app의 기본 디렉토리는 기본적으로 build이고 webpack 구성의 경우 dist입니다.

프로젝트 페이지 대신 GitHub 사용자 페이지에 배포하는 경우 한 가지 추가 수정이 필요합니다.package.json 스크립트를 조정하여 배포를 마스터로 푸시합니다.

“scripts”: {
“predeploy”: “npm run build”,
- “deploy”: “gh-pages -d build”,
+ “deploy”: “gh-pages -b master -d build”,

3단계: 실행하여 사이트 배포npm run deploy그런 다음 다음을 실행합니다.

npm run deploy

프로젝트 페이지의 경우 프로젝트 설정이 gh-pages를 사용하는지 확인하십시오.

마지막으로 GitHub 프로젝트 설정의 GitHub 페이지 옵션이 gh-pages 분기를 사용하도록 설정되어 있는지 확인합니다.

선택적으로 도메인을 구성합니다.

CNAME 폴더에 public/ 파일을 추가하여 GitHub Pages로 사용자 지정 도메인을 구성할 수 있습니다.
CNAME 파일은 다음과 같아야 합니다.
복사

mywebsite.com

자원

자세한 내용은 리포지토리를 확인하거나 이 가이드의 기반이 되는 반응 앱 문서를 만드세요.
https://github.com/tschaub/gh-pages
https://create-react-app.dev/docs/deployment/#github-pages