代码运行的三种状态与构建原理
4.4 构建产物与 web 服务器
Tip
理解构建产物和Web服务器的关系,学会正确部署Next.js应用,避免安全风险。
1. 为什么要学这个?
在学HTML的第一天,你写了一个index.html,双击它,浏览器就打开了。
现在你做了一个Next.js全栈应用,运行build生成了产物。你把这些文件拷给不懂技术的朋友,让他"双击运行"。
他一脸懵逼地告诉你:"这里全是乱码(.js、.json),没有能点的东西。"
为什么现代Web应用不能"双击运行"?
2. 核心概念
2.1 产物与服务器
用做菜来比喻:
- 源代码:食材(生肉、生菜)
- 构建产物(Artifacts):做好的预制菜(真空包装的熟食),你不能直接吃包装袋,需要加热设备
- Web服务器:微波炉/餐厅服务员,负责把预制菜加热(执行JS)、摆盘(渲染HTML),最后端给顾客(浏览器)
技术定义:构建产物是源代码经过编译、打包、压缩后生成的代码。对于Next.js这类全栈框架,产物不仅包含静态资源,还包含服务端运行时代码,必须运行在Node.js环境中。
2.2 为什么不能双击?
graph TD
subgraph Traditional["传统静态网页"]
A[index.html] -->|双击打开| B[浏览器渲染]
end
subgraph Modern["现代全栈应用"]
C[TS/React源码] -->|Build| D[构建产物JS/JSON]
D -->|必须由Node.js执行| E[Web服务器]
E -->|动态计算&发送HTML| B2[浏览器渲染]
end
style A fill:#e0e0e0
style D fill:#fff9c4
style E fill:#e8f5e9
3. 适用场景
| 🎯 场景 | 行为 |
|---|---|
| 纯静态网站(Static) | 像Hexo/Vite这种,产物是纯HTML,可以用Nginx托管,甚至直接拖进浏览器 |
| SSR/全栈应用(Next.js) | 必须使用Web服务器,因为页面可能有"读取数据库"的代码,浏览器读不了数据库 |
4. 正确的运行方式
永远不要尝试人工解析.next文件夹:
- 在本地:使用
pnpm start - 在服务器:使用Docker或PM2运行
next start - 在Vercel:它自动帮你配置好了底层的AWS Lambda服务器环境
5. 避坑指南
| ✅ 推荐做法 | ❌ 禁忌 |
|---|---|
将.next加入.gitignore |
把构建产物提交到Git仓库(体积巨大且无意义) |
| 理解SSR需要服务器 | 试图把Next.js SSR项目部署到GitHub Pages(它是纯静态托管) |
| 保持环境一致 | 在Windows构建,复制.next到Linux运行(必须在目标环境构建) |
6. 真实案例
Story
2020年,SolarWinds供应链攻击:被污染的构建产物
SolarWinds是一家为美国政府、军方和数万家大公司提供网络管理软件的巨头,代码库管理非常严格。黑客没有直接修改源代码,而是潜入了SolarWinds的构建服务器(Build Server)。每当SolarWinds运行"Build"命令打包软件时,黑客植入的恶意脚本就会在构建过程中悄悄把一个后门(Sunburst)注入到最终的DLL文件(构建产物)中。结果:工程师检查源代码是干净的,但最终用户(包括五角大楼)拿到的软件带有后门。这个攻击潜伏了9个月,导致美国历史上最严重的机密数据泄露。
Vibe心法:保护构建环境的洁净,与编写安全的代码同样重要——构建产物是独立的防线。
7. 本章小结
- 🍱 预制菜原理:
.next文件夹是源代码编译后的"熟食",不可直接食用(双击) - 🔥 服务器角色:必须通过Web服务器(微波炉)来运行这些产物
- 🔒 安全意识:构建产物是供应链攻击的重要目标,不仅仅要看护好源代码
- ⚠️ 环境一致:必须在目标环境构建,不要跨平台复制产物