Github Actions

什么是Github Actions

GitHub Actions 是 GitHub 提供的自动化工具，允许你在代码仓库中直接创建、测试、部署代码的自动化流程。它可以在特定事件发生时，自动帮我们完成一些事情，比如：检查代码有没有写错、自动运行测试、自动打包项目、自动把代码部署到服务器等等。用一句话总结就是，它自动帮你干活的小机器人。 以这个博客站为例，如果没有Github Actions，我是这样维护这个博客的：

1. 在本地写代码
2. 在本地环境测试
3. 把代码提交到Github
4. 手动部署项目

其中，第四步是最让人头大的。

首先，我要打开终端，找到前端的目录，运行npm run build编译前端代码，然后打开XFTP，把生成的 dist 目录上传到服务器对应的前端目录。接着回到终端，执行mvn clean package，编译后端，生成jar包。接下来，打开 XShell，执行一段命令，将之前的java进程kill掉，然后把新的jar包传上去，再执行一段命令，等待启动等等。 这一套流程下来，要打开好几个软件、命令一个不能错、步骤重复又机械，偶尔做一次还行，但每次更新都这么来，真的非常消耗时间和精力。

于是，我开始使用Github Actions！

使用 GitHub Actions 之后发生了什么

在开始使用 GitHub Actions 之后，我维护这个博客的流程发生了非常明显的变化。 现在，我需要做的事情只剩下：

1. 在本地写代码
2. 在本地简单测试
3. 把代码提交到Github，然后合并到main分支

剩下的事情，全部交给 GitHub Actions 自动完成。

它帮我做的事情包括：

1. 自动测试代码
2. 分别自动构建前后端项目
3. 将代码自动上传到服务器
4. 自动运行项目

Github Actions的简单入门

首先，来了解几个基本概念。

核心概念

• Workflow（工作流）：自动化流程的配置文件（YAML 格式），存放在 .github/workflows 目录下，每个文件对应一个独立的工作流。
• Job（作业）：一个工作流由多个作业组成，默认并行执行（可通过 needs 关键字配置依赖关系实现串行）。
• Step（步骤）：每个作业包含多个步骤，按顺序执行。步骤可以是：Shell 命令（run）、调用预定义动作（uses）、自定义脚本
• Action（动作）：可复用的代码单元（如检出代码、发送通知），可通过 GitHub Marketplace 获取现成动作。

目录示例

把你的工作流.yml文件放在.github/workflows目录下，GitHub会自动检测并触发当中的逻辑。

编写第一个Github Actions工作流

# ================================
# 前端自动构建 + 自动部署工作流
# ================================

# 当前工作流的名字，会显示在 GitHub Actions 页面中
name: Frontend CI/CD

# ----------------
# 触发条件（on）
# ----------------
on:
  # 当代码被 push 到 main 分支时触发
  push:
    branches:
      - main
    # 只有下面这些路径发生变化时，才会触发该工作流
    paths:
      - 'frontend-myblog/**' # 前端代码目录
      - '.github/workflows/frontend-deploy.yml' # 当前 workflow 文件本身

  # 允许在 GitHub Actions 页面手动点击触发
  workflow_dispatch:

# ----------------
# 全局环境变量
# ----------------
env:
  # Node.js 版本，后面 setup-node 会用到
  NODE_VERSION: '22'

# ----------------
# 定义所有任务（jobs）
# ----------------
jobs:
  # ============
  # 构建任务
  # ============
  build:
    # 任务名称（展示用）
    name: Build Frontend
    # 运行环境：GitHub 提供的 Ubuntu 虚拟机
    runs-on: ubuntu-latest
    steps:
      # 第一步：拉取仓库代码
      - name: Checkout code
        uses: actions/checkout@v4
      # 第二步：安装并配置 Node.js 环境
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }} # 使用上面定义的 Node 版本
          cache: 'npm' # 启用 npm 依赖缓存
          cache-dependency-path: frontend-myblog/package-lock.json
      # 第三步：安装前端依赖
      - name: Install dependencies
        working-directory: ./frontend-myblog # 指定前端目录
        run: npm ci # 比 npm install 更稳定
      # 第四步：执行 TypeScript 类型检查
      - name: Type check
        working-directory: ./frontend-myblog
        run: npm run type-check
      # 第五步：构建前端项目
      - name: Build
        working-directory: ./frontend-myblog
        run: npm run build-only # 生成 dist 目录
      # 第六步：上传构建产物
      # 目的是让下一个 job（deploy）可以使用
      - name: Upload artifact
        uses: actions/upload-artifact@v4
        with:
          name: frontend-dist # 构建产物名称
          path: frontend-myblog/dist # 上传 dist 目录
          retention-days: 7 # 保留 7 天
  # ============
  # 部署任务
  # ============
  deploy:
    # 任务名称
    name: Deploy Frontend
    # 表示必须等 build 任务成功后才能执行
    needs: build
    # 运行环境
    runs-on: ubuntu-latest
    steps:
      # 第一步：下载 build 阶段上传的构建产物
      - name: Download artifact
        uses: actions/download-artifact@v4
        with:
          name: frontend-dist
          path: ./dist # 下载到当前目录的 dist 文件夹
      # 第二步：通过 SSH 登录服务器，做部署前准备
      - name: Deploy to server via SSH
        uses: appleboy/ssh-action@v1.2.0
        with:
          host: ${{ secrets.FRONTEND_SERVER_HOST }} # 服务器地址
          username: ${{ secrets.FRONTEND_SERVER_USER }} # 登录用户
          key: ${{ secrets.FRONTEND_SERVER_SSH_KEY }} # SSH 私钥
          port: ${{ secrets.FRONTEND_SERVER_PORT || 22 }}
          script: |
            # 如果旧的前端目录存在，先备份
            if [ -d /opt/blog/frontend ]; then
              sudo rm -rf /opt/blog/frontend.backup
              sudo mv /opt/blog/frontend /opt/blog/frontend.backup
            fi
            # 创建新的前端目录
            sudo mkdir -p /opt/blog/frontend
      # 第三步：把 dist 目录拷贝到服务器
      - name: Copy dist to server
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.FRONTEND_SERVER_HOST }}
          username: ${{ secrets.FRONTEND_SERVER_USER }}
          key: ${{ secrets.FRONTEND_SERVER_SSH_KEY }}
          port: ${{ secrets.FRONTEND_SERVER_PORT || 22 }}
          source: "./dist/*" # 本地构建产物
          target: "/opt/blog/frontend/" # 服务器目标目录
          strip_components: 1 # 去掉 dist 这一层目录
      # 第四步：设置权限并重载 Nginx
      - name: Set permissions and reload nginx
        uses: appleboy/ssh-action@v1.2.0
        with:
          host: ${{ secrets.FRONTEND_SERVER_HOST }}
          username: ${{ secrets.FRONTEND_SERVER_USER }}
          key: ${{ secrets.FRONTEND_SERVER_SSH_KEY }}
          port: ${{ secrets.FRONTEND_SERVER_PORT || 22 }}

配置环境变量和密钥

一个服务上线后，肯定会涉及大量敏感的配置。比如数据库地址、用户名和密码，第三方API的Secret和Key以及邮件服务的授权码等等。这些是非常敏感的信息，是不可以直接写在配置文件中的（如果仓库是公开仓库或者有多人协作的话）。在生产环境中，我们可以通过在服务器上直接注入环境变量的方式实现。使用Github Actions，也能安全且方便的达到这一目的。 首先，找到Github Secret。 在Github的线上仓库中，找到仓库的Settings，在左边找Secrets and variables，选择Actions。然后New Repository Secret，将Workflow文件中对应的值填写到这里即可。

官方学习资料

Github官方学习指南 最权威的资料