一句话上线 AI Agent 应用：火山 Supabase + IGA Pages 全栈部署实践

AI 全栈应用上线难在哪？

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

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

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

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

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

火山 IGA Pages：将五类部署收敛为一条命令

火山引擎 IGA Pages 是什么 ：火山引擎一站式 AI 应用部署与全球加速平台。它提供零配置的部署流程、全球边缘网络和 Serverless 函数能力。它负责极速地"上线" 。

💡 当前 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. 火山引擎账号

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

2. 安装 CLI

# 安装 byted-supabase-cli。
npx @byted-supabase/cli@latest install

# 检查版本
byted-supabase-cli --version

这条命令会同时：

• 全局安装 byted-supabase-cli
• 安装配套的 byted-supabase agent skill。
• 检查安装是否成功

3. 登录账号

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

# 按你的实际地域调整，常用 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，完成项目检查、命令生成、部署执行和结果汇总。

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

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

"请使用 byted-supabase skill，部署 byted-supabase-cli 中用于演示的 Demo 项目。"

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

👍 示例应用：资料盒子

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

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

• 文件上传、预览、下载和删除；
• 支持文本和图片资料管理；
• 文件上传后自动进入处理队列；
• 调用大模型生成标签和摘要；
• 基于资料标签进行问答；

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

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

方式二：手动部署

获取代码

# 拿资料盒子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 后，目录结构大致如下：

nextjs-supabase-filebox/
├── frontend/
├── backend/
└── migrations/

部署命令

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

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_

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

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

• 上传前端资源；
• 创建 Pages 项目；
• 创建 Supabase 工作区；
• 等待工作区进入 Running 状态；
• 解析默认数据库分支；
• 执行数据库迁移脚本；
• 部署 Edge Function；
• 将 Pages 项目绑定到 Supabase 工作区；
• 创建并完成 Pages 部署。

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

PagesProjectID: xxx # Pages（前端）:前端 Pages 项目的唯一 ID
WorkspaceID: xxx # Pages（前端）:本次前端部署的 ID（每 deploy 一次产生一个）
BranchID: xxx # Pages（前端）:上传的前端打包产物（那个 zip）的资源 ID，一次 upload 产生一个
ProjectDeployResourceID: xxx # Supabase（后端）: 工作区ID
DeployID: xxx # Supabase（后端）: 分支 ID

预览访问

byted-supabase-cli pages binding --workspace-id <WorkspaceID> --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 调用正常；
• 资料检索和引用展示正常。

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

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

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

• 前端托管平台只负责页面构建和静态资源发布；
• 数据库平台只负责数据库和权限；
• 函数平台只负责后端函数运行；
• 存储服务只负责文件；
• 环境变量需要人工配置；
• 各服务之间的地址、密钥和权限关系需要人工串联。

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

• 当前前端项目对应哪个 Supabase 后端；
• 应该执行哪些数据库 migration；
• 应该部署哪些 Edge Functions；
• 哪些环境变量需要注入到前端；
• 前端应该连接到哪个后端实例。

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

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

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

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

💡 AI 应用原型验证

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

🎨 Vibe Coding 产物上线

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

📍 Demo、客户演示和内部评审

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

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

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

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

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

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

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