解锁 1年EdgeOne + 1TB CDN: 加入我们的开发者之旅
立即开始!
Supabase 集成
Supabase 是 Firebase 的开源替代方案。使用 Postgres 数据库、身份验证、即时 API、边缘函数、实时订阅、存储和向量嵌入来启动您的项目。将 EdgeOne Pages 与 Supabase 集成,以实现数据操作。
概览
本指南提供在 EdgeOne Pages 平台上快速集成 Supabase 的步骤说明。通过数据库的连接,实现更灵活的页面交互。示例中数据库使用 Supabase,但相同的部署方式同样适用于其他同类型数据库,集成理念大致相同。
快速入门
您可以选择我们的 Supabase 集成模版,点击 Supabase Auth Starter 模版,直接开始开发。本教程大致分为三步:Supabase 配置、本地集成、Pages 部署,下面将详细介绍每个步骤的具体操作。
Supabase 配置
1、注册 Supabase 账户,并新建项目
前往 Supabase.com 注册账户, 点击
Start your project
,然后Create your project
。在这一步中如果没有关联线上 Git 的需要关联 Git(支持 Github/Gitee),部署大概需要两分钟左右。
2、初始化数据库
进入创建好的
Project
,您可以在左侧的 Table Editor
中初始化你的数据表,设计表格结构和存储的数据字段。
3、连接数据库
在最左侧导航栏,选择
API Docs
,进入后会默认进入到 Introduction
中,点击上方的 Connect
选择连接方式。
选择程序框架、Router 方式,根据指引接入,这里选择
Next.js
和 Pages Router
为例。
4、填入密钥
本地开发创建
.env.local
然后写入 URL
和 KEY
,这里示例为 NEXT_PUBLIC
开头的变量,这在部分框架中会产生警告和报错。NEXT_PUBLIC_SUPABASE_URL=https://url.supabase.coNEXT_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
第一步在远程仓库中建立新的项目,在 Gihub 中进入
Dashboard
,点击 New
,填入项目名称,点击 Create repository
新建 Git 项目。
关联本地代码与远程仓库,并上传本地代码,在本地项目根目录执行以下命令,也可以参考 Github 上的步骤完成。
# Push your code to your git repository (e.g. GitHub, Gitee).git initgit add .git commit -m "First commit"git remote add origin "your Git address"git push -u origin master
2、选择部署项目
3、添加环境变量
配置 Pages 变量,
Variable Name
与本地项目中 .env.local
中的变量名保持一致,再填写 Value。
填写好参数后,点击
Start Deployment
开始部署,部署会花费1-3分钟。如果项目出现部署失败,可以根据 Build Logs
和 Build Summary
信息修改项目,或者联系工作人员解决。
更多相关内容