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 信息修改项目，或者联系工作人员解决。
更多相关内容