背景信息

很多开发者在做全栈应用，尤其是 AI 应用时，真正耗时的地方往往不在业务代码本身。一个功能原型可能很快就能写出来：前端页面、登录注册、文件上传、数据库表、几段后端函数，再接一个大模型接口。但当它要从本地项目变成“别人能打开链接直接使用”的应用时，事情就会变复杂。

你需要准备数据库，执行建表脚本，配置行级权限，开通对象存储，部署后端函数，设置环境变量，再把前端打包上传。每一步都不算难，但串起来之后，部署流程很容易变成一次重复、繁琐、容易出错的基础设施工作。

火山引擎 Supabase 集成 Pages，实现一站式前端部署和运行，正是为了解决这段“最后一公里”而设计的。

它把前端托管和 Supabase 后端部署整合到同一条链路里。开发者只需要在本地准备好前端代码、数据库迁移文件和 Edge Functions，然后执行一条命令，就可以完成前端站点发布、后端工作区创建、数据库初始化、函数部署和环境变量注入，并获得一个可访问的线上预览地址。

本篇文章会用官方示例应用 Demo 「资料盒子」完整跑一遍 AI Pages 的部署流程。

产品定位——IGA Pages 能解决什么问题

传统全栈应用上线通常包含几类工作：

前端构建与托管

例如安装依赖、执行 build、上传静态资源、生成访问链接。

后端资源准备

包括数据库实例、认证服务、对象存储、实时推送、函数运行环境等。

数据库初始化

执行 migration，创建表结构、索引、权限策略、触发器等。

服务配置

配置前端需要使用的 API 地址、匿名访问密钥、函数地址等环境变量。

前后端联调

检查登录、上传、数据库读写、函数调用和权限隔离是否正常。

过去这些动作往往需要开发者在多个控制台和工具之间手动串联。现在，借助 byted-supabase-cli 的 pages fast create 命令，以及 Trae 中的 byted-supabase Skill，开发者可以把前端托管、Supabase 后端创建、数据库迁移、Edge Functions 部署和环境变量注入放到同一条部署链路中完成。执行部署后，这条链路会自动完成：

构建并托管前端静态站点；

创建新的火山引擎 Supabase 工作区；

等待后端服务就绪；

执行数据库迁移脚本；

创建或初始化 Storage Bucket；

配置 Realtime 相关发布；

部署 Edge Functions；

将前端项目与后端工作区绑定；

注入浏览器端所需的环境变量；

输出最终可访问的预览链接。

开发者不需要在多个控制台之间来回切换，也不需要手动复制项目 URL、匿名密钥或函数地址。

准备工作

开始之前，需要准备以下环境。

火山引擎账号

确保已经拥有可使用火山引擎 Supabase 的账号，并完成必要的登录授权。AI Pages 部署过程中会创建 Supabase 后端工作区，因此账号需要具备相应资源的创建权限。

安装 CLI

这条命令会同时：

全局安装 byted-supabase-cli。

安装配套的 byted-supabase agent skill。

检查安装是否成功。

登录账号

使用 CLI 登录火山引擎账号：

登录过程会根据当前环境打开授权页面或输出登录提示。按提示完成登录即可。

快速部署

方式一：通过 Trae + Skill 自然语言部署

如果已经安装好 byted-supabase-cli，就可以直接在 Trae 中用自然语言发起部署。

原因在于，byted-supabase-cli 不只提供命令行能力，也内置了配套的 Agent Skill。安装 CLI 后，Trae 这类支持 Skill 的 AI 编程工具可以识别并加载这套能力。此后，开发者不需要记住完整命令和参数，只要用自然语言描述目标，Agent 就可以根据 Skill 调用 CLI，完成项目检查、命令生成、部署执行和结果汇总。

这也是 AI Pages 更适合 Vibe Coding 场景的地方：部署不再依赖人工手动拼接命令，而是可以接在 AI 编程流程后继续完成。

例如，你可以直接告诉 Trae：

收到指令后，TRAE Agent 会基于 Skill 自动完成后续步骤。

示例应用：资料盒子

本次实践使用火山引擎 Supabase 官方 Demo「资料盒子」。

它是一个轻量的 AI 资料管理应用，包含以下功能：

文件上传、预览、下载和删除；

支持文本和图片资料管理；

文件上传后自动进入处理队列；

调用大模型生成标签和摘要；

基于资料标签进行问答；

虽然它是一个 Demo，但全栈能力比较完整，也就是说，这不是只发布一个静态页面，而是一次性部署一个包含真实后端能力的全栈应用。

可以直接点击预览链接进行查看也可以通过 Trae 打开预览链接查看各项功能是否正常

方式二：手动部署

获取代码

下载并解压官方「资料盒子」Demo 后，目录结构大致如下：

部署命令

进入 Demo 所在目录后，执行以下命令：

这条命令中的几个参数含义如下：

参数	说明
pages fast create my-filebox	创建一个名为 my-filebox 的 AI Pages 项目
--file-path	指定前端项目目录
--functions-init	指定 Edge Functions 初始化目录
--migrations-init	指定数据库迁移脚本目录
--framework-prefix NEXT_PUBLIC_	指定需要注入到前端的环境变量前缀，适用于 Next.js 浏览器端变量

从这段输出可以看到，AI Pages 并不是简单上传前端文件，而是依次完成了：

上传前端资源；

创建 Pages 项目；

创建 Supabase 工作区；

等待工作区进入 Running 状态；

解析默认数据库分支；

执行数据库迁移脚本；

部署 Edge Function；

将 Pages 项目绑定到 Supabase 工作区；

创建并完成 Pages 部署。

当终端输出 Fast create completed 时，说明前端站点、Supabase 后端、数据库迁移和 Edge Function 部署都已经完成。部署过程中，终端会打印出一些关键信息，例如：

预览访问

这些信息可以用于后续排查、查看项目或重新部署。

部署完成后，复制终端输出的预览链接preview_domain在浏览器中打开即可访问应用。

结果验证：确认全栈链路已跑通

为了确认部署不只是页面打开成功，还需要验证前端、数据库、存储、函数和 AI 调用是否全部正常。

登录应用

打开预览链接后，进入登录页。Demo 提供了默认测试账号入口，可以直接点击使用默认测试账户按钮创建并登录。

登录成功后，可以看到“我的资料”列表页面。

导入文件

进入设置页，点击一键导入预置资料。Demo 会自动导入一批 Markdown 和图片文件，用于后续测试。

导入完成后，返回我的资料列表，可以看到文件已经写入 Storage，并在数据库中生成对应的元数据记录。

等待 AI 自动打标签

文件导入后，会进入后台处理流程。Edge Functions 会负责触发文件处理逻辑，并通过 AI-Gateway 调用大模型，为资料生成标签和摘要。

这个过程完成后，资料列表中会出现自动生成的标签。

体验问答

进入“资料问答”页面，输入一个与导入资料相关的问题。系统会根据标签和资料内容进行检索，生成回答，并标注引用来源。

如果回答能够正常生成，并且来源文件可以被高亮展示，说明以下链路已经跑通：

前端可以访问后端；

用户认证正常；

数据库读写正常；

RLS 权限策略生效；

Storage 文件访问正常；

Edge Functions 调用正常；

AI-Gateway 调用正常；

资料检索和引用展示正常。

原理解析：为什么能够一条命令上线

AI Pages 能把部署收敛成一条命令，核心原因是它把前端 Pages 与 Supabase 后端资源放在同一条部署链路中处理。

在普通部署模式下，前端和后端通常是分开的：

前端托管平台只负责页面构建和静态资源发布；

数据库平台只负责数据库和权限；

函数平台只负责后端函数运行；

存储服务只负责文件；

环境变量需要人工配置；

各服务之间的地址、密钥和权限关系需要人工串联。

AI Pages 则在部署时明确知道：

当前前端项目对应哪个 Supabase 后端；

应该执行哪些数据库 migration；

应该部署哪些 Edge Functions；

哪些环境变量需要注入到前端；

前端应该连接到哪个后端实例。

因此，它可以自动完成“创建后端资源 → 初始化数据库 → 部署函数 → 绑定前端 → 注入环境变量 → 发布站点”的完整流程。

对开发者来说，最直接的变化是：上线一个 AI 全栈应用，不再需要在多个平台之间反复切换。

适用场景：哪些应用适合 AI Pages

AI Pages 尤其适合以下几类场景。

AI 应用原型验证

例如资料问答、智能表单、知识库助手、图文管理、Agent 控制台等应用。

Vibe Coding 产物上线

在自然语言辅助编程场景中，AI 可以很快生成业务代码，但部署经常成为中断点。

Demo、客户演示和内部评审

很多 Demo 的价值在于“能不能马上打开体验”。

实践总结：从本地代码到线上应用

AI Pages 不是单纯的静态页面托管，而是面向 AI 全栈应用的一体化部署能力。

在这次「资料盒子」实践中，一条 pages fast create 命令完成了前端发布、Supabase 后端创建、数据库迁移、Storage 初始化、Edge Functions 部署、环境变量注入和预览链接生成。

对于开发者来说，它减少的是重复配置和平台切换；对于 AI 编程和 Agent 开发场景来说，它补上的是从“代码生成”到“应用上线”之间的关键一步。

当一个应用可以用一条命令从本地代码变成线上链接，原型验证、产品演示和早期上线都会变得更轻。

目前，AI Pages 已随火山引擎 Supabase 上线。开发者可以前往火山引擎官网查看产品入口和技术文档，体验从本地项目到线上全栈应用的一键部署流程。

AI 原生 BaaS 平台 Supabase 版