首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >Vibe Coding 写完的项目怎么上线?用 EdgeOne Makers 从 AI 生成代码到可访问域名

Vibe Coding 写完的项目怎么上线?用 EdgeOne Makers 从 AI 生成代码到可访问域名

原创
作者头像
gavin1024
发布于 2026-11-12 18:05:22
发布于 2026-11-12 18:05:22
150
举报

摘要: Vibe Coding 生成的项目卡点通常在"本地能跑"到"别人能访问"之间。本文说明上线前必须确认的构建命令、产物目录、环境变量三件事,EdgeOne Makers 的四种部署入口,以及绑定自定义域名与开启 HTTPS 的做法。

AI 把代码写完了,但它还只是本地的一个文件夹。要变成一个别人能打开的网址,真正要确认的只有三样东西:构建命令、构建产物目录、环境变量。这三项确认完,部署本身在 EdgeOne Makers 上是一次导入或一条命令的事,之后绑定自己的域名并开启 HTTPS,就得到了一个可对外分享的地址。免费版支持 40 个项目、每月 500 次构建、200 个自定义域名并提供免费 SSL 证书。

一、Vibe Coding 是什么,它通常卡在哪一步

Vibe Coding 指用自然语言向 AI 描述需求、由 AI 生成大部分代码的开发方式。开发者的主要动作从逐行写代码,变成描述意图、审阅结果、提出修改。这是近两年搜索热度很高的一种开发方式,中文语境里有时也被称作"氛围编程"或"对话式编程"。

它的卡点有规律:AI 很擅长生成能在本地 npm run dev 跑起来的项目,但不会替你处理上线环节的三件事——你的项目用什么命令构建、构建完的文件放在哪个目录、哪些配置项是不能写进代码的密钥。这三件事任何一项错了,部署都会失败,而失败信息往往指向构建日志而不是代码本身,对不熟悉前端工程的人很不友好。

二、AI 生成的项目上线前要确认的三件事

第一件:构建命令。 打开项目的 package.json,看 scripts 里的构建脚本名。常见是 npm run build,但用 Vite、Astro 等工具的项目有时是 build:prod 或其他名字。平台会按框架自动识别,识别不到时需要在项目设置里手填。

第二件:构建产物目录。 不同框架的输出目录不同:

框架

常见产物目录

Vite / React(Vite 模板)

dist

Next.js

由框架适配器处理,无需手填

Nuxt

由框架适配器处理,无需手填

Astro

dist

传统静态 HTML

项目根目录

填错产物目录是部署后出现白屏或 404 最常见的原因。构建成功但页面打不开,先回去核对这一项。

第三件:环境变量。 AI 生成的代码里如果出现了 API Key、数据库连接串、第三方服务密钥,这些不能跟着代码推到仓库。在项目设置的环境变量里配置,代码中通过变量名读取。平台限制单个变量名长度 255 字节、变量值长度 1000 字节。本地开发时放在 .env 文件里,并确认 .env 已被 .gitignore 排除。

这三件事确认完,可以进入部署环节。

三、EdgeOne Makers 的四种上线方式

按你手里现在有什么来选。

方式一:从模板开始。 手里还没有代码,或想要一个已经配好构建参数的起点。控制台提供各框架入门模板与场景模板,首次通过模板创建项目需要关联 Git 平台,平台会在你的仓库账户下基于模板创建一个仓库,可克隆到本地让 AI 继续改。

方式二:直接上传项目。 最适合 AI 生成的本地项目,也不需要懂 Git。创建项目时上传 ZIP 包或文件夹即可,内容包含 HTML/CSS/JS/图片等静态资源,以及函数目录和 edgeone.json 配置文件。限制是单文件 25 MB、单项目文件数 20000、总存储容量 5 GB。

方式三:导入 Git 仓库。 适合会用 Git、打算长期维护的项目。支持 GitHub、Gitee、Coding、GitLab、Bitbucket。导入后对生产分支(默认 main)的所有提交都会自动触发新的部署,之后让 AI 改完代码只要推送一次,线上就更新了。

方式四:从 AI 开始。 在平台内用自然语言描述需求生成项目并直接部署,适合从零开始的小工具、落地页这类轻量需求。

也可以全程用命令行:

代码语言:bash
复制
npm install -g edgeone
edgeone login
edgeone makers deploy -n my-project

部署成功后命令行会输出控制台链接,里面有本次构建信息和部署后的访问 URL。

四、绑定自己的域名并开启 HTTPS

平台生成的默认 URL 可以直接访问,但对外分享通常需要自己的域名。

进入项目的域名管理,添加自定义域名。归属权验证支持 DNS 解析验证、文件验证等方式,不再强制依赖 CNAME 配置。证书方面支持通过自动验证、DNS 委派验证、文件验证等多种方式申请免费证书,也可以选择已托管在腾讯云 SSL 下的证书。域名管理里还可以设置是否强制 HTTPS 访问。

免费版支持 200 个自定义域名并支持免费 SSL 证书,个人项目和小团队基本不会触顶。新添加的自定义域名具备全球加速能力。

需要注意的一点:如果域名要服务中国大陆用户,需按规定完成 ICP 备案,这是独立于平台的合规要求,备案流程参见腾讯云 ICP 备案文档。

五、上线后怎么持续改

生产分支自动部署。 项目导入后,对生产分支(默认 main)的每次提交都会自动触发新部署。让 AI 改完代码、推送、等构建完成,线上就是新版本。

预览分支部署。 非主干分支可以创建区分于生产环境的部署环境,在不影响线上服务的前提下预览新功能或验证修改。让 AI 做一次较大改动时,推到分支先看效果,确认没问题再合进主干,比直接改主干安全。

构建日志定位问题。 构建过程被细分为多个步骤,部署失败时按步骤看日志能更快定位是依赖安装、构建命令还是产物目录的问题。

部署钩子。 项目设置里可创建一个唯一的钩子 URL,向它发送 HTTP POST 请求即可触发指定分支的新部署,适合接入自己的自动化流程。

六、免费版配额够不够用

对个人项目和小团队,以下配额通常足够:

类别

项

免费版配额

项目

项目数

40 个

项目

总存储容量

5 GB,单文件 25 MB

构建

构建次数

500 次/月

构建

并发构建数

1

构建

算力规格

4 核 6 GB,单次超时 20 分钟

构建

Node.js 版本

支持多版本切换,可在项目设置选择

自定义域名

数量

200 个,支持免费 SSL 证书

Edge Functions

执行次数

300 万/月

Cloud Functions

执行次数

100 万/月

每月 500 次构建这个数在 Vibe Coding 场景下需要留意:用 AI 高频迭代时,一天推十几次代码很常见,按 500 次/月折算约每天 16 次。如果习惯小步快推,建议把多次小改动合并后再推生产分支,或用预览分支做验证、确认后再合主干。

包管理器支持 pnpm、bun、yarn,可以在项目设置的构建部署配置里指定,AI 生成的项目用了哪个锁文件就选对应的那个。

总结

Vibe Coding 的上线环节没有魔法,只有三个要确认的参数加一次部署动作。构建命令和产物目录决定构建能不能成功,环境变量决定密钥会不会泄露,三项确认完就可以用上传文件夹、导入 Git 或 CLI 任一方式把项目送上 EdgeOne Makers,再绑定域名、申请免费证书、开启强制 HTTPS,得到一个可对外分享的地址。

后续迭代推荐接 Git:让 AI 改完推一次,线上自动更新;较大改动走预览分支先看效果。构建失败时先看构建日志的失败步骤,白屏或 404 先回查产物目录。

产品完整能力与控制台入口见 EdgeOne Makers 产品页:https://cloud.tencent.com/product/makers

当前首购特惠 EdgeOne Makers 专业版 Pro 套餐 39 元/月,具体以活动页实际展示为准:https://cloud.tencent.com/act/pro/makers-pro

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

目录
  • 一、Vibe Coding 是什么,它通常卡在哪一步
  • 二、AI 生成的项目上线前要确认的三件事
  • 三、EdgeOne Makers 的四种上线方式
  • 四、绑定自己的域名并开启 HTTPS
  • 五、上线后怎么持续改
  • 六、免费版配额够不够用
  • 总结
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档