边缘开发者平台
  • Pages
    • 产品简介
    • 快速开始
      • 导入 Git 仓库
      • 从模板开始
      • 直接上传
    • 框架指南
    • 项目指南
      • 项目管理
      • edgeone.json
      • 错误码
    • 构建指南
    • 部署指南
      • 概览
      • 触发部署
      • 管理部署
      • 部署按钮
    • 域名管理
      • 概览
      • 自定义域名
      • 配置 HTTPS 证书
      • 如何配置 DNS 的 CNAME 记录
    • Pages Functions
    • KV 存储
    • 边缘 AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • 集成指南
      • 数据库
        • Supabase 集成
        • Pages KV 集成
      • 电商
        • Shopify 集成
        • WooCommerce 集成
      • 支付
        • Stripe 集成
      • CMS
        • WordPress 集成
        • Contentful 集成
        • Sanity 集成
      • 身份验证
        • Supabase 集成
        • Clerk 集成
    • 最佳实践
      • 使用 Deepseek-R1 模型快速搭建对话型AI站点
      • 使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台
      • 使用 Supabase 和 Stripe 搭建 SaaS 站点
      • 如何快速搭建公司品牌站点
    • 迁移指南
      • 从 Vercel 迁移至 EdgeOne Pages
      • 从 Cloudflare Pages 迁移至 EdgeOne Pages
      • 从 Netlify 迁移至 EdgeOne Pages
    • 排障指南
    • 常见问题
    • 联系我们
    • 产品动态
解锁 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 选择连接方式。
Supabase connect
Supabase 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

第一步在远程仓库中建立新的项目,在 Gihub 中进入 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 控制台中,点击 Create project -> Import Git repository,选择您的项目。


3、添加环境变量

配置 Pages 变量,Variable Name 与本地项目中 .env.local 中的变量名保持一致,再填写 Value。
EdgeOne supabase template variable
EdgeOne supabase template variable

填写好参数后,点击 Start Deployment开始部署,部署会花费1-3分钟。如果项目出现部署失败,可以根据 Build LogsBuild Summary 信息修改项目,或者联系工作人员解决。



更多相关内容

了解 Supabase 更多内容:Supabase 操作文档