项目上线的最后一步往往是最费劲的，尤其是静态前端项目，单独为它开一台服务器有点浪费。本文记录一下我用阿里云 OSS + GitHub Actions 实现自动化部署的完整流程，从创建 Bucket 到 push 代码触发自动上线，全程不需要手动操作。

一、方案架构

本地代码 → push to GitHub → GitHub Actions 触发 → 
npm run build → ossutil 上传 dist/ → 
用户访问 → CDN 边缘节点 → OSS 源站

这套架构的好处是全托管、零运维：代码合并到 main 分支自动触发部署，不需要手动登服务器，OSS 和 CDN 的扩容也是自动的。

二、准备工作

创建 OSS Bucket

登录控制台 → 对象存储 OSS → 新建 Bucket，权限设为「公共读」，开启静态网站托管功能，默认首页和 404 页都指向 index.html（SPA 必须）。

创建 RAM 子账号

主账号 → RAM 访问控制 → 创建用户 → 只勾选「编程访问」→ 授予 AliyunOSSFullAccess（或者只给特定 Bucket 的 oss:PutObject 权限，更安全）→ 记录 AccessKey ID 和 Secret。

三、GitHub Actions 配置

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

name: Deploy to Aliyun OSS

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

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

      - name: Install dependencies
        run: npm ci

      - name: Build project
        run: npm run build

      - name: Setup ossutil
        uses: manyuanrong/setup-ossutil@v2.0
        with:
          endpoint: "oss-cn-hangzhou.aliyuncs.com"  # 换成你的 Bucket 所在地域
          access-key-id: ${{ secrets.ALIYUN_ACCESS_KEY_ID }}
          access-key-secret: ${{ secrets.ALIYUN_ACCESS_KEY_SECRET }}

      - name: Sync dist to OSS
        run: |
          # 先上传 JS/CSS（带 hash，可强缓存）
          ossutil cp dist/ oss://your-bucket-name/ \
            --recursive \
            --force \
            --meta "Cache-Control:max-age=31536000" \
            --include "*.js" \
            --include "*.css"
          
          # 再上传 HTML（不缓存）
          ossutil cp dist/ oss://your-bucket-name/ \
            --recursive \
            --force \
            --meta "Cache-Control:no-cache" \
            --include "*.html"
          
          # 上传其他资源（图片等，中等缓存）
          ossutil cp dist/ oss://your-bucket-name/ \
            --recursive \
            --force \
            --meta "Cache-Control:max-age=604800" \
            --exclude "*.js" \
            --exclude "*.css" \
            --exclude "*.html"

在 GitHub 仓库 → Settings → Secrets and Variables → Actions 中添加：

• ALIYUN_ACCESS_KEY_ID
• ALIYUN_ACCESS_KEY_SECRET

四、常见问题

Q：SPA 路由刷新页面 404？
A：OSS 静态网站托管的「默认 404 页面」填 index.html，让所有路径都返回 index 后由前端 Router 接管。

Q：每次部署旧文件要手动删吗？
A：加 --delete 参数会自动删除 OSS 上本次 dist/ 里不存在的文件，注意只有在你确认 dist/ 是完整构建产物时才开启，否则可能误删。

Q：域名绑定后 HTTPS 怎么配？
A：阿里云提供免费 DV 证书，在 SSL 证书控制台申请后，上传到 OSS 域名管理处绑定即可，每年免费续签。

五、参考资料

• 阿里云对象存储 OSS 官方文档
• OSS 产品页（含当前优惠价格）
• ossutil 命令行工具文档