React 앱 배포: GitHub 페이지 사용 가이드-JS 튜토리얼-php.cn

React 앱 배포: GitHub 페이지 사용 가이드

王林

풀어 주다： 2024-07-18 20:01:19

원래의

404명이 탐색했습니다.

Deploying React Apps: A Guide to Using GitHub Pages

많은 개발자, 특히 생태계에 익숙하지 않은 개발자는 React 앱을 배포하는 데 어려움을 겪습니다. GitHub 페이지를 사용하면 React 앱을 포함한 정적 웹 페이지를 무료로 쉽게 호스팅할 수 있습니다. 프로세스의 모든 단계를 안내하는 이 상세한 튜토리얼을 통해 React 앱을 GitHub 페이지에 배포하는 것이 쉽고 번거롭지 않을 것입니다.

GitHub 페이지 소개

GitHub 페이지는 GitHub 저장소에서 직접 개인, 조직 또는 프로젝트 페이지를 호스팅하도록 설계된 정적 사이트 호스팅 서비스입니다. GitHub 워크플로와의 원활한 통합을 제공하므로 React 앱 호스팅에 이상적인 선택입니다.

주요 이점:

무료이며 사용하기 쉽습니다.

맞춤 도메인을 지원합니다.

사이트를 자동으로 구축하고 배포합니다.

자세한 내용은 GitHub 페이지 설명서를 확인하세요.

React 앱 설정

React 앱을 GitHub 페이지에 배포하기 전에 작동 중인 React 애플리케이션이 있는지 확인하세요. 아직 React 앱이 없다면 CRA(Create React App)를 사용하여 새로운 React 앱을 만들 수 있습니다.

npx create-react-app my-react-app
cd my-react-app

로그인 후 복사

이 명령은 필요한 모든 구성을 갖춘 새로운 React 프로젝트를 설정합니다.

배포용 React 앱 준비

GitHub 페이지에 React 앱을 배포하려면 앱 구성을 몇 가지 수정해야 합니다.

GitHub 페이지 패키지 설치:

npm install gh-pages --save-dev

로그인 후 복사

package.json 업데이트:

package.json 파일에 다음 필드를 추가하세요.

"homepage": "https://<username>.github.io/<repository-name>",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

로그인 후 복사

GitHub 사용자 이름과 저장소 이름으로 바꾸세요.

GitHub 저장소 생성

GitHub으로 이동하여 새 저장소를 생성하세요.

저장소 이름을 지정하고 공개로 설정하세요.

README, .gitignore 또는 라이센스는 나중에 추가되므로 초기화하지 마세요.

GitHub 페이지에 React 앱 배포

이제 React 앱이 준비되었고 GitHub 저장소가 있으므로 배포할 시간입니다.

Git 초기화 및 GitHub로 푸시:

git init
git remote add origin https://github.com/<username>/<repository-name>.git
git add .
git commit -m "Initial commit"
git push -u origin master

로그인 후 복사

앱 배포:

npm run deploy

로그인 후 복사

이 명령은 앱을 빌드하고 저장소의 gh-pages 브랜치에 배포합니다.

일반적인 배포 문제 및 문제 해결

GitHub 페이지에 React 앱을 배포할 때 문제가 발생할 수 있는 경우가 있습니다. 일반적인 문제와 해결 방법은 다음과 같습니다.

404 오류: package.json의 홈페이지 필드가 올바르게 설정되었는지 확인하세요.

빌드 실패: 빌드 스크립트를 확인하고 모든 종속성이 설치되어 있는지 확인하세요.

CORS 문제: 교차 출처 요청을 하는 경우 API 엔드포인트가 CORS를 지원하는지 확인하세요.

자세한 문제 해결 팁은 GitHub 페이지 문제 해결 가이드를 참조하세요.

GitHub Actions로 배포 자동화

GitHub Actions는 배포 프로세스를 자동화할 수 있는 강력한 CI/CD 기능을 제공합니다. 설정 방법은 다음과 같습니다.

워크플로 파일 만들기:

저장소에서 .github/workflows/deploy.yml이라는 파일을 생성합니다.

배포 스크립트 추가:

이름: GitHub 페이지에 React 앱 배포

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Build the React app
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

로그인 후 복사

이 워크플로는 마스터 브랜치에 변경 사항을 푸시할 때마다 React 앱을 자동으로 배포합니다.