在Supabase上创建一个PostgreSQL数据库
这篇文章的目的是什么？ (Zhè de shì ?)
-
- Next.jsでDBを使用してサイト構築する際の備忘録
- SupabaseでPostgreSQLのDB作成する際のフロー確認用
文章梗概
-
- Supabase とは
-
- Supabase登録・プロジェクト作成
-
- データベーススキーマの設定
- Next.jsに連携
※假设已经创建了Next.js项目，我们将继续讨论关于Next.js的集成问题。
Supabase是什么？
Supabase是备受关注的开源Firebase替代品，也是一种BaaS（后端即服务）。
基于PostgreSQL数据库，提供实时更新、认证、存储、无服务器函数等功能，满足全栈开发的需求。
简单来说，就是可以免费创建数据库（Postgres），并且可以使用Next.js等工具创建带有数据库的应用程序，感觉非常方便吧。只需关注前端部分，而不用考虑后端，能够轻松进行数据库操作，这真是太方便了！虽然也有付费计划，但对个人使用来说，免费版已经足够使用了。
关于开源BaaS平台Supabase
在Supabase上注册并创建项目。
从官方网站选择“开始你的项目”。
使用GitHub进行登录
选择「新项目」并创建一个新的项目。
输入或选择项目名称等
-
- 組織：デフォルトだとGitHub名で作成されているかと思います。自由に追加できます
-
- プロジェクト名：プロジェクト名を入力
-
- パスワード：パスワードを入力
-
- リージョン：リージョンを選択
- プラン：Free-$0/monthを選択（個人で使用する分には無料枠で十分だと思います）
数据库架构的配置
数据库架构的设置（创建表）有多种方法，但本次将介绍在Supabase上逐步设置的方法。
还有其他方法，例如通过执行查询来进行设置。
添加数据
下一步是与Next.js协作
本次将与使用Next.js的项目进行协作，以实现获取、添加和删除Todo的功能。您可以从这里获取本次使用的Next.js项目的源代码。
协同工作的流程 xié de
①安装supabase-js
②初始化Supabase客户端（设置API密钥）
③创建获取、添加、删除操作
④启用Supabase的“启用RLS（行级安全）”功能
※基本上按照supabase官方文档进行说明
※此外，由于这里只涉及与Supabase协作的部分，关于其他部分，建议参考我们的GitHub文档。
①安装supabase-js
使用下面的命令在supabase公式文档中提到的地方进行安装。
npm install @supabase/supabase-js
初始化Supabase客户端（设置API密钥）
import { createClient } from "@supabase/supabase-js";
export const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);
// 下記は公式ドキュメントの記載です。
// import { createClient } from '@supabase/supabase-js'
// Create a single supabase client for interacting with your database
// const supabase = createClient(
// 'https://xyzcompany.supabase.co',
// 'public-anon-key'
// )
我们接着设置在官方文档中被标注为必需的参数supabaseUrl和supabaseKey。
在.env文件中添加SUPABASE_URL和SUPABASE_ANON_KEY。
需要在前面加上NEXT_PUBLIC。
NEXT_PUBLIC_SUPABASE_URL=https://XXXXXXXXXXXX.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
制作获取、追加、删除处理
为了简单理解基本处理，我们将其整理在lib/supabaseFunctions.ts中。
import { supabase } from './supabase';
// すべてのTodoを取得するための非同期関数
export const getAllTodos = async () => {
// todoテーブルからすべてのカラムを取得し、todosに代入します。
const todos = await supabase.from("todo").select('*');
// todosのデータをログに出力します。
console.log(todos.data);
// todos.dataを返します。
return todos.data;
};
// Todoを追加するための非同期関数
export const addTodo = async (title: string) => {
// todoテーブルにtitleを追加します。
await supabase.from("todo").insert({ title: title });
};
// Todoを削除するための非同期関数
export const deleteTodo = async (id: number) => {
// idが引数のTodoをtodoテーブルから削除します。
await supabase.from("todo").delete().eq("id", id);
};
④启用Supabase的「启用行级安全（RLS）」功能
虽然到了3号，协调已经完成，但是如果继续这样下去，我觉得数据将会是空的并返回。这是因为没有”访问表格数据的权限”，所以需要在这边进行授权。
首先，您需要在Supabase界面右上方选择“无活动的RLS策略”作为许可程序的第一步。
请选择“禁用RLS”。
请点击选择“确认”。
