部署 React 应用程序：GitHub 页面使用指南

发布于2024-07-30

Deploying React Apps: A Guide to Using GitHub Pages

许多开发者发现部署React应用程序很困难，尤其是那些不熟悉生态系统的开发者。您可以使用 GitHub Pages 免费轻松托管静态网页，包括 React 应用程序。在这个详细教程的帮助下，将 React 应用程序部署到 GitHub Pages 将变得轻松无忧，该教程将引导您完成该过程的每一步。

GitHub Pages 简介

GitHub Pages 是一项静态站点托管服务，旨在直接从 GitHub 存储库托管您的个人、组织或项目页面。它提供与 GitHub 工作流程的无缝集成，使其成为托管 React 应用程序的理想选择。

主要优点：

免费且易于使用。

支持自定义域。

自动构建和部署您的网站。

有关更多信息，请查看 GitHub Pages 文档。

设置你的 React 应用程序

在将 React 应用程序部署到 GitHub Pages 之前，请确保您有一个可用的 React 应用程序。如果您还没有，您可以使用 Create React App (CRA) 创建一个新的 React 应用程序。

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

此命令使用所有必要的配置设置一个新的 React 项目。

准备部署您的 React 应用程序

要将 React 应用程序部署到 GitHub Pages，您需要对应用程序的配置进行一些修改。

安装 GitHub Pages 包：

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 用户名和存储库名称。

创建 GitHub 存储库

转到 GitHub 并创建一个新存储库。

命名您的存储库并将其设置为公共。

不要使用 README、.gitignore 或许可证进行初始化，因为这些将在稍后添加。

将您的 React 应用程序部署到 GitHub Pages

现在您的 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 分支。

常见部署问题和故障排除

将 React 应用程序部署到 GitHub Pages 有时会遇到问题。以下是常见问题及其解决方案：

404错误：确保package.json中的主页字段设置正确。

构建失败：检查构建脚本并确保安装所有依赖项。

CORS 问题：如果您发出跨源请求，请确保您的 API 端点支持 CORS。

有关更多故障排除提示，请参阅 GitHub Pages 故障排除指南。

使用 GitHub Actions 自动化部署

GitHub Actions 提供强大的 CI/CD 功能，可以自动化您的部署过程。设置方法如下：

创建工作流程文件：

在您的存储库中，创建一个名为 .github/workflows/deploy.yml 的文件。

添加部署脚本：

名称：将 React 应用程序部署到 GitHub Pages

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 应用程序。