部署 nextjs、nuxt vue 到 Cloudflare Page 遇到的坑爹问题,时间和金钱都浪费了

122 天前
 meigesir

大家可能会说,时间和金钱都浪费了,这么大成本,为什么不在 vps 或者 Dokploy 上部署。

其实是 Cloudflare 这个菩萨太香了,几乎 0 成本服务器费用,尤其我们要多做项目,这样从成功率更容易成功,所以成本对我们很重要。万一哪个项目火了,我们可以再去宠幸那个项目。

最近使用 Cloudflare Page 部署项目,遇到部署问题,代价很大。交的学费就是,白白浪费 1 天或几天的时间,到最后还是解决不了这个部署问题,真的很抓狂。接下来我会告诉下唯一的、反直觉、速效的方案。

其实方案很简单,就是项目做一些改动,尤其大的,要 Cloudflare page 部署一次,如果是线上产品,那就直接非主分支部署,这样只会部署到 preview 分支,不会影响到线上的业务。

这样如果遇到部署的问题,解决当下的改动或最近的小改动就行了。

不这样做的代价可能就是以半天的时间为单位浪费,可能还解决不了问题,你说抓不抓狂。而我遇到了两次这样的大问题,这一次更是浪费是时间和钱财,我会告诉你具体的情况。

我这次是等项目完成之后,想一步 deploy 到 Cloudflare 成功,结果处理了一天都没解决。各种问 AI ,结果 3 分钟,加上 cursor 刚更新,新的调用计费政策,cursor o3 就耗光了一个月的额度,损失几十刀。时间和金钱都浪费了。

下面两张图是 cursor 的 o3 调用和扣费,当时就把 o3 model 禁了,用不起用不起。

最后我只能沿着 git 提交记录排查,结果最近一次成功部署在 35 次提交之前,很绝望。直接原因是引入了 shadcn-nuxt 这个库,非官方库,某种原因就是部署不了。

那只能从那个 git 提交点开始改动了,这是最笨又快速方法。毕竟这么多提交记录,变量太大了,AI 也懵逼了,我浪费了时间和 AI 费用,结果问题还是没有解决。

我上次遇到类似的问题,是部署 nextjs 项目到 Cloudflare page ,哎,结果这次是 nuxt vue 项目,我以为不一样,结果一样折磨我一天时间,最后只能回到之前的 git 提交点,一步一步几十个提交记录,再手工去搬运。

这是我遇到的 Cloudflare 的两次部署问题,耗费了大量代价:时间和金钱成本,总结出的解决方案,希望可以帮到大家避坑,谢谢~

也分享记录在了 X: https://x.com/meigesir/status/1923186773833707947

4984 次点击
所在节点    iDev
60 条回复
meigesir
122 天前
@MacsedProtoss 谢谢分享,你说的也是一个路子,我这次踩坑是 nuxt 项目部署到 Cloudflare Page ,是直接 Github 仓库 push 分支触发的。会少很多链路,他们官方的方案:wrangler cli 、拖拉文件夹、<b>连 Github 仓库</b>。
meigesir
122 天前
@Hyxiao 是的,所以第一时间在 cursor 中把这个 o3 model 禁用了,不干活,一直消耗,感觉解决问题的时候慎用
meigesir
122 天前
@jworg 感谢解答。不过报的错不是这一个,因为很多时候做一些新项目,无关框架的,比如这次用的是一个开源的是 vue ,所以 AI 就用 nuxt 框架了,想着 UI 好看一些,集成 shadcn ui ,结果集成的时候,问题出现在了 shadcn-nuxt 上面。毕竟现在只是部署在 cf page ,几乎 0 成本服务器费用。的确我表达不好,不好意思,我语文不好,高考语文 89 分。。。
meigesir
122 天前
@ratazzi 嗯,所以,部署到 Cloudflare page 的坑,自己总结一下,防止未来继续踩。
meigesir
122 天前
@Track13 应该还有其他方案的,比如要用到 Cloudflare function 做 API
meigesir
122 天前
@beyondstars 是的,因为我现在花费大量时间和 AI 调用成本还解决不了,只能最原始的方式,回到 35 次提交之前,去掉 shadcn UI 相关,然后用手写后边的 35 个 commit ,基本上应该是 copy paste ,省一些时间
meigesir
122 天前
@BadFox 确实,不好意思,几年后第一次在 V2EX 上写帖子了,确实表达能力也不好,抱歉(。・_・。)ノ I’m sorry~
meigesir
122 天前
@flydogs 现在时间成本太高了,一天时间很奢侈的,除非现在还是学生😅
meigesir
122 天前
@murmur 之前价格我也是知道的,昨天他们 cursor 刚更新,搞了个 max ,然后那个问题 AI 也没办法,读取、分析循环,一次 6 credit 左右,一下子搞懵逼了
meigesir
122 天前
@bugoftime 是的,build 报错,copy log ,丢给 AI ,结果问题没解决,一个月额度没了。。。
meigesir
122 天前
@N0vermber11 好吧,我也是第一次遇到这种情况,cursor 都用了一年了。。。
meigesir
122 天前
@ooxiaoming 可能前端框架 nuxt 不是很熟悉吧,加上社区的 shadcn-nuxt 集成后,在 Cloudflare page 部署上有问题,然后整个都炸锅了。。。
meigesir
122 天前
@HanMu 确实,谢谢提醒,我从小语文就不好,高考也没及格,以后多多注意下语言组织能力~
meigesir
122 天前
@esee 抱歉,我只是记录下 Cloudflare 部署踩坑了,不好意思,表达的不是很清晰...
meigesir
122 天前
@jojobo 嗯,确实,我现在也是贪图 Cloudflare 的免费服务
meigesir
122 天前
@dilidilid 嗯,有道理,谢谢提醒👍🏻
meigesir
122 天前
@sdrpsps 谢谢分享。我之前的 nextjs 项目用的是 idoubi 的 shipany cf 分支部署的。确实写新页面要加 `export const runtime = 'edge';` ,worker 也能部署页面吗?我以为只能部署 API 到上面。build 也是一个方法,但是有时候能 build ,deploy 不行。

这次的 nuxtjs 项目,我现在准备解决 shadcn 之后,然后手动 copy paste 。
ooxiaoming
122 天前
@meigesir 小问题,都是一步步踩坑过来的,踩多了自然就懂的多了
meigesir
122 天前
@goldeye0351 嗯,我之前的 nextjs 也是可以的。这次的 nuxt ,关于 shadcn 有个中间件库 shadcn-nuxt ,不是官方库,所以栽在这上面了。react 还是老牌,各方面资源都是官方库直接支持,少了一些坑吧。
meigesir
122 天前
@ooxiaoming 嗯,谢谢。以前都是后端、iOS 做得多,这突然 web nuxt 、nextjs ,整懵了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1132129

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX