部署上线Deployment
你可能会说
我做好了，怎么才能让别人用一个网址就能打开我的页面？
把项目发布到目标环境运行，使目标用户或其他系统可以正常访问例如平台取得项目文件后，生成可运行的网页或启动服务，再放到测试地址、内部地址或公开网址。发布前要确认发往哪里、怎样启动和需要哪些设置；失败时先查看系统记录的报错。
你可以这样告诉 AI Agent
请把当前 commit 部署到已授权的测试环境，不要改动生产。记录 commit hash、目标项目和环境；确认构建与部署日志成功后，打开测试地址检查页面版本标识和登录入口。任一步失败就停止，说明失败阶段和日志线索。
什么时候用
什么时候不用
- 不要把 localhost 地址当作已部署版本；它通常只在当前电脑上可用http://localhost:3000
- 双击 html 能打开不等于已经部署：file:// 指向本机文件，不是可共享的部署地址file:///Users/…/index.html
- 不看平台配置就上传：构建命令或输出目录错了，线上就会失败⚙ 构建命令 / 输出目录填错→失败
- 上线后不做正式环境验收：资源 404、环境变量缺失等问题会直接出现在正式页面图片 404未做线上验收，资源路径和环境变量问题可能影响正式页面
组成结构 · Anatomy
💻源码
→
📦打包产物
→
☁️托管平台
→
🌐公网网址
你写的或 AI 生成的源文件，浏览器不一定直接能跑
静态前端常生成 dist；服务项目也可能由平台从源码构建并启动
平台按配置托管静态文件、函数或服务，并提供相应运行环境
公开网站通常有平台分配的地址；内部服务可能只在私网或服务间访问
常见变体 · Variants
Vercel / NetlifyVercel & Netlify
vercel --prod
前端项目常用；函数和服务能力要看具体平台与套餐
GitHub PagesGitHub Pages
Settings → Pages
为仓库提供静态网站托管；权限和可用功能以当前方案为准
自建服务器VPS
ssh user@1.2.3.4
需要长期运行服务，并能自行维护系统与部署时
典型使用场景
Vercel 部署成功页
🎉
Congratulations!
my-first-page 部署成功
页面预览
my-first-page.vercel.app
终端 npm run build
$ npm run build
vite v6.0.0 building for production…
dist/index.html 0.5 kB
dist/assets/index-8fk2.js 142 kB
✓ built in 3.2s
dist 是此静态前端构建生成的输出目录
push 触发自动部署
浏览器打开公网网址
延伸阅读 · 权威出处
快速练习