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

1. GitHub 페이지 소개

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

주요 혜택:

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

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

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

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

1. React 앱 설정

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

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

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

1. 배포용 React 앱 준비

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

GitHub 페이지 패키지 설치:

npm install gh-pages --save-dev

package.json 업데이트:

package.json 파일에 다음 필드를 추가합니다.

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

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

1. GitHub 저장소 생성

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

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

README, .gitignore 또는 라이센스로 초기화하지 마십시오. 나중에 추가될 예정입니다.

1. GitHub 페이지에 React 앱 배포

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

Git 초기화 및 GitHub로 푸시:

git init
git remote add origin https://github.com//.git
git add .
git commit -m "Initial commit"
git push -u origin master

앱 배포:

npm run deploy

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

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

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

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

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

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

더 많은 문제 해결 팁을 보려면 GitHub 페이지 문제 해결 가이드를 참조하세요.

1. 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 앱을 자동으로 배포합니다.

1. 고급 배포 기술

기본 외에도 배포 프로세스를 향상하는 데 사용할 수 있는 몇 가지 고급 기술이 있습니다.

사용자 정의 도메인: 저장소에 CNAME 파일을 추가하여 GitHub 페이지 사이트에서 사용자 정의 도메인을 사용할 수 있습니다.

HTTPS 시행: 저장소 설정에서 HTTPS 옵션을 활성화하여 사이트가 항상 HTTPS를 통해 제공되는지 확인하세요.

지점 배포: 스테이징 및 프로덕션 환경을 위해 다양한 지점에서 배포합니다.

자세한 내용은 GitHub 페이지 사용자 정의 도메인 가이드를 참조하세요.

1. React 앱 배포 모범 사례

성공적인 배포와 고품질 사용자 환경을 보장하려면 다음 모범 사례를 따르세요.

빌드 최적화: webpack 및 Babel과 같은 도구를 사용하여 JavaScript 번들을 최적화하세요.

환경 변수 사용: 환경 변수를 사용하여 환경별 설정을 관리합니다.

성능 모니터링: 성능 모니터링 도구를 사용하여 배포된 앱의 성능을 추적하고 개선합니다.

더 많은 모범 사례를 보려면 React 배포 가이드를 참조하세요.

1. 결론

GitHub 페이지에 React 앱을 배포하는 것은 정적 웹사이트의 호스팅 및 관리를 크게 단순화할 수 있는 간단한 프로세스입니다. 이 가이드에 설명된 단계를 따르면 원활하고 효율적인 배포 프로세스를 보장할 수 있습니다.

이 가이드를 따르면 GitHub의 강력한 호스팅 기능을 활용하여 애플리케이션을 전 세계에 제공함으로써 React 앱을 GitHub 페이지에 배포할 수 있는 준비를 갖추게 됩니다.