使用 GitHub Actions 进行自动化 React 部署
部署 React 应用程序可能是一个乏味且耗时的过程，尤其是在您管理多个项目或与团队合作时。但是，借助 GitHub Actions 的强大功能，您可以自动执行此过程，并确保直接到 GitHub Pages 的无缝部署工作流程。在这篇博文中，我们将探讨如何利用 GitHub Actions 通过 GitHub Actions 进行自动化 React 部署，以简化将 React 应用程序部署到 GitHub Pages 的过程。
了解 GitHub Pages
GitHub Pages 是一种静态站点托管服务，允许您直接从 GitHub 存储库托管您的网站。这是托管静态网站、文档和个人博客的绝佳选择。GitHub Pages 支持自定义域、HTTPS 和 Jekyll，使其成为托管各种类型内容的多功能平台。
开始
让我们先使用 Vite 设置一个新的 React 项目。如果你已经有一个现有的 React 项目，你可以跳过这一步。
npm create vite@latest设置 React 项目后，创建新的 GitHub 存储库，并使用以下命令将代码推送到存储库：
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin
git push -u origin main安装 GitHub Pages
接下来，安装包，这简化了将 React 应用程序部署到 GitHub Pages 的过程：gh-pages
npm install gh-pages --save-dev配置部署脚本
在您的文件中，添加以下脚本以自动执行部署过程：package.json
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist", // here dist is the build folder of your project
"postdeploy": "echo 'Deployment complete!'",
}在文件中，添加以下配置以确保您的 React 应用程序已正确部署：vite.config.js
export default defineConfig({
base: "//", // add repository name here
plugins: [react()],
})部署到 GitHub Pages
要将 React 应用程序部署到 GitHub Pages，请运行以下命令：
npm run deploy就是这样！您的 React 应用程序现在已部署到 GitHub Pages。您可以使用以下 URL 访问它：。https://.github.io//
当您对 React 应用程序进行更改并想要重新部署时，只需再次运行该命令即可。但是，每次进行更改时手动运行此命令可能会很麻烦。这就是 GitHub Actions 发挥作用的地方。npm run deploy
什么是 GitHub Actions？
GitHub Actions 是一个强大的自动化工具，允许您直接在 GitHub 存储库中定义自定义工作流程。您可以使用 GitHub Actions 构建、测试、打包、发布和部署代码，而无需离开 GitHub。通过创建工作流程文件，您可以定义使用 GitHub Actions 进行自动 React 部署所需的步骤，以确保您的 React 应用程序始终是最新的。这种自动化不仅可以简化您的部署过程，还可以增强团队内部的协作和效率。
使用 GitHub Actions 自动部署
GitHub Actions 允许您直接在 GitHub 存储库中自动化工作流程。通过创建工作流程文件，您可以定义自动构建和部署 React 应用程序所需的步骤。让我们在存储库中创建新的工作流程文件：
-
在存储库的根目录中创建一个名为 的新目录。
.github/workflows -
在该目录中，创建一个名为 .
.github/workflowsdeploy.yml -
将以下工作流配置添加到文件中：
deploy.yml
name: "Deploy to GitHub Pages"
on:
push:
branches:
- master
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v1
with:
node-version: "18"
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
publish_branch: gh-pages提交更改并将其推送到您的仓库。
现在，只要您将更改推送到分支，GitHub Actions 就会自动构建 React 应用程序并将其部署到 GitHub Pages。您可以直接在 GitHub 存储库中的“作”选项卡下监控工作流程的进度。main
读写权限
如果由于读写权限而在部署过程中遇到任何问题，可以按照以下步骤更新工作流密钥的权限：
-
导航到 GitHub 存储库设置。
-
在 Actions -> General 选项卡下，启用 secret 的 “Read and write” 权限，如下所示：
单击“Save changes（保存更改）”以更新权限并重新运行工作流程。
在此之后，每当您将更改推送到分支时，您的 React 应用程序都会自动部署到 GitHub Pages。这种自动化简化了部署过程，并确保您的 React 应用程序始终是最新的，并且可供用户访问。main
结论
在这篇博文中，我们探讨了如何使用 GitHub Actions 将 React 应用程序部署到 GitHub Pages。通过自动化部署过程，您可以节省时间和精力，同时确保您的 React 应用程序始终是最新的并且可供用户访问。使用 GitHub Actions 进行自动化 React 部署提供了一个强大的工作流自动化工具，可简化 React 应用程序的部署，从而更轻松地管理多个项目并与团队协作。立即试用此工作流自动化，解开使用 GitHub Pages 无缝部署 React 的秘密！在此处了解有关 Github作的更多信息。