Vibe Coding 项目部署全流程：从「本地能跑」到「别人能用」

AI 写完代码怎么上线？拆解从本地验证、推 GitHub、选平台、填环境变量到一键部署绑域名的五步流程，并绕开 AI 生成代码特有的 4 个坑。

折腾鸭编辑部2026-08-27 发布2026-08-27 更新

登录后收藏

内容说明

折腾鸭可能通过推广链接获得佣金，但不会影响编辑结论，也不会增加你的支付价格。

Vibe Coding（「氛围编程」）是这两年最火的 AI 辅助开发方式。说白了就是：你用大白话描述想要什么，AI（Cursor、Claude Code、Lovable、Bolt 这类工具）直接帮你生成能跑的代码。不懂编程的人，几个小时也能搭出一个带后端的网页应用。

但几乎所有 vibe coder 都会卡在同一个地方：代码在本地跑得好好的，一部署到网上就崩。网上有句话很形象——「本地能跑 ≠ 生产能跑」。本文把「从 AI 写完代码到真正上线」的完整流程拆开讲，重点绕开那些 AI 生成代码特有的坑，让你写出来的东西，真能变成别人打开就能用的网址。

一、动手前先判断：你的项目是哪一种？

部署方案不是通用的，先对号入座，判断错了轻则多花几小时瞎配置，重则上线直接崩、数据丢。

纯静态前端：只有 HTML / CSS / JS，没有后端。比如个人主页、落地页、展示站。判断方法：项目里没有 server.js、app.py 这类服务端文件，也不连数据库。
全栈项目：有后端（Node / Python）、连数据库、有用户登录。判断方法：有 server.js、app.py、main.py，或 package.json 里有 "start" 启动脚本。
Next.js 项目：比较特殊，它的前端框架里带了部分后端能力，不能直接当纯静态扔上去，得选支持 Node 运行时的平台。

二、部署五步走（普通人也能跟）

第 1 步本地「体检」（最重要，却被 80% 的人跳过）

部署前花 30 分钟查三件事：

密钥有没有写死在代码里：全局搜 API_KEY、SECRET、sk-，任何出现在前端 .js 文件里的密钥都要挪到环境变量。
依赖锁没锁：确认有 package-lock.json / requirements.txt。不锁版本，部署时装的依赖可能跟你本地完全不一样，直接崩。
启动命令明不明确：写份说明，讲清楚怎么跑（比如 pip install -r requirements.txt 然后 python main.py，或 gunicorn main:app -b 0.0.0.0:8000）。

第 2 步把代码推到 GitHub

部署平台都要从 GitHub 拉代码。本地没 Git 就先 git init → git add . → git commit → 推到 GitHub 新建的仓库。这一步相当于把你的「行李」统一寄到一个云端仓库，后面部署、改代码都能自动同步。

第 3 步选部署平台（关键决策）

静态项目：Vercel（对 Next.js 支持最好，2 分钟上线）、Cloudflare Pages（国内访问快、免费无限带宽）、七牛云 Kodo（面向国内用户）。
全栈项目：问自己三个问题——
1. 用的什么数据库？AI 默认爱用 SQLite，但 SQLite 在 Vercel 这类 Serverless 平台上线后数据库文件会直接消失！必须换到有持久化存储的平台（Railway、Render、Zeabur），或迁移到托管 PostgreSQL（Supabase、Neon）。
2. 需要一直在线还是按需响应？Vercel / Netlify 的函数是「用时才启动」，Render 免费版 15 分钟没人访问会休眠、下次来要等 10–30 秒冷启动，演示很尴尬。要持续在线选 Railway 或 Zeabur。
3. 有多少运维经验？几乎没有就选 Zeabur / Railway 一键部署；想多控制就上 VPS（自己配 Nginx）。

第 4 步填环境变量（90% 部署失败都栽在这）

这是最容易翻车的一步。把你本地 .env 文件里的每一个变量，原样填到部署平台的控制台里。漏一个，线上就报 "undefined" 或功能失灵。

记住：部署平台不会自动读你电脑上的 .env。本地能跑、线上报错，十有八九是这俩对环境变量不一致。

第 5 步一键部署 + 绑域名开 HTTPS

在平台点 "Deploy"，等 1–5 分钟，得到一个 .vercel.app 之类的网址。想用自己域名，就在平台添加自定义域名，按提示去域名商改 DNS（加 A 记录或 CNAME）。

现代平台会自动通过 Let's Encrypt 给你发免费 SSL 证书，HTTPS 不用自己配，DNS 生效后用 https://你的域名就能访问。

三、AI 生成代码特有的 4 个坑（重点！）

这 4 个坑是手写代码不太会踩、但 AI 生成的代码「重灾区」：

坑 1：API Key 写死在前端

AI 为了让代码「直接能跑」，常把密钥写进 .js。一上线，任何人按 F12 就能看到你的密钥。

修法：移到 .env，代码里改成 process.env.XXX，.env 加进 .gitignore 别推到 GitHub。

坑 2：localhost 写死

代码里写 http://localhost:3000/api，本地没事，上线后前端找不到后端，所有接口全挂。

修法：改成环境变量 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'，在平台里把生产地址填上。

坑 3：没有 start 脚本

部署平台不知道怎么启动你的应用，报 "Missing start script"。

修法：package.json 里要有 "start" 字段（dev 是本地开发用，start 是生产用，两个都要有）。

坑 4：CORS 没配生产域名

本地前后端都在 localhost 没这问题；上线后前端在 A 域名、后端在 B 域名，后端没把前端域名加白名单，所有请求被浏览器拦。

修法：后端 CORS 配置加上生产域名，例如 app.use(cors({ origin: ['https://你的前端域名'] }))。

四、国内用户额外注意

域名备案：项目面向大陆用户、用国内服务器 / CDN，需要 ICP 备案（7–10 天）和公安备案（30 天内）。备案期间可以先用海外域名 / 平台临时跑通，等下来再切。
国内访问慢：Vercel 在大陆偶尔不稳、GitHub 上的图片资源也慢。把媒体文件传到国内对象存储（如七牛云）+ CDN，加载能从几秒降到几百毫秒。
环境变量同步：建议维护一个 .env.example 列全变量名（不写真实值）当准绳，避免本地和平台不一致。

五、偷懒技巧：让 AI 帮你做部署准备

不想手动查上面那些坑？在 Cursor / Claude Code 里直接贴这段提示词：

帮我把这个项目部署到 [Vercel / Railway / Zeabur]。开始前请先：
1. 检查代码里有没有硬编码的 API Key 或密钥，有就移到环境变量
2. 检查有没有写死的 localhost URL，改成环境变量
3. 确认 package.json 有正确的 "start" 和 "build" 脚本
4. 确认 CORS 配置包含了生产环境域名
5. 告诉我部署平台里要填哪些环境变量、填什么值
然后给出完整部署步骤。

这段提示词能让 AI 在部署前主动排查那 4 个坑，比直接问「怎么部署」高效得多。

六、小结

Vibe Coding 把「写代码」的门槛干掉了，但「上线」这最后一步，卡住了无数好点子。记住三件事：本地能跑不等于线上能跑；先判断项目类型再选平台；环境变量和那 4 个 AI 坑是翻车重灾区。把这套流程走顺，你用 AI 写出来的东西，才能真正变成别人能打开的网址。