使用GitHub Actions实现前端项目自动化部署

告别手动部署，拥抱自动化：使用 GitHub Actions 实现前端项目丝滑部署

嘿，各位前端小伙伴们，还在为每次发版都要手动打包、上传文件到服务器而烦恼吗？是不是觉得这些重复性的工作既耗时又容易出错？今天，咱们就来聊聊如何利用 GitHub Actions 这个神器，彻底解放你的双手，实现前端项目的自动化部署，让你的项目上线流程如丝般顺滑！

为什么选择 GitHub Actions？

简单来说，GitHub Actions 是 GitHub 官方推出的持续集成和持续部署（CI/CD）服务。它允许你在 GitHub 仓库中直接定义、运行和管理自动化的工作流程。对于前端项目来说，这意味着你可以在每次提交代码或合并分支后，自动完成项目的构建、测试和部署。

它的优势非常明显：

• 与 GitHub 无缝集成：作为“亲儿子”，它与你的代码仓库完美融合，配置简单，上手快。
• 社区强大，生态丰富：有大量由社区贡献的 Actions 可以直接使用，无论是打包、上传还是发送通知，你都能找到现成的轮子。
• 免费额度充足：对于公开仓库，GitHub Actions 是完全免费的，私有仓库也有相当可观的免费额度，对于个人项目和中小型团队来说绰绰有余。

实战演练：两步搞定自动化部署

接下来，我们就通过两个最常见的场景，手把手带你玩转 GitHub Actions。

案例一：部署到 GitHub Pages

GitHub Pages 是 GitHub 提供的免费静态网站托管服务，非常适合用来托管个人博客、项目文档或者一些静态页面。

第一步：创建 Workflow 文件

在你的项目根目录下，创建一个名为 .github/workflows 的文件夹，然后在该文件夹下创建一个 .yml 文件，例如 deploy.yml。

第二步：编写 Workflow 配置

将以下代码复制到你的 deploy.yml 文件中：

# 工作流程的名称
name: Deploy to GitHub Pages

# 触发工作流程的事件
on:
  # 当有代码推送到 main 分支时触发
  push:
    branches:
      - main
  # 允许你在 Actions 标签页手动触发此工作流程
  workflow_dispatch:

# 工作流程包含的一系列任务
jobs:
  # 任务的 ID
  build-and-deploy:
    # 任务运行的虚拟环境
    runs-on: ubuntu-latest
    
    # 任务的步骤
    steps:
      # 第一步：检出代码
      # 使用了社区开源的 action：actions/checkout
      - name: Checkout
        uses: actions/checkout@v3

      # 第二步：安装 Node.js 环境
      # 使用了社区开源的 action：actions/setup-node
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18' # 请根据你的项目需求选择 Node.js 版本

      # 第三步：安装项目依赖
      - name: Install dependencies
        run: npm install

      # 第四步：打包项目
      - name: Build
        run: npm run build

      # 第五步：部署到 GitHub Pages
      # 使用了社区开源的 action：peaceiris/actions-gh-pages
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          # GitHub Token，用于授权操作
          github_token: ${{ secrets.GITHUB_TOKEN }}
          # 打包产物所在的目录
          publish_dir: ./dist # 请根据你项目的实际打包目录进行修改

代码解析：

• name: 定义了这个工作流程的名称，会显示在 GitHub Actions 的页面上。
• on: 指定了触发这个工作流程的事件。这里我们设置了当 main 分支有 push 操作时自动触发。
• jobs: 定义了工作流程中的所有任务。这里我们只有一个名为 build-and-deploy 的任务。
• runs-on: 指定了任务运行的操作系统环境，ubuntu-latest 是一个常用的选项。
• steps: 定义了任务中的一系列步骤。
  • actions/checkout@v3: 这个 Action 用来检出你仓库的代码，以便后续步骤可以访问。
  • actions/setup-node@v3: 这个 Action 用来安装指定版本的 Node.js。
  • run: 这个关键字用来执行命令行脚本。我们用它来安装依赖和打包项目。
  • peaceiris/actions-gh-pages@v3: 这是一个非常流行的第三方 Action，专门用来将代码部署到 gh-pages 分支。
    • github_token: 这是一个由 GitHub 自动生成的令牌，用于授权 Action 访问你的仓库。
    • publish_dir: 指定了需要部署的文件夹，通常是前端项目打包后的 dist 或 build 目录。

最后一步：启用 GitHub Pages

代码推送到 GitHub 仓库后，Actions 会自动运行。成功运行后，你会发现仓库多了一个 gh-pages 分支，里面存放的就是你打包好的静态文件。

接下来，进入你的仓库设置（Settings），找到 Pages 选项，将 Source 设置为 Deploy from a branch，然后选择 gh-pages 分支和 / (root) 目录，保存即可。稍等片刻，你的网站就部署成功了！

案例二：部署到自己的服务器

如果你的项目需要部署到自己的服务器上，我们同样可以通过 GitHub Actions 来实现自动化。这里我们以使用 ssh 和 rsync 的方式为例。

第一步：配置服务器密钥

为了让 GitHub Actions 能够免密登录你的服务器，我们需要生成 SSH 密钥对，并将公钥添加到服务器的 ~/.ssh/authorized_keys 文件中。

第二步：在 GitHub 仓库中添加 Secrets

为了安全起见，我们不能将服务器的私钥和 IP 地址等敏感信息直接写在配置文件中。 GitHub 提供了 Secrets 功能来存储这些信息。

在你的仓库设置（Settings）中，找到 “Secrets and variables” -> “Actions”，然后点击 “New repository secret”，添加以下几个 Secrets：

• SERVER_HOST: 你的服务器 IP 地址。
• SERVER_USERNAME: 你的服务器登录用户名。
• SERVER_PRIVATE_KEY: 你生成的 SSH 私钥。

第三步：编写 Workflow 配置

同样，在 .github/workflows 目录下创建一个 .yml 文件，例如 deploy-to-server.yml：

name: Deploy to Server

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy to Server
        uses: easingthemes/ssh-[email protected]
        with:
          # SSH 私钥
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_PRIVATE_KEY }}
          # 源目录
          SOURCE: "dist/" # 请根据你项目的实际打包目录进行修改
          # 远程服务器地址
          REMOTE_HOST: ${{ secrets.SERVER_HOST }}
          # 远程服务器用户名
          REMOTE_USER: ${{ secrets.SERVER_USERNAME }}
          # 目标目录
          TARGET: "/var/www/my-project" # 请根据你的服务器部署目录进行修改

代码解析：

这个配置与部署到 GitHub Pages 的流程类似，主要区别在于最后的部署步骤。我们使用了 easingthemes/ssh-deploy 这个 Action，它简化了通过 SSH 部署的流程。

• SSH_PRIVATE_KEY: 从我们之前在 GitHub Secrets 中配置的 SERVER_PRIVATE_KEY 读取私钥。
• SOURCE: 要上传的源文件目录。
• REMOTE_HOST: 从 Secrets 读取服务器 IP 地址。
• REMOTE_USER: 从 Secrets 读取服务器登录用户名。
• TARGET: 文件要上传到服务器的哪个目录下。

现在，每当你向 main 分支推送代码，GitHub Actions 就会自动打包你的项目，并通过 SSH 将最新的文件同步到你的服务器上。

总结

通过上面两个案例，相信你已经感受到了 GitHub Actions 的强大与便捷。它不仅能帮你完成前端项目的自动化部署，还可以做更多的事情，比如运行单元测试、代码质量检查、发送部署通知等等。

告别繁琐的手动部署，拥抱自动化，不仅能大大提升你的工作效率，更能减少人为失误，让你的项目交付流程更加稳定可靠。赶紧动手尝试一下吧！