nanobananaedit.com 复盘：AI SaaS 从0到1的实战与踩坑

在我的开篇宣言里，我立下了“独立开发 + SEO”的路径。

上一篇文章，我复盘了为什么 SEO 是我的薄弱环节。而这篇文章，我想复盘一下我在 nanobananaedit.com 这个项目中，是如何实践“独立开发”这一环的。

这篇文章是一个纯粹的“技术复盘”和“流程日志”，记录了我如何从0到1跑通一个AI SaaS出海的全流程，其中充满了真实的踩坑与思考。

一、项目启动：为什么是 NanoBanana？

项目启动的契机很简单：Google 新出的 Nano Banana 模型热度很高，感觉是个不错的练手机会，而且能快速验证一下出海流程。

我的主要目的不是变现，而是跑通网站出海全流程，练练手。于是我决定做个图片生成网站，借助 Nano Banana 的 API 实现 AI 图像增强功能。

二、需求与关键词

• 真实需求： 趁着热点，做一个网站。
• 关键词： NanoBanana
• 变现（次要）： 计划通过 Google 广告 和 用户订阅 两种形式。

三、基础构建：域名、DNS 与托管

这是独立开发“出海”的第一步：让你的网站被全世界访问。这需要三个核心服务商的配合。

1. 域名 (Namecheap)

• 选名： 咨询 ChatGPT，结合意图，选择了 nanobananaedit.com。
• 购买： 2025年8月27日，在 Namecheap 上完成购买。（决定做的当天就购买了域名，当时还是有点小激动，感觉新篇章要开始了）。

2. DNS (Cloudflare)

• 选择： 考虑到后面的图片存储要用 Cloudflare 的 R2，从系统整合（秩序）的角度出发，我决定将 DNS 服务也一并交给 Cloudflare。
• 操作： 在 Cloudflare 添加 nanobananaedit.com，选择免费计划。Cloudflare 会给你两个“名称服务器地址”。
• 修改： 回到 Namecheap 的域名管理后台，将DNS服务器地址修改为 Cloudflare 提供的这两个地址。

3. 托管 (Vercel)

• 选择： Vercel 是前端（Next.js）开发者的首选，部署体验极佳，能让我专注于开发本身（自驱）。

4. 三者关系 (划重点)

这三者的关系是新手最容易混淆的：

• Namecheap (域名注册商): 你在这里买下了 nanobananaedit.com 这块“地”。
• Cloudflare (DNS服务商 + CDN): 它是这块“地”的“导航系统”。你告诉 Namecheap：“所有找我的人，都去问 Cloudflare”。它还提供了CDN加速（免费）。
• Vercel (应用托管平台): 这是你“地”上盖的“房子”（你的网站程序）。

最终的访问流程是： 用户 -> Cloudflare (CDN/导航) -> Vercel (你的房子) -> 返回内容

四、开发与部署

1. 技术选型

• 模板： 使用了 ShipAny 的模版 (v2.6.0)，它内置了 Creem 支付，非常方便。
• 改造： 使用 Cursor (AI编程) 打开项目，参考 ShipAny 的文档，快速改造为我需要的 nano-banana-edit。

2. 代码托管 (Github)

• 在 Github 创建了一个私有仓库 nano-banana-edit。
• 踩坑1：Git 邮箱不一致
  • 我本地 Git 全局邮箱是A (zengfeiyang@...)，而 Github 注册邮箱是B (zenvelhq@...)。
  • 后果： git push 会失败。
  • 解决： 只需要在项目目录设置当前项目的git邮箱即可：
  • git config user.email '[email protected]' （这个小细节提醒我们，工具的配置也需要“秩序”）

3. Vercel 部署

• 在 Vercel 创建新项目，导入 nano-banana-edit 这个 Github 仓库。
• Vercel 自动部署，生成一个 .vercel.app 的临时域名。
• 配置自定义域名：
  1. 在 Vercel 项目的 Domains 设置中，输入 nanobananaedit.com。
  2. Vercel 会给你2条DNS记录（1个CNAME，1个A记录）。
  3. 回到 Cloudflare 的 DNS 管理后台，照着 Vercel 给的提示，添加这2条记录。
  4. 回到 Vercel，等待几分钟，Vercel 检测到 DNS 记录生效，自动配置好 SSL 证书。
  5. 此时，https://www.nanobananaedit.com 就可以访问了。看着自己的网站在全球节点上运行，那种‘创造’的感觉还是很强烈的。

五、登录注册

• 初期方案: 注册和登录功能，初期直接用了 ShipAny 模板自带的 Google 和 Github OAuth 登录，简单快捷，符合 MVP 原则。
• 补充方案: 但考虑到并非所有用户都有或愿意使用这两个平台，后面我补充了邮箱登录功能，使用了 Resend (https://resend.com) 作为邮件发送服务。
• 未来思考: 未来或许可以考虑统一整合到 Supabase，因为它能比较好地支持邮箱（包括找回密码）、Google、Github 等多种登录方式，管理起来更方便，也更符合**系统化（秩序）**的思路。

六、配置核心功能 (R2 存储与 Creem 支付)

一个SaaS应用，“存储”和“支付”往往是少不了的标配。

1. 云存储：Cloudflare R2

ShipAny 模板支持 AWS S3，而 R2 与 S3 API 兼容，且性价比极高（主要是出站流量几乎免费），基于成本和性能的理性考量，果断选择 R2。

• 步骤：
  1. 在 Cloudflare 后台开通 R2。
  2. 创建一个“桶” (Bucket)，比如 nanobananaedit-images，用来存用户上传的图片。
  3. 创建 R2 API 密钥（Access Key 和 Secret Key）。
  4. 在 nanobananaedit.com 项目的 .env 环境变量中，填入 R2 的 ENDPOINT (账户ID)、ACCESS_KEY、SECRET_KEY 和 BUCKET 名称。
• 踩坑2：R2 自定义域名与 Vercel 根域名的冲突 (最关键的坑!)
  • 我在配置 R2 时，R2 允许你绑定一个“自定义域名”来访问桶内资源。
  • 我错误地将这个自定义域直接绑定成了 nanobananaedit.com（根域）。
  • 后果： Cloudflare 蒙了。Vercel 也想占用这个根域，R2 也想占用。一个主机名不能同时指向两个地方。
  • 现象： Vercel 后台一直报 Invalid Configuration (无效配置) 错误。
  • 解决： R2 的自定义域名绝对不要绑定根域。我解绑了 nanobananaedit.com，转而绑定了一个子域名，如 images.nanobananaedit.com。冲突解除，Vercel 恢复正常。
  • 反思: 这个坑踩得有点深，但也让我彻底搞懂了根域名和子域名在不同服务商之间的解析逻辑。搞清楚规则（秩序）才能避免冲突，算是宝贵的‘学费’。

2. 支付：Creem

Stripe 支付受限太多，我转而接入了 Creem 支付。

• 步骤： 接入 Creem 的过程，最重要的是“耐心”和“沟通”。

• 踩坑3：Creem 审核被驳回

  1. 初审被拒： 接入生产环境后，我提交了提现审核，被驳回了。
  2. 原因： “落地页有些链接无效，应该删除”（比如模板自带的、我还没来得及配置的 Twitter 等社交链接）。
  3. 解决： 我立刻删除了所有无效的占位符链接，并发邮件给 [email protected] 说明情况。
  4. 结果： 当天就通过了审核，非常高效。和平台有效沟通（理性）确实能解决很多问题。

• 踩坑4：生产支付失败

  • 审核通过后，我测试生产环境支付，依然失败。
  • 原因： 我在 Vercel 的生产环境“环境变量”里，填错了 CREEM_ 相关的配置。
  • 解决： 仔细检查，修正环境变量，重新部署。支付成功。这种因为粗心导致的低级错误，真是对‘秩序’和‘细心’最好的提醒。

七、收尾：提交 Google

万事俱备，最后一步就是让 Google 知道我的存在。

• 登录 Google Search Console (谷歌站长平台)。
• 提交 nanobananaedit.com 的站点地图 (sitemap)。
• 过一段时间后，网站被谷歌成功收录。

总结

nanobananaedit.com 这个项目，虽然最终因为“流量”问题被我“暂停”了（详见上一篇文章），但它作为“练手”项目，100% 达成了它的使命。

我成功地（并踩坑地）跑通了独立开发、SaaS出海、域名、CDN、Serverless部署、R2存储、海外支付的完整流程。

这个“体力”验证，为我后续的“超级个体”实验打下了坚实的基础。