从零搭建前端 CI/CD 流水线：GitHub Actions + Vue + 阿里云 OSS 实战

​

一、前言

你是否经历过：

“每次上线都要手动打包、上传服务器，一不小心就出错。”

CI/CD（持续集成/持续交付） 是现代前端开发的标配。它能：

• ✅ 自动运行测试，防止错误代码合并
• ✅ 自动打包并部署到服务器
• ✅ 提高发布效率，减少人为失误

本文将带你使用 GitHub Actions 搭建一条完整的 CI/CD 流水线，实现：

1. 推送代码自动运行单元测试
2. 合并到 main 分支自动构建并部署到 阿里云 OSS
3. 支持多环境（测试/生产）部署

无需运维经验，手把手教学。

---

二、什么是 CI/CD？

缩写	全称	含义
CI	Continuous Integration	持续集成：代码合并前自动测试
CD	Continuous Delivery/Deployment	持续交付/部署：自动发布到环境

💡 目标：让发布变得像 git push 一样简单。

---

三、技术栈与准备

技术	用途
Vue 3 + Vite	前端项目
GitHub	代码托管 + Actions
阿里云 OSS	静态资源存储（类似 AWS S3）
GitHub Actions	自动化工作流引擎

🔧 准备工作：

1. 创建 GitHub 仓库
2. 开通阿里云 OSS，创建 Bucket（如 my-website）
3. 生成阿里云 AccessKey ID 和 Secret（用于权限认证）

---

四、项目结构简述

my-vue-app/
├── src/
├── index.html
├── vite.config.js
├── package.json
└── .github/workflows/deploy.yml  # GitHub Actions 工作流文件

---

五、编写 GitHub Actions 工作流

在项目根目录创建： .github/workflows/deploy.yml

name: Deploy Frontend

on:
  # 监听 push 到 main 分支
  push:
    branches: [ main ]
  # 监听 pull request
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    if: github.event_name == 'pull_request'
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Run unit tests
        run: npm run test:unit
        # 假设你有 vitest 测试
        # 如果测试失败，流程终止

  build-and-deploy:
    runs-on: ubuntu-latest
    needs: test
    if: github.ref == 'refs/heads/main'  # 仅 main 分支执行
    steps:
      - uses: actions/checkout@v4

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

      - name: Install dependencies
        run: npm install

      - name: Build for production
        run: npm run build
        # 生成 dist/ 目录

      - name: Install ossutil
        run: |
          wget https://gosspublic.alicdn.com/ossutil/1.8.3/ossutil64
          chmod +x ossutil64
          sudo mv ossutil64 /usr/local/bin/ossutil

      - name: Deploy to Alibaba Cloud OSS
        env:
          OSS_ACCESS_KEY_ID: ${{ secrets.OSS_ACCESS_KEY_ID }}
          OSS_ACCESS_KEY_SECRET: ${{ secrets.OSS_ACCESS_KEY_SECRET }}
        run: |
          # 配置 ossutil
          echo "endpoint = https://oss-cn-beijing.aliyuncs.com" > ~/.ossutilconfig
          echo "accessKeyID = $OSS_ACCESS_KEY_ID" >> ~/.ossutilconfig
          echo "accessKeySecret = $OSS_ACCESS_KEY_SECRET" >> ~/.ossutilconfig
          echo "outputFormat = json" >> ~/.ossutilconfig

          # 同步 dist 目录到 OSS
          ossutil cp -r dist/ oss://my-website --update

          # 设置静态网站（可选）
          ossutil website oss://my-website/index.html error.html

---

六、配置阿里云密钥（安全！）

不要将 AccessKey 写在代码中！

正确做法：使用 GitHub Secrets

1. 进入 GitHub 仓库 → Settings → Secrets and variables → Actions

2. 点击 New repository secret

3. 添加两个密钥：

   • OSS_ACCESS_KEY_ID = 你的阿里云 AccessKey ID
   • OSS_ACCESS_KEY_SECRET = 你的阿里云 AccessKey Secret

🔐 Actions 运行时可通过 ${{ secrets.XXX }} 安全引用。

---

七、支持多环境部署（测试 vs 生产）

修改 deploy.yml，支持不同分支部署到不同目录：

# 在 build-and-deploy job 中修改 deploy 步骤
- name: Deploy to OSS
  env:
    OSS_ACCESS_KEY_ID: ${{ secrets.OSS_ACCESS_KEY_ID }}
    OSS_ACCESS_KEY_SECRET: ${{ secrets.OSS_ACCESS_KEY_SECRET }}
  run: |
    # 配置 ossutil（同上）
    echo "endpoint = https://oss-cn-beijing.aliyuncs.com" > ~/.ossutilconfig
    # ... 其他配置

    # 根据分支决定部署目录
    if [ "${{ github.ref }}" == "refs/heads/main" ]; then
      DEST_DIR="prod"
      echo "🚀 Deploying to PRODUCTION"
    elif [ "${{ github.ref }}" == "refs/heads/staging" ]; then
      DEST_DIR="staging"
      echo "🧪 Deploying to STAGING"
    else
      DEST_DIR="dev"
    fi

    ossutil cp -r dist/ oss://my-website/$DEST_DIR --update

✅ 现在：

• main 分支 → oss://my-website/prod/
• staging 分支 → oss://my-website/staging/

---

八、绑定自定义域名（可选）

1. 在阿里云 OSS 控制台，进入 Bucket → 域名与传输 → 绑定自定义域名
2. 添加你的域名（如 www.myapp.com）
3. 配置 DNS 解析到 OSS 提供的 CNAME
4. 开启 HTTPS（推荐使用免费 SSL 证书）

---

九、工作流执行流程

graph TD
    A[开发者 git push] --> B{分支}
    B -->|pull_request| C[运行单元测试]
    C -->|通过| D[允许合并]
    B -->|main 分支| E[自动构建]
    E --> F[部署到 OSS 生产目录]
    F --> G[用户访问新版本]

---

十、常见问题与最佳实践

问题	解决方案
构建失败	查看 Actions 日志，检查依赖、脚本名
OSS 权限不足	检查 AccessKey 权限是否包含 OSS 写入
缓存问题	部署前清空 OSS 目录或使用版本号目录
敏感信息泄露	务必使用 Secrets，不要硬编码

✅ 最佳实践：

• 测试通过才允许合并（启用 GitHub Branch Protection）
• 为生产部署添加手动审批（environments）
• 记录部署日志和版本号

---

十一、总结

通过 GitHub Actions + 阿里云 OSS，你已成功搭建：

• ✅ 自动化测试流程
• ✅ 一键部署流水线
• ✅ 多环境发布支持

CI/CD 不再是“高级功能”，而是现代前端团队的生存技能。

​