用华为云 ECS + Nginx 部署纯前端 HTML5 Canvas 小游戏的完整流程

一、背景与目标

纯前端的 HTML5 Canvas 小游戏（贪吃蛇、打砖块等）只有 HTML、CSS、JS 和图片等静态文件，不需要后端进程。把它放到华为云弹性云服务器 ECS 上，用 Nginx 提供静态文件服务，就能通过公网 IP 或域名访问。本文以 CentOS/EulerOS 或 Ubuntu 的常见环境为例，完整走一遍：安全组放行、安装 Nginx、目录规划、alias 配置、gzip、缓存与版本号、安全更新和回滚。

二、准备工作

• 一台已绑定弹性公网 IP 的 ECS，系统为 Linux，能用 SSH 登录。
• 安全组入方向放行 TCP 80 端口（如启用 HTTPS 再放行 443）。控制台路径：ECS 实例详情 → 安全组 → 配置规则 → 入方向规则 → 添加规则，源地址一般为 0.0.0.0/0。注意只放行需要的端口，22 端口建议限制为自己的 IP。
• 本地已有游戏目录，例如 game/ 下含 index.html、main.js、style.css、assets/。

三、安装 Nginx

# Ubuntu / Debian
sudo apt update && sudo apt install -y nginx
# CentOS / EulerOS
sudo yum install -y nginx
sudo systemctl enable --now nginx
nginx -v

四、上传静态文件并规划目录

建议把站点文件放在 /var/www/game，并让 Nginx 运行用户可读。本地用 scp 或 rsync 上传：

# 本地执行
rsync -avz --delete ./game/ root@<ECS公网IP>:/var/www/game/
# 服务器上检查权限：目录 755，文件 644
sudo find /var/www/game -type d -exec chmod 755 {} \;
sudo find /var/www/game -type f -exec chmod 644 {} \;

如果使用 SELinux（CentOS 类系统），还需要执行 sudo restorecon -Rv /var/www/game，否则可能出现 403。

五、Nginx 配置：location /game/ 使用 alias

新建 /etc/nginx/conf.d/game.conf：

server {
    listen 80;
    server_name _;

    location /game/ {
        alias /var/www/game/;
        index index.html;

        # 静态资源按类型设置缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|svg|webp|mp3|ogg|woff2)$ {
            expires 30d;
            add_header Cache-Control "public";
        }
    }
}

# 全局压缩，写在 http 块或 conf.d 的 server 外层均可
gzip on;
gzip_min_length 1k;
gzip_comp_level 5;
gzip_types text/css application/javascript application/json image/svg+xml;

要点：使用 alias 时，location 与 alias 的末尾都要带斜杠，保持一致，否则容易拼出错误路径；alias 写在嵌套 location 的正则里会有路径替换的坑，所以上面把 expires 放在正则 location 内时，务必实际访问验证。如果觉得麻烦，可以改用 root /var/www/ 配合 location /game/，此时访问 /game/index.html 对应 /var/www/game/index.html。图片和音频已是压缩格式，不必再 gzip。

六、检查配置并重载

sudo nginx -t
sudo systemctl reload nginx
curl -I http://127.0.0.1/game/index.html
curl -s -H "Accept-Encoding: gzip" -I http://127.0.0.1/game/main.js | grep -i content-encoding

nginx -t 通过后再 reload，reload 不会中断现有连接；如果配置有误，reload 会失败并保留旧配置继续运行。然后用浏览器访问 http://<ECS公网IP>/game/。

七、用 ?v= 解决浏览器缓存

静态资源设置了 30 天缓存后，更新游戏代码用户可能仍加载旧文件。常用做法是在引用处加版本参数：

<script src="main.js?v=20261025"></script>
<link rel="stylesheet" href="style.css?v=20261025">

每次发布只需要改 v 的值；index.html 本身不要设置长缓存，可单独加 location = /game/index.html 并设置 add_header Cache-Control "no-cache"。

八、覆盖发布前先备份

sudo cp -a /var/www/game /var/www/game.bak.$(date +%Y%m%d%H%M)
# 发布新版本
rsync -avz --delete ./game/ root@<ECS公网IP>:/var/www/game/
# 出问题时回滚
sudo rm -rf /var/www/game && sudo cp -a /var/www/game.bak.202610251030 /var/www/game

cp -a 会保留权限、属主和时间戳。rm -rf 前请再次确认路径，避免误删。

九、常见问题排查

• 浏览器打不开：先在服务器上 curl 本机，通了再查安全组入方向 80 端口；还要看系统防火墙（firewalld/ufw）。
• 404：多半是 alias 路径或斜杠写错，查看 /var/log/nginx/error.log。
• 403：目录权限或 SELinux 导致，检查 755/644 和 restorecon。
• Canvas 页面空白：用浏览器开发者工具看 Console 和 Network，确认 JS 路径与大小写一致（Linux 区分大小写）。

十、总结

整个流程可以归纳为：放行 80 端口、安装 Nginx、静态文件放 /var/www/game、用 alias 映射 /game/、开启 gzip 和缓存、用 ?v= 控制版本、nginx -t 后 reload、发布前 cp -a 备份。流程简单，适合小游戏、前端 Demo 和文档站的快速上线；若要面向公众长期运营，建议再配置域名、备案和 HTTPS。