深入解析 Coderblock 的 Fly.io 即时预览架构

一个真正实用的开发预览，不应只是展示应用可能呈现的样子。它应该让你在构建过程中实际使用应用：浏览不同页面、创建账户、保存数据、上传文件、处理付款，以及测试后端逻辑。

这正是 Coderblock 即时预览所能做到的。

描述你想要的应用，或从现有模板开始创建后，项目便会获得一个专属访问地址。借助热重载，之后的每项更改都会在数秒内出现在预览中。

从用户角度来看，整个过程非常简单：描述一项功能，然后看着它逐步成形。然而在这种简单体验背后，是一套协调前端代码、后端服务、身份验证、数据库、存储、密钥和预览部署的架构。

聊天就是控制界面

在 Coderblock 中，聊天是整个开发流程的入口。 你不必先配置基础设施、代码仓库，或彼此独立的前后端服务。只需用自然语言描述你想构建的产品，智能体就会把你的想法变成可运行的应用。

例如：

• “为健身中心构建一个预约平台。”
• “添加登录功能，并且只允许会员查看自己的预约。”
• “创建一个包含预约表格的管理界面。”
• “让客户每月支付 9.99 欧元。”
• “在移动端固定导航栏。”

因此，一条需求就可能引发技术栈多个层面的更改。 生成的前端使用 React、Vite、TypeScript 和 Tailwind CSS。对于标准 Web 应用，后端运行在专属 Supabase 项目上，并使用 Postgres、Supabase Auth、Storage 和 Deno Edge Functions。

这意味着，预览并不只是提示词的视觉化呈现，它是一个真正的全栈应用。 表单可以向 Postgres 写入数据，受保护的页面可以使用已登录用户的会话，上传功能可以将文件保存到 Storage，后端逻辑则可以通过 Edge Functions 运行。

对于 Enterprise Web Platform 项目，Coderblock 会改用 Python 和 FastAPI 后端，并搭配 Neon Postgres。其原则保持不变：描述你想要的行为，让智能体完成实现，然后立即在预览中验证结果。

---

从需求到预览：通过热重载即时更新

整个开发周期可以概括为五个步骤。

1. 描述你想构建的内容

需求可能只是一个界面细节，也可能是一项横跨整个系统的功能。 “更改按钮颜色”主要属于视觉调整。 “添加带有私有工作区的团队账户”则完全不同：它可能需要同时修改界面、身份验证、数据库、权限和应用逻辑。

使用 Coderblock 时，你不必把需求拆解成路由、迁移、会话处理程序和访问策略清单。只需描述你想要的结果，智能体会处理实现目标所需的细节。

2. 端到端更新应用

当功能需要时，AI 会在应用的不同层之间进行协同修改。

如果需要持久化数据，它可以设计并执行相应的 Postgres 数据库架构迁移。如果需要身份验证，它可以将界面连接到 Supabase Auth，并根据当前用户应用行级安全策略（Row Level Security）。

每个应用还会包含一个 profiles 表以及基础的角色管理结构。这为智能体提供了一套统一基础，使其能够构建个人仪表盘、私有区域和管理界面等功能，而不必每次都重新设计身份验证系统。

3. 后端始终是应用的一部分

只有当界面背后的一切都能持续运行时，快速预览才真正有价值。 因此，Coderblock 会让应用始终连接到数据库、身份验证、存储和后端函数。在 **Backend（后端）**标签页中，你可以查看项目的数据表、已认证用户、存储空间和可用函数。

这样做的优势在于，每次迭代都能建立在上一次迭代的基础之上。

添加数据表并不意味着创建临时模拟数据，而是真正改变应用的数据模型。之后的需求可以继续基于同一结构添加筛选器、仪表盘、数据关系或权限。

4. 预览实时更新

项目会部署到其专属预览地址 <app>.coderblock.dev。应用发生变化时，热重载会快速部署更新，并将其呈现在正在运行的环境中。

重点不仅在于速度，更在于整个流程的连续性。

你不必为每次迭代创建新的演示，也不需要在多个环境之间切换。你可以在聊天、预览和后端之间顺畅往返，同时始终围绕同一个应用工作。

Fly.io 预览层是部署流程的一部分，但整体体验非常直接：每个项目都有一个可访问的开发环境，更新能够快速部署，并且预览始终连接到应用的完整全栈服务。

在测试刚刚构建的内容之前，你无需配置预览服务器或部署流水线。

5. 测试、修复并继续迭代

这正是预览真正发挥价值的环节。 你可以浏览应用、检查响应式表现、创建账户、提交表单、验证权限，以及测试不同角色对应的行为。

如果某些功能没有按预期运行，你不必回到代码中研究应该修改哪里，只需描述下一项调整即可。

描述 → 生成 → 预览 → 测试 → 优化

这也解释了为什么 Coderblock 的速度优势并不只来自代码生成。整个开发过程始终处于同一套工作流中。

密钥不会写入代码

高效的开发环境绝不应以牺牲安全性为代价。

当某项集成需要密钥时，Coderblock 会通过专门的环境变量提示框进行处理。密钥值将保存在项目的服务端密钥存储中，不会被插入生成的代码或普通聊天内容。

Stripe 就是这种处理方式的典型例子。

在默认的托管模式下，智能体会收集国家和企业名称等必要信息，并为项目创建一个托管的 Stripe 账户。你无需直接管理 API 密钥，Coderblock 还会负责配置 webhook。

之后，你可以通过 Stripe 托管的引导链接完成付款设置和 KYC 身份验证。

在 BYOK 模式下，智能体会安全地请求 STRIPE_SECRET_KEY，将其保存在服务端，并自动配置 webhook。 无论采用哪种模式，Coderblock 都可以创建所需的 Stripe 产品和价格、配置结账流程，并将各个组件接入应用。在启用真实付款之前，你可以先进行测试。

预览与生产是两回事

预览用于构建和试验，生产用于正式发布。它们是两个不同的阶段，Coderblock 会始终将二者分开。

应用准备就绪后，你可以选择 Publish（发布），将其部署到 <app>.coderblock.app。其中包含 SSL，后续版本则可以通过快速热更新发布。

这样可以避免在聊天中进行的实验性修改自动变成生产版本。 你还可以前往 Settings → Domains（设置 → 域名），按照说明配置 DNS 记录并连接自定义域名。 你也可以直接通过 Coderblock 购买域名，此时 DNS 和 SSL 都会自动完成配置。

最终形成一条清晰的路径：

聊天 → 预览 → 测试 → 发布

聊天驱动开发，预览让你查看并测试结果，后端确保应用具备真正可用的功能，而发布则会让经过确认的版本正式上线。

为持续迭代而设计的架构

即时预览系统的真正价值，并不在于某个单独的基础设施组件，而在于整个系统能否跟上创作过程的节奏。 在 Coderblock 中，前端、数据库、身份验证、存储、函数、密钥和预览环境都属于同一套工作流。 你可以从一句话开始，获得一个可运行的全栈应用，立即进行测试，并继续通过对话修改它。

无需手动配置服务器。 无需不断切换不同工具。 无需把每次修改都变成一次新的部署。

基础设施基本保持隐形，让你可以专注于真正重要的事情：构建、测试与迭代。