从零到上线：用 AI Agent + HuaweiCloud DevKit 把作品发布到开发者作品展览馆的完整实战

本文记录一次真实的作品发布全流程：不写一行部署脚本，仅通过 AI Agent 调用 HuaweiCloud DevKit 的沙箱与隧道能力，把一个 Web 应用从本地推向公网，最终成功发布到华为云开发者作品展览馆。

一、背景

华为云开发者作品展览馆是 AI 开发者空间的作品展示平台。传统发布流程要经历：本地起服务 → 内网穿透 → 生成封面截图 → 编写作品详情 → 寻找投稿入口……对个人开发者来说步骤繁琐。

而 AI 办公实践中心提供了 huawei-cloud-publish-work-to-gallery 这个发布 Skill，把上述全部流程脚本化。本文以一个「每日打卡」单页应用为例，走完从环境准备到发布成功的完整链路。

二、发布流程全景

整个发布被 Skill 拆解为 8 个步骤，形成一条依赖流水线：

Step 1 (workDir, domainID, STS)     ← IAM 自委托生成临时凭证
Step 2 (port, envUrl)               ← 启动服务 + DevBridge 隧道
  ├── Step 3 (gitUrl, gitBranch, workName)
  ├── Step 4 (coverImage)           ← Playwright 截图合成封面
  ├── Step 5 (introduction)         ← 15~50 字简介
  └── Step 6 (detailZip)            ← 架构图 + 详情打包
Step 7 (trainingCampId)             ← 选择投稿活动
Step 8 (publish)                    ← 发布 + 领积分

三、关键步骤详解

3.1 IAM 自委托与 STS 临时凭证（Step 1）

发布平台不收账号密码，而是通过 STS 临时凭证 验证发布者身份。原理：

1. 在账号下创建一次性的 SELF_VERIFY 自委托（委托方与被委托方都是自己）：

   hcloud IAM CreateAgency --cli-region=cn-north-4 \
     --agency.name=SELF_VERIFY \
     --agency.domain_id=<你的账号ID> \
     --agency.trust_domain_id=<你的账号ID>
   

2. 每次发布时通过 AssumeAgency 生成 900 秒有效期的最小权限凭证，AK/SK 永远不出本地。

这个设计很漂亮：网关用临时凭证调 STS.GetCallerIdentity 反查身份，应用侧只信任网关注入的已验证头域，无法伪造。

3.2 沙箱 + DevBridge 隧道（Step 2）

作品需要可公网访问的在线体验地址。HuaweiCloud DevKit 的沙箱自带隧道能力：

• 沙箱内 python3 -m http.server 8080 起静态服务
• 调用隧道工具暴露端口，获得形如 https://<id>-8080.devbridge-s2.hwtunnel.com 的公网 URL
• 发布脚本会自动探活该 URL，不可达则拒绝发布

3.3 封面与详情生成（Step 4/6）

封面不是简单截图，而是一条带门禁的流水线：

• preflight.sh：安装 CJK 字体 + Chromium（首次 5~10 分钟）
• ensure-utf8.mjs：编码门禁，防止中文乱码进封面
• build-cover.mjs：对运行中的页面截图，自动判定单页/多页布局并合成 16:9 封面
• verify-glyphs.py：像素级字形校验——读 PNG 内嵌的文本 bbox 元数据，检测"豆腐块"（字体缺失导致的乱码方块）

架构图用自写 HTML 经 Playwright 渲染成 PNG，同样要过字形校验。这些门禁保证了发布物的中文显示质量。

3.4 提交发布（Step 8）

参数通过 JSON 文件传递（security_token 超长，禁止走命令行），发布脚本在发请求前会复核所有门禁并探活隧道，最终 POST 到 gallery API，返回 201 即发布成功，积分随响应实时返回。

四、实测结果

作品上线后的页面包含：封面大图、一句话简介、可访问的在线体验地址、GitCode 仓库链接，以及带架构图的详解文章。

五、踩坑记录

1. ticket 是一次性的：浏览器地址栏里的 SSO ticket 首次访问即被消费，复制旧 URL 无法重建登录态。可靠方案是手机验证码登录或 App 扫码。
2. Vue 表单 fill() 失效：page.fill() 设置的值不触发 input 事件，Vue 数据不同步。要用原生 dispatchEvent 补发 input/change 事件，或逐字 type()。
3. TinyMCE 编辑器：内容区不是普通 textarea，需通过 tinymce.editors[0].setContent() API 写入。
4. WAF 拦截 headless 浏览器：GitCode 网页版对自动化浏览器返回 418，但 OpenAPI（/api/v5）畅通——优先走 API 而不是爬页面。

六、总结

这次实战最大的感受是：发布一个作品的核心成本已经从"写部署脚本"转移到"描述清楚你要什么"。

AI Agent + Skill 的组合把 IAM、STS、隧道、截图、打包、提交这些异构操作编排成了对话式流水线。对个人开发者而言，只要作品本身能跑起来，从本地到公网上线的距离被压缩到了一次对话。

作品和源码都已开源，欢迎交流。

本文基于 2026-10-21 的真实发布过程整理，环境：HuaweiCloud DevKit 沙箱 + DevBridge 隧道。