Ubuntu 22.04 + Nginx 部署单文件 2048：一次不依赖构建工具的静态站点实践

为什么用单文件做静态站点

2048 是一个很适合练手的静态页面：规则简单、交互明确，而且完全可以写成一个 index.html，把 CSS 和 JavaScript 全部内联，不依赖 npm、Vite 或任何构建工具。这样部署时只需要一个文件，特别适合用来验证“云服务器 + Nginx + 安全组”这条最基础的静态站点链路。

本文用一个纯单文件的 2048 做例子，记录在 Ubuntu 22.04 上把页面托管到 Nginx 的完整过程。页面本身已在本地浏览器中验证过方向键、WASD、合并计分和最高分记录；下面重点讲部署和排错。

环境与前提

• 一台 Ubuntu 22.04 的云服务器，已绑定弹性公网 IP，能通过 SSH 登录。
• 服务器上已安装 Nginx；没有的话执行 sudo apt update && sudo apt install -y nginx。
• 云平台安全组放行 TCP 80；SSH 22 只对你的出口 IP 放行，不要图省事开放 0.0.0.0/0。
• 下面的命令默认用有 sudo 权限的普通用户执行。

第一步：准备站点目录

不要把网站文件放在 /root 或当前用户的家目录里。Nginx 的 worker 进程通常以 www-data 身份运行，家目录权限过严会导致 403。使用标准的 /var/www 目录：

sudo mkdir -p /var/www/2048
sudo chown -R "$USER":"$USER" /var/www/2048
sudo chmod 755 /var/www /var/www/2048

把准备好的 index.html 上传到 /var/www/2048/index.html。可以用 scp，也可以直接在服务器上创建：

scp index.html ubuntu@<服务器公网IP>:/var/www/2048/index.html
ssh ubuntu@<服务器公网IP> "ls -l /var/www/2048/index.html"

这个 2048 的核心逻辑集中在一次滑动合并里，思路是把一行数字压紧、相邻相同就合并，再补零：

function slideLine(line) {
  const values = line.filter(Boolean);
  const result = [];
  let gained = 0;
  for (let i = 0; i < values.length; i++) {
    if (values[i] === values[i + 1]) {
      const merged = values[i] * 2;
      result.push(merged);
      gained += merged;
      i++;
    } else {
      result.push(values[i]);
    }
  }
  while (result.length < 4) result.push(0);
  return { result, gained };
}

四个方向只需要把行或列取出、按方向反转后复用同一个函数，再把结果写回棋盘。完整页面就是一个 HTML 文件，没有额外的静态资源请求。

第二步：配置 Nginx

Ubuntu 的 Nginx 默认使用 sites-available / sites-enabled 结构。新建一个站点配置：

sudo tee /etc/nginx/sites-available/2048 > /dev/null <<'EOF'
server {
    listen 80;
    server_name <你的公网IP>;

    root /var/www/2048;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    access_log /var/log/nginx/2048.access.log;
    error_log  /var/log/nginx/2048.error.log;
}
EOF

把 <你的公网IP> 换成服务器的弹性公网 IP。启用站点并检查配置：

sudo ln -sf /etc/nginx/sites-available/2048 /etc/nginx/sites-enabled/2048
sudo nginx -t
sudo systemctl reload nginx

如果 nginx -t 提示默认站点已经占用了 default_server，可以移除默认站点，或者不要写 default_server，直接用公网 IP 作为 server_name 来匹配请求。

第三步：放行安全组和系统防火墙

云服务器上“服务起来了但公网访问不了”，最常见的原因是安全组。控制台入方向规则至少需要：

• TCP 80，源地址 0.0.0.0/0（静态站点对公网开放）。
• TCP 22，源地址只填自己的出口 IP/32，用于 SSH 维护。

如果系统启用了 ufw，还要在系统层面放行：

sudo ufw status
sudo ufw allow 80/tcp
sudo ufw allow from <你的出口IP> to any port 22 proto tcp

不需要为了这次部署额外购买负载均衡、域名或证书；用公网 IP 直接访问即可。若后续要绑定域名并启用 HTTPS，再考虑证书和备案问题。

第四步：验证

先在服务器本机验证 Nginx 是否真的在监听 80：

ss -lntp | grep ':80'
curl -I http://127.0.0.1/

然后从公网验证：

curl -I http://<你的公网IP>/
curl -s http://<你的公网IP>/ | head -n 5

期望看到 HTTP/1.1 200 OK 和页面的 HTML 开头。浏览器打开公网 IP，方向键或 WASD 能移动方块、相同数字能合并、得分会增加，就说明静态站点链路已经通了。

常见问题

403 Forbidden

通常是权限问题。Nginx 需要对路径有执行权限、对文件有读权限：

namei -l /var/www/2048/index.html
sudo chmod 755 /var/www /var/www/2048
sudo chmod 644 /var/www/2048/index.html

如果站点目录在 /root 或 /home/xxx 下，父目录的 700 权限会直接把 www-data 挡在外面，建议直接迁到 /var/www。

404 Not Found

先确认 root 指向的目录和文件真实存在，再看实际生效的配置：

sudo nginx -T | grep -n "root\|server_name"
ls -l /var/www/2048/index.html

改完配置一定要先 sudo nginx -t 再 reload，避免把错误配置带上线。

连接超时或 Connection refused

按“安全组 → 系统防火墙 → 服务监听”的顺序排查：控制台入方向是否有 80、ufw status 是否放行、ss -lntp 是否有进程监听 80。三者缺一不可。

清理

如果只是做实验，验证完可以按下面的顺序移除站点，避免留下无用的配置和目录：

sudo rm -f /etc/nginx/sites-enabled/2048
sudo rm -f /etc/nginx/sites-available/2048
sudo nginx -t && sudo systemctl reload nginx
sudo rm -rf /var/www/2048

如果服务器是临时实验环境，记得在云控制台释放 ECS 和弹性公网 IP；如果是自己的长期服务器，只删除站点配置即可，不必动系统自带的 Nginx。

小结

单文件静态页面的部署链路很短：目录权限、Nginx 的 root 与 try_files、安全组 80、最后用 curl -I 做一次端到端验证。把这条链路跑通之后，再上域名、HTTPS、缓存和 gzip 都是在这个基础上叠加。对于 2048 这类纯前端小游戏，一台 1 核 1G 的服务器已经足够，重点是把权限和网络入口收窄到最小。