## 背景信息很多开发者在做全栈应用，尤其是 AI 应用时，真正耗时的地方往往不在业务代码本身。一个功能原型可能很快就能写出来：前端页面、登录注册、文件上传、数据库表、几段后端函数，再接一个大模型接口。但当它要从本地项目变成“别人能打开链接直接使用”的应用时，事情就会变复杂。你需要准备数据库，执行建表脚本，配置行级权限，开通对象存储，部署后端函数，设置环境变量，再把前端打包上传。每一步都不算难，但串起来之后，部署流程很容易变成一次重复、繁琐、容易出错的基础设施工作。火山引擎 Supabase 集成 Pages，实现一站式前端部署和运行，正是为了解决这段“最后一公里”而设计的。它把前端托管和 Supabase 后端部署整合到同一条链路里。开发者只需要在本地准备好前端代码、数据库迁移文件和 Edge Functions，然后执行一条命令，就可以完成前端站点发布、后端工作区创建、数据库初始化、函数部署和环境变量注入，并获得一个可访问的线上预览地址。本篇文章会用官方示例应用 Demo 「资料盒子」完整跑一遍 AI Pages 的部署流程。 ## 产品定位——IGA Pages 能解决什么问题

传统全栈应用上线通常包含几类工作： 1. 前端构建与托管例如安装依赖、执行 build、上传静态资源、生成访问链接。 2. 后端资源准备包括数据库实例、认证服务、对象存储、实时推送、函数运行环境等。 3. 数据库初始化执行 migration，创建表结构、索引、权限策略、触发器等。 4. 服务配置配置前端需要使用的 API 地址、匿名访问密钥、函数地址等环境变量。 5. 前后端联调检查登录、上传、数据库读写、函数调用和权限隔离是否正常。过去这些动作往往需要开发者在多个控制台和工具之间手动串联。现在，借助 `byted-supabase-cli` 的 `pages fast create` 命令，以及 Trae 中的 byted\-supabase Skill，开发者可以把前端托管、Supabase 后端创建、数据库迁移、Edge Functions 部署和环境变量注入放到同一条部署链路中完成。执行部署后，这条链路会自动完成： * 构建并托管前端静态站点； * 创建新的火山引擎 Supabase 工作区； * 等待后端服务就绪； * 执行数据库迁移脚本； * 创建或初始化 Storage Bucket； * 配置 Realtime 相关发布； * 部署 Edge Functions； * 将前端项目与后端工作区绑定； * 注入浏览器端所需的环境变量； * 输出最终可访问的预览链接。开发者不需要在多个控制台之间来回切换，也不需要手动复制项目 URL、匿名密钥或函数地址。 ## 准备工作开始之前，需要准备以下环境。 1. ### 火山引擎账号确保已经拥有可使用火山引擎 Supabase 的账号，并完成必要的登录授权。AI Pages 部署过程中会创建 Supabase 后端工作区，因此账号需要具备相应资源的创建权限。 2. ### 安装 CLI ```Bash # 安装 byted-supabase-cli。 npx @byted-supabase/cli@latest install # 检查版本 byted-supabase-cli --version ``` 这条命令会同时： * 全局安装 `byted-supabase-cli`。 * **安装配套的 ** **`byted-supabase`** ** agent skill。** * 检查安装是否成功。 3. ### 登录账号使用 CLI 登录火山引擎账号： ```Bash # 按你的实际地域调整，常用 cn-beijing byted-supabase-cli login --region cn-beijing ``` 登录过程会根据当前环境打开授权页面或输出登录提示。按提示完成登录即可。 ## 快速部署 ### 方式一：通过 Trae + Skill 自然语言部署如果已经安装好 byted\-supabase\-cli，就可以直接在 Trae 中用自然语言发起部署。原因在于，byted\-supabase\-cli 不只提供命令行能力，也内置了配套的 Agent Skill。安装 CLI 后，Trae 这类支持 Skill 的 AI 编程工具可以识别并加载这套能力。此后，开发者不需要记住完整命令和参数，只要用自然语言描述目标，Agent 就可以根据 Skill 调用 CLI，完成项目检查、命令生成、部署执行和结果汇总。这也是 AI Pages 更适合 Vibe Coding 场景的地方：部署不再依赖人工手动拼接命令，而是可以接在 AI 编程流程后继续完成。例如，你可以直接告诉 Trae： > *“请使用 byted\-supabase skill，部署 byted\-supabase\-cli中用于演示的 Demo 项目。”* *收到指令后，TRAE Agent 会基于 Skill 自动完成后续步骤。* **示例应用：资料盒子** 本次实践使用火山引擎 Supabase 官方 Demo「资料盒子」。它是一个轻量的 AI 资料管理应用，包含以下功能： * 文件上传、预览、下载和删除； * 支持文本和图片资料管理； * 文件上传后自动进入处理队列； * 调用大模型生成标签和摘要； * 基于资料标签进行问答；虽然它是一个 Demo，但全栈能力比较完整，也就是说，这不是只发布一个静态页面，而是一次性部署一个包含真实后端能力的全栈应用。

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

### 方式二：手动部署 #### 获取代码 ```Python # 拿资料盒子Demo地址 byted-supabase-cli pages fast create -h # 输出资料盒子Demo地址 # This command uploads a Pages deployment archive, creates a Pages project, creates a Supabase workspace with the same project name, waits for the workspace/default branch to become ready, optionally applies SQL migrations, optionally deploys Edge Functions, binds the Pages project to Supabase, and creates the final Pages deployment. # Demo app: # https://lf3-static.bytednsdoc.com/obj/eden-cn/whkph/ljhwZthlaukjlkulzlp/nextjs-supabase-filebox.zip # 下载资料盒子zip curl -fsSL https://lf3-static.bytednsdoc.com/obj/eden-cn/whkph/ljhwZthlaukjlkulzlp/nextjs-supabase-filebox.zip -o filebox.zip # 解压 unzip -o filebox.zip ``` 下载并解压官方「资料盒子」Demo 后，目录结构大致如下： ```Bash nextjs-supabase-filebox/ ├── frontend/ ├── backend/ └── migrations/ ``` #### 部署命令进入 Demo 所在目录后，执行以下命令： ```Plain Text byted-supabase-cli pages fast create my-filebox \ --file-path nextjs-supabase-filebox/frontend \ --functions-init nextjs-supabase-filebox/backend \ --migrations-init nextjs-supabase-filebox/migrations \ --framework-prefix NEXT_PUBLIC_ ``` 这条命令中的几个参数含义如下： |

参数

|

说明

| |---|---| |`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 部署都已经完成。部署过程中，终端会打印出一些关键信息，例如： ```Bash PagesProjectID: xxx # Pages（前端）:前端 Pages 项目的唯一 ID WorkspaceID: xxx # Pages（前端）:本次前端部署的 ID（每 deploy 一次产生一个） BranchID: xxx # Pages（前端）:上传的前端打包产物（那个 zip）的资源 ID，一次 upload 产生一个 ProjectDeployResourceID: xxx # Supabase（后端）: 工作区ID DeployID: xxx # Supabase（后端）: 分支 ID ``` #### 预览访问 ```Bash byted-supabase-cli pages binding --workspace-id --region cn-beijing -o yaml ```

这些信息可以用于后续排查、查看项目或重新部署。部署完成后，复制终端输出的预览链接preview_domain在浏览器中打开即可访问应用。

## 结果验证：确认全栈链路已跑通为了确认部署不只是页面打开成功，还需要验证前端、数据库、存储、函数和 AI 调用是否全部正常。 1. ### 登录应用打开预览链接后，进入登录页。Demo 提供了默认测试账号入口，可以直接点击使用默认测试账户按钮创建并登录。

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

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

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

3. ### 等待 AI 自动打标签文件导入后，会进入后台处理流程。Edge Functions 会负责触发文件处理逻辑，并通过 AI\-Gateway 调用大模型，为资料生成标签和摘要。这个过程完成后，资料列表中会出现自动生成的标签。 4. ### 体验问答进入“资料问答”页面，输入一个与导入资料相关的问题。**系统会根据标签和资料内容进行检索，生成回答，并标注引用来源。**

如果回答能够正常生成，并且来源文件可以被高亮展示，说明以下链路已经跑通： * 前端可以访问后端； * 用户认证正常； * 数据库读写正常； * 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 版