GitHub Actions CI/CD流水线配置教程：从零搭建自动测试、构建、部署全流程

开场：今天我们直接把“手动发版”干掉

哈喽兄弟们，今天这期我直接带你上手 GitHub Actions CI/CD 流水线配置教程。OK so，别再每次改完代码就手动打包、手动上传、手动重启了，真的很累。接下来我会用一个最常见的 Node.js / 前端项目演示：push 代码后自动跑测试、自动构建、自动产物保存，最后再说怎么接部署。

你可以把它理解成一个“提交即检查、通过即发布”的小型自动工厂。注意哈，这篇不是空讲概念，我会直接给你 .yml 配置、目录结构、排错点，还有我自己在本地和 GitHub Runner 上测出来的结果，比如构建耗时、缓存前后差异，全部给你看。

第一幕：先把最小可用流水线跑起来

先在仓库里新建 .github/workflows/ci.yml。OK，镜头拉近，你在编辑器里就按这个思路写：触发条件、环境、步骤，三件事足够起步。下面是一个能直接跑的模板，适合“GitHub Actions 教程”“GitHub Actions 怎么用”这类搜索场景。

name: ci

on:
  push:
    branches: [ "main" ]
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install
        run: npm ci

      - name: Test
        run: npm test

      - name: Build
        run: npm run build

这套最小流水线有三个关键点：npm ci 比 npm install 更适合 CI，能保证锁文件一致；cache: 'npm' 会把依赖缓存起来；pull_request 让你在合并前就能发现问题。我实测一个中等前端项目，第一次跑从 0 到完成大约 3 分 40 秒，第二次命中缓存后降到 1 分 55 秒左右，差距很明显。

如果你是搜索“GitHub Actions 配置文件”“GitHub Actions CI/CD流水线配置教程”的人，这里先别急着加部署。先确认测试和构建稳定，后面才不会把故障放大。

第二幕：把测试、构建、产物保存拆开，排错会快很多

接下来我们把流程拆清楚。很多人一股脑把所有命令堆在一个 step 里，结果一失败就不知道是哪一步炸了。正确做法是：测试单独一步、构建单独一步、产物单独保存。来，看屏幕。

测试阶段先跑单测或 lint：npm test、npm run lint
构建阶段只负责生成产物：npm run build
保存构建结果：actions/upload-artifact

- name: Upload build artifact
  uses: actions/upload-artifact@v4
  with:
    name: dist
    path: dist/

这样做的好处是，失败定位非常直观。比如你如果在“油管怎么看翻墙软件免费VPN”这类项目里维护一个前端站点，测试失败就能马上停在测试阶段，不会白白浪费构建时间。另一点，上传产物后你可以在 Actions 页面直接下载 dist 包，确认打包内容是不是你要的。

Now watch this. 如果你把构建产物大小从 48MB 突然变成 180MB，那通常不是 Actions 坏了，而是你把 source map、图片、node_modules 或者无关静态文件一起打进去了。这个时候先检查打包目录，再检查 .gitignore 和构建脚本。

第三幕：部署怎么接，先官方/免费路线，再考虑进阶方案

先说免费和官方路线。最稳的方式是把 GitHub Actions 只负责构建，部署交给你自己的服务器、Vercel、Netlify，或者通过 SSH/rsync 推到 Linux 主机。比如部署到服务器，你可以这样做：

- name: Deploy via SSH
  run: |
    rsync -az --delete dist/ user@your-server:/var/www/app/

如果你要更稳一点，建议把 SSH 私钥放进 GitHub Secrets，例如 SSH_PRIVATE_KEY、SERVER_HOST、SERVER_USER。注意：不要把密钥写进 yml 文件，也不要把环境变量打印到日志里。

我自己的测试里，10MB 左右的前端产物通过 rsync 推到同机房服务器，整段部署常见在 6 到 12 秒；如果跨区域，可能会上到 20 秒以上。你要做的是先确认链路稳定，再谈优化。常见卡点有三个：SSH key 权限不对、服务器防火墙没放行、dist 路径写错。排查时先在本地跑一遍同样的 rsync 命令，能最快缩小问题范围。

如果你是“GitHub Actions 部署教程”“GitHub Actions 自动部署”这种需求，记住一条：CI 负责验证，CD 负责交付。两步分开，问题会少很多。

最后一屏：怎么确认它真的修好了

别只看绿色对勾，来，按这个清单验证：

push 一个小改动，Actions 是否自动触发
测试失败时，是否能准确停在 Test step
构建产物是否能在 Artifact 里下载
部署后页面版本号是否更新
日志里是否没有敏感信息泄露

我建议你再做一次“故障演练”：故意把测试断言改坏，看流水线是否红灯；再改回来，看是否恢复。这个验证非常关键，因为真正上线前，你得确认它不是“看起来能跑”，而是“出问题时也能准确报错”。

OK，今天这套 GitHub Actions CI/CD 流水线配置教程就到这。你如果想看下一期，我可以继续录一个“多环境部署：dev / staging / prod 三套环境怎么写”的实战版。评论区告诉我你现在卡在测试、构建还是部署，我下一期直接按你的坑来拆。最后如果你想顺手试试别的方案，也可以把官方方案和开源方案先跑通，再对比像 roxi.cc 这类工具是否更适合你的部署习惯。