部署平台

本地 npm run build 只是第一步——部署平台负责把产物推到 CDN、配置 HTTPS、预览 PR、绑定自定义域名。现代前端常选 Vercel、Netlify、Cloudflare Pages 之一，而非自建 Nginx（全栈或企业场景除外）。

学习目标

• 区分静态站点、SSR Node、边缘函数三种部署形态
• 知道三大平台各擅长什么
• 理解 nextjs-essentials 与静态 SPA 部署差异

部署形态

形态	产物	典型平台	框架
静态 SPA	dist/ HTML/JS/CSS	Netlify、Cloudflare Pages、GitHub Pages	Vite + React
SSR / 全栈	Node server 或 serverless 函数	Vercel、Netlify	Next.js
混合	静态 + API 路由	同上 + 边缘	Next App Router

html-css-essentials 纯静态页可直接上传任意静态托管；一旦用 动态路由、RSC、Route Handler，要选支持 Node/Edge 的平台。

Vercel

• Next.js 同源公司，零配置体验最好：Git 连接 → 自动 next build → 预览 URL
• 环境变量、ISR、Edge Middleware 与 Next 文档一致
• 本站若自托管 Docker + Nginx，概念上仍是 build → 运行 Node 进程，只是平台替你做

Netlify

• 早期静态站强者，现支持 Netlify Functions、SSR 适配器
• netlify.toml 声明 build command、publish 目录
• 适合 Jamstack、营销页、部分 Next 静态导出

Cloudflare Pages

• 与 Cloudflare CDN、Workers 深度集成
• 全球边缘快；适合静态 + Workers 轻 API
• Next 需按官方适配器文档配置（生态仍在演进，选型时查当前支持矩阵）

通用流水线

git push → 平台 webhook
    → install（读 lockfile）
    → lint / typecheck（可选）
    → build
    → 原子发布 + 旧版回滚
    → PR 预览环境（unique URL）

与 ft-npm scripts、ft-eslint 直接挂钩——部署前应已通过 CI 门禁。

环境变量

• 构建时：NEXT_PUBLIC_* / VITE_* 打进客户端 bundle
• 仅服务端：DATABASE_URL 等 不要 加 public 前缀
• 平台 UI 配 env，勿提交 .env 到 Git

与 react / typescript 栈

• react-essentials Vite SPA：npm run build → 上传 dist
• typescript-essentials：类型错误应在 build 前拦住
• javascript-core：无构建的 demo 用任意静态托管即可

练习

• 对比 Vercel 与 Netlify 文档里「Next.js 部署」一节差异
• 画一张从 git push 到用户访问 URL 的流程图（5 步内）
• 说明 SPA 与 SSR 在 SEO 与首屏上的 trade-off 各一句

小结

选平台先看框架：Next 优先 Vercel 类 SSR 托管；纯 Vite 静态任选 CDN。 下一课了解 Bun 与 Rolldown 等新运行时/打包器生态。