9.3 部署与生产化：从构建产物到CDN

9.3 部署与生产化：从构建产物到 CDN

本节摘要：部署这道工序分两种形态：纯客户端应用产物是静态文件，任何静态托管都能接；SolidStart 应用按部署目标选适配器——Node 服务、边缘函数或纯静态预渲染。本节给出三种形态的构建与配置，缓存头策略、环境变量的取用方式，以及错误监控的接入清单。

上线流程从打包命令开始：

npm run build
# 纯客户端应用：产出静态目录（哈希文件名资源 + 入口 HTML）
# SolidStart：按配置的适配器产出对应部署包
npm run start   # Node 适配器下的本地生产验证
​

产物结构本身没有惊喜：哈希文件名的脚本与样式、入口页、按路由分割的异步块。真正要做对的是三件事：选对部署形态、配对缓存策略、接上监控。逐一来。

三种部署形态

形态一：纯静态托管。适用纯客户端应用与预渲染产物。构建目录整体丢给任意 CDN 或对象存储静态托管，配上单页应用的路由回退（未命中路径返回入口页）。成本最低、运维面为零，内容站与后台工具的默认选择。

形态二：Node 服务。SolidStart 的服务端渲染形态需要常驻进程执行服务端渲染与服务端函数。Node 适配器产出可启动的服务包，前面挂反向代理做 TLS 与压缩。适合重服务端逻辑、需要长连接或自建缓存的团队。

形态三：边缘函数。把服务端渲染与数据函数分发到离用户近的边缘节点。适配层把同一份代码编译成目标平台的函数格式，冷启动小、地理延迟低。适合全球化用户面、首屏指标敏感的产品。

三种形态可以在一个项目里按路由混选（6.2 的策略混用），部署层面的对应物是"静态路由走 CDN、动态路由走函数"的分流配置。

缓存与环境变量

缓存策略是生产事故的高发区，规则只有两条：带哈希的资源永久缓存，入口页绝不缓存。静态资源文件名含内容哈希，内容变名字变，可以放心设一年期强缓存；入口 HTML 是所有哈希引用的源头，必须设不缓存或短缓存协商，否则发版后用户拿着旧入口引用被删掉的旧哈希文件，白屏告警立刻到来。

环境变量分两拨。构建期变量打进产物（公开配置、接口基址），运行期变量留在服务端（密钥、数据库连接）：

// 构建期：打进客户端产物，不要放任何秘密
const apiBase = import.meta.env.VITE_API_BASE;

// SolidStart 服务端函数内：运行期读取，密钥安全
export async function serverSideThing() {
  const secret = process.env.PAYMENT_KEY;
}
​

取用纪律与 Next.js 时代一致：前缀决定可见性，公开前缀的变量视为全世界可见，评审时看到公开前缀里出现密钥直接打回。

监控接入清单

错误监控：全局错误与未处理的 Promise 拒绝两处挂钩；错误边界捕获的渲染错误要主动上报（边界兜住了不等于可以不记录）。接入点与框架无关，主流监控 SDK 直接可用。性能监控：以真实用户指标为主——首屏绘制、可交互时间、累计布局偏移；SolidStart 的流式渲染下，首屏指标要按"第一块内容到达"口径看，别套整页返回时代的老阈值。业务埋点：注意信号更新频率远高于 React 的重渲染频率，埋点不要挂在更新路径上，挂用户事件与路由变化即可——挂在信号上会把埋点请求打成风暴。

对照表收束：

⚠️ 发版前的最后一道检查：入口页缓存头、回退路由、错误页三件配置。三者都对的静态部署可以跑很多年不出事；三者错一个，下一次发版就是集体白屏。

灰度与回滚：发版的最后一道保险

监控告诉你坏没坏，灰度和回滚决定坏得多大。灰度策略按部署形态分档：静态托管形态用入口页分流——不同用户群体拿到不同版本的入口引用，新旧版本共存于 CDN，按百分比放量；服务端形态在负载均衡层按实例切流，新版本实例先接少量流量。两档的共同纪律是放量前先内部全量试用，放量中盯错误率与关键性能指标的对比曲线。

回滚预案要演练而不是文档化：静态形态回滚等于把入口引用指回旧哈希，几分钟的事，前提是旧版本产物还留在 CDN 上——保留策略要明确写进配置；服务端形态回滚等于切回旧实例镜像，前提是镜像仓库保留最近几个版本。演练一次完整的"发现异常、切回旧版、定位修复、再放量"流程，比十页预案文档更能建立团队信心。

问题：上线前还有哪些安全检查？

三件常规事。依赖审计进流水线：包管理器的审计命令在持续集成里跑，高危项阻断合并。安全头配齐：内容安全策略能拦住注入类攻击的绝大部分，脚本与样式来源按实际产物配；框架产物本身不引入特殊豁免，与通用 Web 安全实践一致。敏感信息扫描：构建产物里检索密钥特征（公开前缀变量按 9.3 的纪律本就不该有密钥，但要防手滑），一项正则任务，放发布流水线的最后一步。

本节要点回顾

• 形态按路由混选：静态走 CDN，动态走函数，分流配置承接。
• 缓存两条铁律：哈希资源永缓存，入口页不缓存。
• 变量看前缀：公开前缀全世界可见，密钥只留服务端。
• 指标换口径：流式渲染下按首块到达评估首屏。

构建产物的体积门禁

生产化的最后一项工程习惯：给产物上体积门禁。持续集成里对入口块与总产物设预算阈值，超限即报警——预算值用自己的历史基线推导，不抄别人的数字。Solid 应用的预算特点：运行时占比小，所以入口块的增量几乎全部来自业务代码与依赖，报警信号比 React 应用更"纯净"——一旦超限，问题基本在你的代码里而不是框架里，排查起点明确。配合 7.1 的产物诊断三项，体积管理形成"门禁报警、报告定位、依赖修正"的闭环。

至此工程链路全部走通。最后一章上探原理与决策——响应式内核的实现细节、四框架总对比，以及要不要迁移的最终答案。