Supabase 集成

最近更新时间:2026-01-09 17:47:33

我的收藏
本指南提供在 EdgeOne Pages 平台上快速集成 Supabase 的步骤说明。通过数据库的连接,实现更灵活的页面交互。示例中数据库使用 Supabase,但相同的部署方式同样适用于其他同类型数据库,集成理念大致相同。

快速入门

您可以选择我们的 Supabase 集成模板,点击 Supabase Auth Starter 模板,直接开始开发。本教程大致分为三步:Supabase 配置、本地集成、Pages 部署,下面将详细介绍每个步骤的具体操作。

Supabase 配置

1. 注册 Supabase 账户,并新建项目

前往 Supabase.com 注册账户, 单击 Start your project,然后 Create your project。在这一步需要关联 Git(支持 GitHub/Gitee)。

2. 初始化数据库

进入创建好的 Project,您可以在左侧的 Table Editor 中初始化您的数据表,设计表格结构和存储的数据字段。

3. 连接数据库

在最左侧导航栏,选择 API Docs,会默认进入 Introduction 中,在上方单击 Connect 选择连接方式。

选择程序框架、Router 方式,根据指引接入,这里以 Next.js Pages Router 为例。


4. 填入密钥

本地开发创建 .env.local 然后写入 URLKEY,这里示例为 NEXT_PUBLIC 开头的变量,这在部分框架中会产生警告和报错。
NEXT_PUBLIC_SUPABASE_URL=https://url.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=key
如果您需要填写更多的链接参数,例如 service_role,或者 JWT Settings,可以在左侧导航栏中选择 Project Settings > Data API,然后找到相关参数。


5. 创建服务连接

import { createClient } from "@supabase/supabase-js";
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseKey);

6. 进行数据操作

import { supabase } from '../utils/supabase'
const data = await supabase.from('todos').select()
如需了解更全面的数据库操作指南,请访问左侧导航栏中的 Table Editor,选择相应表格后,可以在左侧面板查看API Docs,文档提供了丰富的操作示例和详细说明。注意设定 RLS disabled,这可能导致数据获取失败。


部署到 EdgeOne Pages

1. 代码发布到 Git

第一步在远程仓库中建立新的项目,在 GitHub 中进入 Dashboard,单击 New,填入项目名称,单击 Create repository 新建 Git 项目。
关联本地代码与远程仓库,并上传本地代码,在本地项目根目录执行以下命令,也可以参考 GitHub 上的步骤完成。
# Push your code to your git repository (e.g. GitHub, Gitee).

git init
git add .
git commit -m "First commit"
git remote add origin "your Git address"
git push -u origin master

2. 选择部署项目

进入到 EdgeOne Pages 控制台 中,点击创建项目 > 导入 Git 仓库,选择您的项目。

3. 添加环境变量

配置 Pages 变量,变量名与本地项目中 .env.local 中的变量名保持一致,再填写变量值。



填写好参数后,单击开始部署,部署会花费1-3分钟。如果项目出现部署失败,可以根据“构建日志”和“构建产物”信息修改项目,或者联系工作人员解决。




更多相关内容

了解 Supabase 更多内容,您可参见 Supabase 操作文档