~/oneirictech/lab 0% EXIT
这个站是怎么搭的
DECISION LOG · 2C2G / 3 Mbps / 无 CDN · 三服务共存
约束很硬。这一页不是技术栈清单,是决策记录:每个选择背后的约束、被否决的方案、以及已知还没解决的问题。
cat constraints.md → 3 条硬约束
compute
2 vCPU / 2 GiB,ESSD 40G(已用 6.9G)
bandwidth
3 Mbps 固定 ≈ 375 KB/s 出口,且三件事共用
network
国内区域,禁止依赖任何海外 CDN(Google Fonts 必挂)

零外部依赖

全站不引用任何 CDN,包括字体。Three.js 自托管(687 KB 原始 / 172 KB gzip),其余全部系统字体栈。

理由不是洁癖:3 Mbps 出口不允许我把带宽送给第三方;而入口页的关键文字全部写在 HTML 里,3D 与着色器是渐进增强 —— 加载失败、没有 WebGL、或系统开了「减少动态效果」时,内容照常可读可点。

入场动画:三段运镜,零模型文件

想要的效果是「纯白空间里,机柜一排排掠过,尽头一个沙发」。第一反应是建模导出 GLTF —— 随便一个带贴面的柜子就是 5~20 MB,在 3 Mbps 上要下载十几秒,HR 会直接关掉页面。

但这个场景本身就是极简几何:白地面、白墙靠雾消失、规整重复的柜体。于是全部代码生成:

BoxGeometry 阵列      × 4 列 × 15 行
EdgesGeometry         冷灰描边,制造"图纸感"
Fog(white)            远处完全白化 → 沙发从雾里显影
camera.z 插值         推进;FOV 58→44 收束定格
lookAt.x 插值         先掠过右侧机柜,再正对沙发

代价:零模型文件,全部动画逻辑约 12 KB。

git diff decisions → 采纳 / 否决
adopted
  • 程序化几何 + GLSL 着色器
  • 多页静态 + 数据驱动
  • 自托管 Three.js
  • 溶解转场(无硬切)
  • 四个模块四套独立视觉
rejected
  • GLTF 模型 / 图片背景
  • SPA 框架与路由库
  • Web 字体与第三方 CDN
  • 白闪切黑的硬转场
  • 为炫技而上的构建工具链

为什么是多页静态而不是 SPA

三个真实场景决定的:HR 会搜你(要能被抓取)、客户会从微信点进单个案例(要能深链)、以及坏一页不该拖全站。

代价是部分子页内容由 data.js 在前端渲染 —— 这是已知未完成项:上线前要加一步预渲染,把结果内联回 HTML。入口页与本页已是纯静态。

同机三服务的冲突点

这台 ECS 同时承担个人站、远程桌面中继、GPU 调度网关。冲突的不是 CPU,是带宽和内存。

一个我没能解决的

远程桌面本可以 P2P 直连,那样服务器只承担信令、几乎不占带宽。我用 STUN 做了实测:

Google-1  222.209.214.232:50461
Google-2  222.209.214.232:62850
Google-3  222.209.214.232:52413
Xiaomi    222.209.214.232:50784
→ 同一出口 IP,不同目标返回不同映射端口 = 对称型 NAT

对称 NAT 下,打洞方永远猜不到该往哪个端口回包,UDP 打洞在原理上不可能成功。这不是配置问题,是运营商网络结构问题。所以永久走中继,体验靠调画质而不是靠网络技巧。

我在这个问题上花了不少时间,最后的结论是承认它无解,然后把力气花在带宽封顶和画质上 —— 有时候正确的设计决策是放弃一条路。

还没解决

oneirictech.space · 蜀ICP备2026064011号-1 ← 能力矩阵 · 目录柜