用华为云 AI 开发者空间把静态网页一键部署到公网沙箱（实战记录）

做前端 Demo 时最烦的一件事是：本地 npm run dev 跑得好好的，想让别人看一眼却要打包、传服务器、配 Nginx。这次借着华为云开放能力的「打造你的专属 2048 游戏」闯关活动，我用 AI 开发者空间（CodeArts） 把页面直接跑在沙箱里，并通过 DevBridge 隧道拿到了一个可公开访问的 HTTPS 地址。整个过程不需要买服务器，也不需要手动配反向代理，记录一下关键步骤和踩过的坑。

一、整体思路

沙箱本质上是一台跑在云上的临时开发环境，AI Agent 在里面执行命令、启动服务；DevBridge 隧道负责把沙箱内部的端口映射成一个公网域名。所以整个链路可以简化成三步：

1. 在 AI 开发者空间的会话里，让 Agent 生成页面代码并启动本地服务（例如 python3 -m http.server 8000 --bind 0.0.0.0）；
2. 创建一个开发隧道，并把沙箱内的端口注册进去；
3. 拿到隧道域名后用 curl -I 验证是否返回 200。

二、关键操作与提示词

直接给 Agent 一段目标明确、约束清晰的提示词，成功率会高很多。我实际用的是这类写法：

请在当前沙箱中创建一个简单的静态页面项目：
1. 新建目录 simple-webpage，只生成一个 index.html；
2. 页面要求：居中标题 Hello World、一段欢迎文字、浅色背景、flexbox 居中；
3. 用 python3 -m http.server 8000 --bind 0.0.0.0 在后台启动服务；
4. 不要写测试、不要生成多余文件。

提示词里把「文件数量、技术选型、启动命令、不要做什么」都写清楚，可以避免 Agent 自作主张引入构建工具链——静态页面用不着 webpack。

三、把沙箱端口暴露到公网

沙箱内的服务只监听容器网络，外部访问不到，需要走隧道。这里有两个容易踩的点：

• 绑定地址必须是 0.0.0.0。如果服务只监听 127.0.0.1，隧道会连通但返回连接被拒绝，表现为「域名能解析、打开是 502」。
• 隧道域名是随机生成的，形如 https://<tunnel-id>-8000.devbridge-s2.hwtunnel.com，端口号直接体现在子域名里，所以同一个沙箱可以同时映射多个端口。

映射完成后，用一条命令确认服务真的活着：

curl -sI https://<tunnel-id>-8000.devbridge-s2.hwtunnel.com/index.html

看到 HTTP/2 200 就说明公网链路已经打通，可以直接把链接发给别人看了。

四、几个实际遇到的坑

1. 首次访问会弹安全警告页。隧道域名是即时签发的，浏览器第一次打开会提示证书或安全风险，点「继续访问」并允许 Cookie 后一切正常，发给同事时最好提前说明一句。
2. 沙箱是临时的。会话结束或沙箱回收后，隧道域名立即失效。适合做演示和验收，不适合当正式环境。
3. 静态资源路径要用相对路径。页面里如果写死了 /assets/xxx，一旦挂到子路径下就会 404，用 ./assets/xxx 更稳。
4. 改完前端记得清缓存。隧道域名不变，浏览器很容易继续用旧文件，调试时打开 Network 面板勾上 Disable cache。

五、从沙箱到长期可用

沙箱解决的是「快速给别人看一眼」，如果要把作品长期挂出去，还是得走 ECS 或对象存储：

• ECS + Nginx：买一台 1 核 2G 的按量计费实例，把 index.html 丢进站点目录，安全组放通 80 端口即可，用完就释放，成本可控；
• OBS 静态网站托管 + CDN：纯静态页面更推荐这条路线，没有运维负担，流量成本也低；
• 需要鉴权或动态数据时，再叠加 FunctionGraph、API 网关之类的服务。

六、小结

这次体验下来，最省事的地方在于「环境」这件事被彻底隐藏了：不用装 Node、不用配服务器、不用申请证书，只要把意图讲清楚，Agent 就能在沙箱里把页面跑起来并给出公网地址。对于做 Demo、写技术文章配图、或者给客户演示原型这类场景，沙箱 + 隧道的组合非常够用。

唯一的建议是：把它当成一次性的预览环境，正式上线仍然老老实实走 ECS 或 OBS，这样心里最有底。