从 0 到 1：用 HuaweiCloud DevKit 把 2048 单文件游戏部署上云

背景

2048 是一个经典益智小游戏，规则简单但实现精巧。最近我用纯单文件 HTML（CSS/JS 全内联）实现了它，并借助 HuaweiCloud DevKit 完成了两轮真实公网部署：一是开发者沙箱（Nginx + DevBridge 隧道），二是华为云 ECS 持久化部署（cloud-init 自动化）。整个过程零构建工具、零依赖，很适合作为云上部署练手的入门案例。本文记录关键步骤与踩坑经验。

一、单文件 2048 的实现要点

整个游戏只有一个 index.html，核心设计有三层：

1. 状态模型：用 4×4 二维数组 board 表示棋盘，score 记录得分。
2. 移动与合并：按方向键/滑动方向遍历，逐行逐列压实方块，相邻同值合并为双倍并累加分数，每个方块每次移动只合并一次。
3. 交互与持久化：同时支持键盘方向键、移动端触摸滑动、鼠标拖拽；最高分写入 localStorage，刷新不丢。

用 CSS Grid 布局网格、绝对定位渲染方块，配合 CSS 过渡动画实现"弹出/合并"效果，视觉上有不错的反馈。响应式字号与网格尺寸保证了 PC 与手机体验一致。

二、沙箱部署：Nginx + DevBridge 隧道

通过 DevKit 的沙箱能力，可以把本地静态页面快速暴露到公网：

1. 安装 DevKit 并配置华为云 AK/SK 凭证，签署沙箱服务协议。
2. 连接沙箱实例，上传 index.html 到工作目录。
3. 用 DevKit 的 Nginx 部署能力托管静态站点（静态模式，指定端口）。
4. 通过 DevBridge 隧道把端口暴露为 https://xxx.devbridge-s2.hwtunnel.com 形式的公网域名。
5. 用 curl -sI <URL> 验证返回 200。

这里有个经验：沙箱节点池资源紧张时会出现 No available node pool，需要稍等重试；隧道暴露后要先做健康检查再提交，否则可能提交一个尚未就绪的地址。

三、ECS 持久化部署：cloud-init 自动化

沙箱是临时的，持久化上线要用 ECS。在 cn-north-4 区域按量创建 1 核 2G ECS（Rocky Linux 9.8），关键流程：

1. 复用/新建 VPC、子网与安全组（放通 80/443，SSH 按需放通）。
2. 创建 ECS 时绑定弹性公网 IP（EIP），并传入 cloud-init user_data 脚本。
3. cloud-init 脚本自动完成：安装 Nginx → 写入页面文件 → 启动并设置开机自启。
4. 等待实例 ACTIVE 后，用公网地址访问验证。

一个小技巧：如果页面文件较大，不适合直接塞进 user_data，可以先起一个最简 Nginx + SSH，再用上传方式补充页面文件；或者把页面 base64 编码后写入。

四、踩坑与总结

• 凭证分级：AK/SK 是长效凭证，务必避免写进代码仓库；生成临时 STS 凭证做发布类操作更安全。
• 安全组：只放通必要端口，公网开放 80 端口、SSH 限制来源 IP。
• 资源止损：按量付费的 ECS/EIP 用完及时释放，避免持续计费。
• 顺序与幂等：发布类 API 注意幂等键，重复提交会造成脏数据。

从单文件游戏到云端两级部署，整个链路走下来，对"静态站点上云"这件事会有一个非常完整的认识。HuaweiCloud DevKit 把沙箱、部署、隧道这些环节收敛成了可调用的能力，对开发者体验友好，值得一试。

（本文为原创技术分享，记录真实实践过程。）