部署与上线

本地跑通 ≠ 别人能访问。这一章补齐交付的最后一公里。

你将学会

• 说清开发、构建、生产三种环境有什么不同；
• 把静态小项目部署到公网并拿到可访问链接；
• 知道前端和后端各自该部署在哪里；
• 在线上正确管理环境变量与密钥；
• 上线后做验证，并准备好回滚。

前置知识

编程心智模型速成（环境变量、前端后端那几节）与代码质量与审查。

一、本地 ≠ 线上

阶段	你做的事	关键差异
开发	npm run dev 边写边看	有热更新、报错详细
构建	npm run build 打包	产物才拿去部署
生产	用户访问的线上环境	缓存、域名、HTTPS、密钥都在这里配

本地能跑、线上报错，九成是这三件事不同：环境变量没配、构建产物没更新、路径/域名写死。

二、静态站部署（没有后端）

纯前端项目（本站就是）部署最简单，三种任选：

平台	特点	最小步骤
GitHub Pages	免费，跟着仓库走	仓库 Settings → Pages → 选分支/目录
Vercel	免费额度，连仓库自动部署	导入仓库 → 选框架 → 部署
Netlify	同上，拖拽产物即部署	拖入 dist/ 目录，或连仓库

最小流程：npm run build → 把产物目录（如 dist/）交给平台 → 拿到 URL → 访问验证。

三、前端 + 后端分别落位

有后端时，前后端通常是两处部署：

用户浏览器 → 前端（静态托管）→ 后端 API（云服务器 / 函数服务）→ 数据库

• 前端拿到的 API 地址必须能在线上访问（本地 localhost 一定要改掉）；
• 跨域（CORS）要在后端配置允许前端域名，否则浏览器会拦。

四、线上环境变量与密钥

铁律不变（见安全与合规）：

• 密钥只配在平台的环境变量面板里，绝不进仓库；
• 前端代码里的变量是公开的——任何 NEXT_PUBLIC_ / VITE_ 前缀的东西用户都能看到，别往里放密钥；
• 换环境（本地/线上）时对照一遍，别漏配。

五、域名与 HTTPS

• 域名解析：在域名商加一条记录，把域名指向平台（CNAME / A 记录）；
• HTTPS：主流平台默认自动签发证书；自定义域名一般点一下“启用 HTTPS”即可；
• 常见坑：解析没生效（等 DNS 传播）、把 www 和裸域配混、证书没覆盖子域名。

六、上线后验证与回滚

验证（部署完立刻做）：

• 打开首页，主流程走一遍；
• 看浏览器控制台和 Network，有没有 404 / 500；
• 确认线上读的是最新产物（不是缓存）。

回滚：部署前就想好“怎么退回去”：

• 平台一般能一键切换回上一个部署版本；
• Git 里保留可回退的提交（见Git 与版本控制）；
• 数据库等有状态的东西，回滚要格外小心——最好先备份。

动手练习

1. 把一个单文件 HTML 小项目部署到 GitHub Pages 或 Vercel，拿到可访问链接。
2. 在页面上找到你部署的页面，验证主流程与一次失败流程。
3. 写下这个项目的“回滚步骤”，存进 README。

检查点

• 能说出本地能跑、线上报错最常见的三个原因；
• 能把静态项目部署上线并拿到链接；
• 能说出本次部署的回滚方式。

常见问题

Q：一定要买服务器吗？ 入门项目不用。静态站 + Serverless 函数大多能零成本起步；有持续后端服务需求时才考虑云服务器。

Q：部署后改了代码，页面没变？ 看是不是没重新构建、平台没触发部署，或浏览器/平台缓存。硬刷新、重跑构建、清平台缓存。

小结与下一步

能上线，才算真的交付。上公开环境前，务必再过一遍安全与合规的检查清单。