内部工具最贵的是运维，而不是开发

一、内部工具最贵的是运维，而不是开发

内部工具的用户常常只有十几个人，日活个位数，但生命周期能拖两三年。这种场景下真正的成本不在第一版代码，而在持续的运维开销：一个常驻 Node 进程，要配 PM2、要盯内存、要处理端口冲突、每次改需求重新发版。纯静态页把这部分压到接近零：产物就是几个 .html、.js 文件，扔进 nginx 目录或对象存储就结束了，没有进程可挂，也没有内存可泄漏，证书、CDN、监控全部复用公司现成的那一套。

二、部署就是一条 rsync

用 Vite 打包，把 base 设成 './'，产物就能在任意子路径下打开。发布脚本只有一行：rsync -avz --delete dist/ tool:/var/www/tool/。文件名带 hash，index.html 设 no-cache，其余资源 max-age=31536000，用户永远拿到当次版本，不会出现「改了没生效」。更极端的场景可以直接打成单个 HTML 发给同事双击打开——只是这时要避开 fetch('./data.json')，file:// 协议下会被拦，数据得内联进 <script type="application/json">。

三、鉴权放在网关，页面只负责显示

静态页没有后端，所以权限一定不能写在页面里。用 nginx 的 auth_request 或内部 SSO 的 oauth2-proxy 把整站挡在后面，前端只请求 /api/me 拿到角色，决定渲染哪些 tab。记住：隐藏按钮不是权限，写接口必须在 BFF 再校验一次。Token 放 httpOnly cookie，不要塞 localStorage。如果工具要串好几个内部系统，就写一层薄的 BFF 收敛 CORS 和 token 刷新，静态页只面对一个同源域名。

四、轮询和 SSE 就够用了

大部分内部工具是「查一下、改一下」，上 WebSocket 属于过度设计。5 秒轮询加一个判断即可：document.visibilityState === 'hidden' 时停掉定时器，切回来立刻拉一次，既省请求又不耽误事。长任务用 SSE，new EventSource('/api/tasks/123/stream')，记得在 nginx 上加 proxy_buffering off，否则消息会被攒着一起发。列表数据的缓存放 sessionStorage，key 里带个版本号，避免格式升级后旧缓存把页面炸掉。

五、回滚和灰度便宜得离谱

Git 分支即环境：main 推到生产目录，功能分支推到 /preview/<branch>/ 让人直接点。回滚就是把上一份 dist 拷回来，或让对象存储的软链指回旧目录，几十秒的事。灰度更简单——?beta=1 写进 localStorage，或者读一个 /api/flags 决定是否启用新组件。前端报错监控也不需要 SDK：window.onerror 加 unhandledrejection，POST 到一个收日志的接口，二十行代码覆盖九成问题。当然，需要长时间后端任务、流式处理大文件、或者要做 SSR 的工具，还是老老实实写服务——静态页的优势，仅限在「读多写少、逻辑简单」这一类内部工具上。