用 OBS + 函数工作流给静态博客图片自动压缩：一次低成本上云实践

一、背景与痛点

1. 列表页一次加载十几张图，首屏明显卡
2. OBS 存储量涨得快，虽然单价低但没必要白囤
3. 手动跑 tinypng 或 sharp 很烦，经常忘了压

二、方案设计

用户上传原图
   ↓
OBS PutObject 事件
   ↓
函数工作流 FunctionGraph 触发
   ↓
下载原图 → sharp 压缩 → 回写 OBS（加 -mini 后缀）

• OBS：存原图 + 压缩图，自带事件通知
• FunctionGraph：按调用计费，没流量不花钱，不用维护服务器
• Node.js + sharp：在函数环境里冷启动可接受，压缩质量稳

避坑点：函数写回 OBS 时别再触发同一事件，否则会死循环。用「压缩图走独立前缀 / 独立桶」或判断 key 是否包含 -mini 来解决。

三、实操步骤

3.1 创建 OBS 桶

• 事件类型：PutObject
• 触发服务：函数工作流
• 触发函数：后面建完回填

3.2 创建函数工作流

const OBS = require('obs-nodejs-sdk');
const sharp = require('sharp');

const obsClient = new OBS({
  access_key_id: process.env.AK,
  secret_access_key: process.env.SK,
  server: process.env.OBS_ENDPOINT,
});

const BUCKET = process.env.BUCKET;

exports.handler = async (event) => {
  const records = event.Records || [];
  for (const r of records) {
    const key = r.s3.object.key;
    if (key.includes('-mini.webp')) continue; // 防止回写再触发

    // 1. 读原图
    const data = await obsClient.getObject({
      Bucket: BUCKET,
      Key: key,
    });
    const body = Buffer.from(data.Body);

    // 2. 压缩
    const webp = await sharp(body)
      .webp({ quality: 70 })
      .resize({ width: 1600, withoutEnlargement: true })
      .toBuffer();

    // 3. 写回
    const miniKey = key.replace(/(\.\w+)$/, '-mini.webp');
    await obsClient.putObject({
      Bucket: BUCKET,
      Key: miniKey,
      Body: webp,
      ContentType: 'image/webp',
    });

    console.log(`compressed: ${key} -> ${miniKey}`);
  }
  return { status: 'ok' };
};

{
  "dependencies": {
    "obs-nodejs-sdk": "^3.1.0",
    "sharp": "^0.33.0"
  }
}

注：sharp 在函数环境里建议用官方提供的兼容层或依赖包上传，别直接本地 mac 打 zip 上去，linux 二进制会对不上。

3.3 配置环境变量

• AK / SK：用子账号密钥，只给该桶权限
• OBS_ENDPOINT：如 obs.cn-north-4.myhuaweicloud.com
• BUCKET：桶名

{
  "Effect": "Allow",
  "Action": ["obs:object:GetObject", "obs:object:PutObject"],
  "Resource": ["obs:*:*:object:blog-assets-xxx/*"]
}

3.4 绑定 OBS 事件

aws s3 cp ./test.png s3://blog-assets-xxx/2026/test.png \
  --endpoint-url https://obs.cn-north-4.myhuaweicloud.com

四、验证结果

• 原图：2026/test.png
• 自动生成：2026/test-mini.webp
• 体积降到 200–300 KB
• 函数日志里能看到 compressed: ...

实际压缩比看原图内容，截图/插画压得狠，照片类建议 quality 调到 75–80。

五、总结与可扩展

• 没开 ECS，纯 Serverless
• 日常博客量级每月函数调用费基本可忽略
• OBS 存储分层后续可把原图转低频访问

• 缩略图多尺寸（width=400/800/1600）
• AVIF 输出（sharp 支持，但函数内存可加到 512MB）
• 异常告警：函数报错推 SMN 邮件
• 原图自动转存归档桶