工具部署｜Server Survival · 3D 云架构塔防，边玩边学扩缩容-远影归灯

想在浏览器里「当一把云架构师」？这款 3D 塔防把 CDN、防火墙、负载均衡、数据库、队列、GPU 集群等节点摊在一张等距网格上：接好链路、扛住越来越猛的流量，还要挡住红球 DDoS。生存模式无尽关、战役 25 关、沙盒自由练手——玩的过程就是在摸扩缩容、冷启动、断路器、多地域这些概念。

技术上是 原生 ES Module + Three.js + Tailwind，零构建：克隆下来用静态服务器打开就能玩。本机已实跑到主菜单、Survival 3D 画布、可摆 Firewall／CDN／Storage 并连线，流量球在跑、防火墙能拦恶意请求。下面是部署步骤和踩坑。本帖免费。

文末可免费下载源码包（解压后按正文步骤用静态服务打开）。

能玩什么

Survival：预算 + 声誉双约束，流量会逐步加压并夹带恶意请求
Campaign：25 关分章，每关钉一个架构知识点（从「第一台服务器」到推理／电力预算）
Sandbox：自定义预算与流量配比，无失败压力，适合试连线规则
26 种服务：按 Front Door／Compute／Data／Async／Ops 五类工具栏切换
真实机制缩影：自动扩缩与冷启动、断路器与重试、队列积压扩容、CDN 命中、监控解锁指标面板等

技术栈

层级	技术
运行方式	静态文件 + 任意 HTTP 服务（本机用 `python3 -m http.server`）
渲染	Three.js r128（CDN）
样式	Tailwind CDN
逻辑	原生 ES Module（`index.html` → `src/main.js` + `game.js`）
可选 npm	仅贡献者 lint／单测，玩游戏不需要

本机部署（已跑通）

# 解压或克隆到任意目录后
cd server-survival
python3 -m http.server 8000 --bind 127.0.0.1
# 浏览器打开 http://127.0.0.1:8000/

也可用 npx --yes serve -l 8000 或 php -S 127.0.0.1:8000。端口占用就换 8010 等。

打开后应看到主菜单：Start Survival／Campaign／Sandbox。进 Survival 后跳过教程，底部工具栏选 Front Door → FW／CDN，再切 Data → Storage，点网格放置；用 Link 按规则连线，点 Play 放流量。

实测踩坑

不要双击 index.html／用 file:// 打开
游戏是原生 ES Module，file:// 会被浏览器 CORS 拦住：菜单壳可能还在，3D 画布却是空的。必须走 HTTP 静态服务才算跑通。
Three.js／Tailwind 默认走外网 CDN
- https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
- https://cdn.tailwindcss.com
内网或访问 CDN 不稳定时，可能空画布或样式错乱；页面里也有 three.js 加载失败提示。能访问对应 CDN，或自行改成本地／镜像资源后再玩。
需要 WebGL
老显卡、部分远程桌面、关闭硬件加速时，3D 可能黑屏。
连线有类型规则
例如 Firewall 不能直连 CDN，界面会提示应接到 Load Balancer／API Gateway 等——不是 bug，是在教你「流量该怎么走」。
8000 被占用
换端口即可，例如 python3 -m http.server 8010。
别以为要先 npm install
根目录 npm 脚本只服务 eslint／vitest；日常游玩零构建。