Github Actions 部署 Vue/React 项目：出奇的简单

2023-09-02 04:03:00

Github Actions 是一个功能强大的 CI/CD 工具，它允许开发者自动化各种软件开发任务，包括前端部署。通过利用 Github Actions，您可以轻松地设置一个工作流程，在每次代码推送到仓库时自动构建和部署您的 Vue/React 项目。

GitHub Actions 的优势

自动化部署： 无需手动操作，自动完成部署过程，节省时间和精力。
提高效率： 通过自动化，可以显著提升开发效率，将精力集中于其他重要任务。
一致性： 自动化的部署过程确保每次部署的一致性，降低错误发生的可能性。
跟踪部署历史： Github Actions 提供了详细的日志和部署历史记录，便于跟踪和审计。
云原生： 作为 GitHub 的一部分，Github Actions 与 GitHub 的生态系统无缝集成，简化了开发流程。

部署流程

部署 Vue/React 项目到 Github Pages 非常简单，只需几个步骤即可完成：

创建 GitHub 仓库： 为您的 Vue/React 项目创建新的 GitHub 仓库，用于存储代码和部署配置。
安装 Github Actions： 在项目仓库中安装 Github Actions，创建 .github/workflows 目录。
创建工作流程 YAML 文件： 在 .github/workflows 目录中创建一个名为 main.yml 的文件，用于定义您的部署工作流程。
配置工作流程： 在 main.yml 文件中，定义触发器（例如：push）、构建步骤（例如：npm install）和部署步骤（例如：gh-pages deploy）。
推送代码： 将代码推送到 GitHub 仓库，触发工作流程。

以下是一个示例工作流程 YAML 文件，用于部署 Vue/React 项目到 Github Pages：

name: Deploy Vue/React to Github Pages

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: '16'
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist