把单文件 HTML 小游戏部署到华为云 ECS：一次完整的 Nginx 静态站实践

背景

最近在做一个纯前端的小项目——一个 2048 小游戏，全部 CSS/JS 内联在单个 `index.html` 里，不依赖 npm、Vite 或任何构建工具。做完之后需要给它一个可公开访问的地址，于是顺手把「从零开一台 ECS → 用 Nginx 托管 → 公网验证」这条链路完整走了一遍。这篇文章记录实际操作中的关键步骤和几个容易踩的坑。

一、准备实例

规格上没有必要贪大。一个纯静态页面，1 vCPU / 1 GB 的 `s6.small.1` 完全够用，系统盘 40 GB，镜像选 Ubuntu 22.04 server 64bit。带宽按量计费，5 Mbps 对静态页面来说绰绰有余。

创建时有两个细节值得注意：

1. **安全组要单独放通 80 端口**。默认安全组通常只开了 22，页面部署好之后如果外网访问超时，第一反应应该是查安全组，而不是查 Nginx。

2. **给实例打标签**。比如统一加一个 `grow=1` 标签，之后不管是批量巡检还是收尾回收，都能精确定位到自己创建的机器，避免误删别人的资源。

二、部署文件

静态站点的部署本质就是「把文件放到 Nginx 的根目录下」。这里建议不要直接扔在 `/usr/share/nginx/html/` 根上，而是放一个子路径，例如 `/usr/share/nginx/html/hc-activity/index.html`。好处是：同一个 Nginx 可以并行托管多个项目，互不干扰；将来要下线某个项目，直接删目录即可，不用去动根目录下的其他文件。

上传方式看手头有什么用什么。有 SSH 就直接 `scp`，没有就临时开一个 HTTP 上传通道，传完立刻关掉。

三、让服务自启

这一步经常被忽略。很多人 `nginx -s start` 之后测试通过就收工了，结果机器一重启，服务没起来，页面 502。

正确的做法是确认 Nginx 已经 `systemctl enable`：

systemctl enable nginx
systemctl start nginx

然后**主动做一次软重启验证**。重启后再 `curl` 一次，确认返回 200，这才算真正交付。这个动作花不了一分钟，但能避免「演示当天掉链子」。

四、公网验证

部署完必须从**外部**验证，不能只在机器上 `curl localhost`。因为在机器内部访问成功，只能说明 Nginx 活着；外网能不能通，还取决于安全组、EIP 绑定、以及有没有被云平台的 WAF 拦掉。

curl -sI http://<公网IP>/hc-activity/index.html

期望看到 `HTTP/1.1 200 OK` 和 `Content-Type: text/html`。如果返回 403，多半是文件权限问题（Nginx 用户读不到）；返回 404 则是路径对不上；直接超时就是安全组。

五、游戏本身的自测

页面能打开不等于功能正常。对于 2048 这类交互型页面，至少要做三件事：

• **用无头浏览器跑一遍**：模拟几十次方向键操作，确认能正常合并、计分，且控制台没有 JS 报错。

• **检查方块位置**：合并逻辑写错时最容易出现两个方块重叠渲染，肉眼在小屏幕上不一定看得出来。

• **验证持久化**：最高分存 `localStorage`，刷新后应该还在。

我这边实测跑完 48 次移动，得分 340，方块无重叠、无报错，才算通过。

六、别忘了收尾

按量计费的实例从创建那一刻就在产生费用，哪怕账户余额是 0。任务做完、截图留存之后，应该立刻把实例、系统盘、弹性 IP 一并释放，然后到费用中心确认没有遗留的计费项。

如果只是临时验证，更划算的做法是先用免费体验机或者沙箱环境，确认方案可行再开正式实例。

小结

把静态页面部署上线，技术难度其实很低，真正容易出问题的是三个地方：安全组没放通、服务没设自启、以及只在机器内部做了验证。把这三件事固化成 checklist，以后任何静态站点上线都能一次过。