Vibe Coding 部署框架指南：Cloudflare + Vercel + 域名 全网可访问

Vibe Coding 部署框架指南：Cloudflare + Vercel + 域名 全网可访问 Vibe Coding 部署框架指南：Cloudflare + Vercel + 域名 全网可访问 Modified October 29, 2025 听着有点复杂，其实实操起来抓住核心就行， 核心就是输入域名，得到2个ns，然后将ns替换更新阿里云默认的dns服务器即可；这一步目的是将dns解析放到cloudflare上 ，Cloudflare 页面会显示active即解析成功； 第三步：vercel配置自定义域名 进入vercel，进入你的项目 → Settings → Domains → 点击「Add Domain」，填写你申请的根域名比如 noisepoint.cn 和子域名比如mosaic.noisepoint.cn即可，这里我已经填好了 这一步的目的是将vercel默认生成的域名替换成你申请的个性化域名； 第四步： Cloudflare DNS 面板添加记录 登录 Cloudflare → 选择 你的域名比如这里为 noisepoint.cn → 进入「DNS」页面，依次添加根域名和子域名的配置 根域名： • Type：CNAME • Name： @ • Target / Content： cname.vercel dns.com • Pro xy status： 橙色云 开启 • 保存 子域名： • Type：CNAME • Name：mosaic（可以根据你的实际情况更改） • Target： cname.vercel dns.com • Proxy stat us： 橙色云 开启 • 保存 为了方便用户习惯，还可以加一个www的 • Type：CNAME • Name： www • Target： cname.vercel dns.com • Proxy statu s： 橙色云 开启 • 保存 这里简单介绍下type中有2个核心类型： A记录：作用是把域名指向一个固定的 IP 地址，后面的content直接跟固定的ip地址，比如76.76.21. CNAME记录：作用是把域名指向另一个域名，后面的content跟的是域名，比如cname.vercel dns.com 这样就配置好了，这一步的核心目的是利用cloudflare cdn来优化网络路径，提升访问稳定性， 我们的请求会先到cloudflare，再由cloudflare去拿vercel的内容返回给用户。 上面4步完成后就成功的做完了整个配置，回到vercel 的Domains 页面，等待 Vercel 自动检测 DNS 记录并完成验证就可以了，可能会需要几分钟； 为了访问速度更快，可以进行Cloudflare SSL 优化设置： 1. Cloudflare → SSL/TLS → Mode 选择 Full （Full 模式），不要选 Flexible。 2. 开启： a. Always Use HTTPS → ON b. Automatic HTTPS Rewrites → ON 至此， 部署就完成了，域名也改好了，全网所有环境访问也稳定且快速了，核心逻辑是利用了cloudflare做dns解析和cdn优化网络路径 ； 总结下就是申请自定义域名+vercel部署托管替换域名+cloudflare解析及cdn稳定访问 。 以上就是本篇的核心内容，包括vercel自动部署、访问不稳定原因、自定义域名配置、以及最重要的怎么通过cloudflare的形式去解决不稳定问题； 建议大家看完文章后一定要去实操下， 理解这个逻辑后可以举一反三，其他的工具再遇到这类问题时都可以通过这种方式解决。 如果觉得本篇分享对你有帮助，欢迎点赞、转发、评论； 对AI产品工具、vibe coding、AIGC内容感兴趣的内容也欢迎关注，期待交流，感谢！ noisepoint.cn mosaic.noisepoint.cn noisepoint.cn cname.vercel dns.com cname.vercel dns.com cname.vercel dns.com cname.vercel dns.com 听着有点复杂，其实实操起来抓住核心就行， 核心就是输入域名，得到2个ns，然后将ns替换更新阿里云默认的dns服务器即可；这一步目的是将dns解析放到cloudflare上 ，Cloudflare 页面会显示active即解析成功； 第三步：vercel配置自定义域名 进入vercel，进入你的项目 → Settings → Domains → 点击「Add Domain」，填写你申请的根域名比如 noisepoint.cn 和子域名比如mosaic.noisepoint.cn即可，这里我已经填好了 noisepoint.cn mosaic.noisepoint.cn 这一步的目的是将vercel默认生成的域名替换成你申请的个性化域名； 第四步： Cloudflare DNS 面板添加记录 登录 Cloudflare → 选择 你的域名比如这里为 noisepoint.cn → 进入「DNS」页面，依次添加根域名和子域名的配置 noisepoint.cn 根域名： • Type：CNAME • Name： @ • Target / Content： cname.vercel dns.com cname.vercel dns.com • Pro xy status： 橙色云 开启 • 保存 子域名： • Type：CNAME • Name：mosaic（可以根据你的实际情况更改） • Target： cname.vercel dns.com cname.vercel dns.com • Proxy stat us： 橙色云 开启 • 保存 为了方便用户习惯，还可以加一个www的 • Type：CNAME • Name： www • Target： cname.vercel dns.com cname.vercel dns.com • Proxy statu s： 橙色云 开启 • 保存 这里简单介绍下type中有2个核心类型： A记录：作用是把域名指向一个固定的 IP 地址，后面的content直接跟固定的ip地址，比如76.76.21. CNAME记录：作用是把域名指向另一个域名，后面的content跟的是域名，比如cname.vercel dns.com cname.vercel dns.com 这样就配置好了，这一步的核心目的是利用cloudflare cdn来优化网络路径，提升访问稳定性， 我们的请求会先到cloudflare，再由cloudflare去拿vercel的内容返回给用户。 上面4步完成后就成功的做完了整个配置，回到vercel 的Domains 页面，等待 Vercel 自动检测 DNS 记录并完成验证就可以了，可能会需要几分钟； 为了访问速度更快，可以进行Cloudflare SSL 优化设置： 1. Cloudflare → SSL/TLS → Mode 选择 Full （Full 模式），不要选 Flexible。 2. 开启： a. Always Use HTTPS → ON b. Automatic HTTPS Rewrites → ON a. Always Use HTTPS → ON b. Automatic HTTPS Rewrites → ON 至此， 部署就完成了，域名也改好了，全网所有环境访问也稳定且快速了，核心逻辑是利用了cloudflare做dns解析和cdn优化网络路径 ； 总结下就是申请自定义域名+vercel部署托管替换域名+cloudflare解析及cdn稳定访问 。 以上就是本篇的核心内容，包括vercel自动部署、访问不稳定原因、自定义域名配置、以及最重要的怎么通过cloudflare的形式去解决不稳定问题； 建议大家看完文章后一定要去实操下， 理解这个逻辑后可以举一反三，其他的工具再遇到这类问题时都可以通过这种方式解决。 如果觉得本篇分享对你有帮助，欢迎点赞、转发、评论； 对AI产品工具、vibe coding、AIGC内容感兴趣的内容也欢迎关注，期待交流，感谢！ 🔗 原文链接： https://mp.weixin.qq.com/s/pBkBSqYm... https://mp.weixin.qq.com/s/pBkBSqYm... 原创 噪点noisepoint 噪点noisepoint2025年10月28日 08:01 上海 大家好，我是噪点 上篇分享了vibe coding图片马赛克工具的实操流程 一次完整的 Vibe Coding 实践记录：需求、过程、复盘 ，其中遇到一个问题，就是在开发完 并在vercel部署上线后，发现部分地区访问速度较慢和不稳定，其他访问都正常；这几天我仔细研究了下原因，并找到了解决方案。 一次完整的 Vibe Coding 实践记录：需求、过程、复盘 所以今天就分享下vibe coding中讨论相对不多但至关重要，直接关系到别人能否正常使用你产品的环节——【部署】 ；这应该也是很多人自己vibe coding后部署的痛点，要么部署后访问不稳定，要么部署流程繁琐，耗时长； 还是拿这个马赛克小工具来举例，核心包括“上线部署”、“访问不稳定原因”、“解决方案及原理” 3部分，中间也会包括自定义域名配置； 本教程操作除域名外完全实现0成本部署。 vercel部署 因为我开发的这个工具是一个静态页面，所以可以直接用vercel进行托管，也就是这种静态页面直接推到vercle上就可以实现部署，生成正式的公开访问地址；步骤如下： 在AI开发完代码后，首先将代码推送到github仓库； 然后打开vercle（https://vercel.com/ ），点击→ Add New→ Project → Import Git Repository → 选刚才你推送的github仓库，如果没关联github需要先关联账号（直接点页面的install按钮即可），然后github仓库就会自动同步过来； 然后找到你要部署的项目仓库，点击import，即可进入配置页面，依次按如下配置： • Framework Preset: Vite • Build Command: npm run build • Output Directory: dist • Install Command: 保留默认 这些配置内容 通常 都会被自动识别，我们只需确认下就行，然后点击下方的deploy按钮就开始部署了，几分钟后就部署成功了； 可以进入项目详情查看部署状态，如果显示状态：绿色圆点 + "Ready" 表示部署成功，并且在domains处会有个类似 https://xxxxx.vercel.app的链接，这就是部署成功后的正式链接，因为我这里已经换成我自定义的域名了，所以显示了其他地址样式； 上面就是开发完后 部署到vercel的完整步骤，核心就是代码推送到github——vercel导入github仓库——页面配置（一般自动识别）——deploy提交 ——状态确认；至此就部署成功了，并到了一个域名网址； 访问不稳定原因 理论上，我们在拿到上面的域名地址后就结束了；但会发现，如果你在国内访问会不稳定，这是因为vercel在国外，访问速度可能受网络环境影响，并不是配置出了问题； 那为什么会出现访问不稳定问题呢？核心原因是2个： dns解析问题和网络路径访问问题； 先说dns解析问题，用大白话说就是DNS（Domain Name System）就像互联网的“电话本”。 当你访问你的网址时比如mosaic.cn 时，电脑其实要先去问：“这个域名对应的服务器 IP 是多少？” mosaic.cn DNS 的作用就是告诉你：“ mosaic.cn → IP地址是 76.76.21.xxx 。” mosaic.cn 如果 DNS 返回了错误的 IP 地址，网站就可能无法正常访问。 那是不是dns解析正确，返回了正常的ip地址，网址就一定能打开呢？也不是，因为这里面还涉及到网络路径的优化；例如Vercel的服务器在海外时，国内访问可能速度慢或不稳定； 一句话通俗解释下就是dns决定“告诉你去哪”，网络路径决定“能否顺利到达” 所以我们只需解决这2个环节，就能彻底访问问题。 解决方案 我这边尝试后用的解决方案是vercel+cloudflare的形式，关键就在于cloudflare直接或间接解决了dns和网络路径问题。 先简单介绍下cloudflare： cloudflare是 DNS + CDN 一体化平台；它既可以直接接管dns，提供正确的ip解析结果；又能通过 CDN 提升访问稳定性与速度。我们的请求会先到cloudflare，再由cloudflare去拿vercel的内容返回给用户；并且还可以通过cdn的形式来解决时效性，提示访问速度； cdn是 Content Delivery Network （ 内容分发网络 ），同样大白话解释，比如我网站部署在海外，我在上海，如果去访问就会请求非常远，会很慢；而cdn就是提前在全球放了很多缓存仓库，用户在访问时，就从就近的仓库取数据，不用每次都到海外，而cloudflare就是有很多这些“缓存仓库”，所以访问速度就会快很多 介绍完解决原理后直接看下具体操作步骤（顺便配置了自定义域名）： 第一步：域名申请 我在阿里云申请了一个自定义域名noisepoint.cn，也可以用其他平台如腾讯云等，进入平台找自己想要的域名申请购买即可，这个没什么特殊要讲的； noisepoint.cn 另外我想要采用主域名+子域名的形式； 这里的noisepoint就是主域名，子域名就是在前面加一些特殊词，比如这个图片马赛克工具我可以用mosaic.noisepoint.cn, 后面如果我再做一个工具可以用xx2.noisepoint.cn 等，能保持一致性，当然具体要不要子域名都可以，纯粹看个人习惯，这里只讲步骤； mosaic.noisepoint.cn xx2.noisepoint.cn 第二步：cloudflare进行dns解析 进入cloudflare（ https://dash.cloudflare.com/ ） 注册登录，点击右上角Add ，选择connect a domain→ 输入你申请的域名，比如这里我输入的 noisepoint.cn → Continue，其他默认，选择free免费计划即可； noisepoint.cn cloudflare就会扫描当前 DNS 记录，然后会给出2个 Nameserver （ NS ） ，类似： ns1.cloudflare.com ；ns2.cloudflare.com； ns1.cloudflare.com ns2.cloudflare.com 然后把2个ns在阿里云的域名管理dns修改板块替换阿里云默认的dns即可；