本指南提供在 EdgeOne Pages 平台上快速集成 Supabase 的步骤说明。通过数据库的连接,实现更灵活的页面交互。示例中数据库使用 Supabase,但相同的部署方式同样适用于其他同类型数据库,集成理念大致相同。
快速入门
您可以选择我们的 Supabase 集成模板,点击 Supabase Auth Starter 模板,直接开始开发。本教程大致分为三步:Supabase 配置、本地集成、Pages 部署,下面将详细介绍每个步骤的具体操作。
Supabase 配置
1. 注册 Supabase 账户,并新建项目
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
第一步在远程仓库中建立新的项目,在 GitHub 中进入
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 变量,变量名与本地项目中
.env.local 中的变量名保持一致,再填写变量值。

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

