用 GitHub Actions 自动化你的 Vue.js 部署

2023-10-12 20:54:02

对于一个高效的开发团队来说，自动化是实现持续集成和持续交付（CI/CD）的关键要素。GitHub Actions 提供了一个直观的平台，使开发者能够通过创建自定义的工作流来自动化其软件开发生命周期的各个方面。本指南将重点介绍如何利用 GitHub Actions 自动化你的 Vue.js 部署流程。

为什么使用 GitHub Actions？

GitHub Actions 提供了以下优势：

无缝集成： 与 GitHub 平台紧密集成，使设置和管理工作流变得容易。
可定制性： 灵活的工作流创建，允许你根据项目的特定需求定制自动化流程。
社区支持： 活跃的社区提供广泛的资源、文档和示例。

设置 GitHub Actions

要开始使用 GitHub Actions，你需要：

创建一个 GitHub 存储库，其中包含你的 Vue.js 项目。
在存储库中创建一个 .github/workflows 目录。
在 .github/workflows 目录中创建一个 .yml 文件，其中包含你的工作流定义。

创建工作流

一个 GitHub Actions 工作流由以下部分组成：

名称： 工作流的名称。
on： 触发工作流的事件（例如，代码推送到某个分支）。
jobs： 一个或多个包含要执行的任务的作业。

一个基本的 Vue.js 部署工作流可能如下所示：

name: Vue.js Deployment

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm install
      - run: npm run build
      - uses: actions/upload-artifact@v3
        with:
          name: dist
          path: dist

理解工作流步骤

这个工作流包含以下步骤：

actions/checkout@v3： 签出存储库代码。
actions/setup-node@v3： 设置 Node.js 环境。
npm install： 安装项目依赖项。
npm run build： 构建 Vue.js 应用程序。
actions/upload-artifact@v3： 将构建的工件上传到 GitHub 存储库。

部署到 GitHub Pages

要将你的 Vue.js 应用程序部署到 GitHub Pages，你需要：

在存储库的根目录中创建一个 docs 目录。
将构建的工件移动到 docs 目录中。
在 .github/workflows 目录中创建一个名为 deploy-to-gh-pages.yml 的新工作流文件。

工作流文件可能如下所示：

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  deploy-to-gh-pages:
    runs-on: ubuntu-latest
    needs: deploy
    steps:
      - uses: actions/download-artifact@v3
        with:
          name: dist
          path: dist
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist