一、快速入门
你可以选择我们的 Supabase 集成模板,点击 Supabase Auth Starter 模板,直接开始开发。本教程大致分为三步:Supabase 配置、本地集成、Makers 部署,下面将详细介绍每个步骤的具体操作。
二、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 然后写入 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,这可能导致数据获取失败。
八、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. 选择部署项目
进入到 EdgeOne Makers 控制台 中,单击创建项目 > 导入 Git 仓库,选择你的项目。
十、3. 添加环境变量
配置 Makers 变量,变量名与本地项目中 .env.local 中的变量名保持一致,再填写变量值。
填写好参数后,单击开始部署,部署会花费1-3分钟。如果项目出现部署失败,可以根据“构建日志”和“构建产物”信息修改项目,或者联系工作人员解决。
十一、更多相关内容
了解 Supabase 更多内容,你可参见 Supabase 操作文档。