Supabase 实战教程：从云服务到本地部署，集成 Vue 与行级安全策略

会打开一个 SQL 语句的编辑窗口，可以在这里面直接编写 SQL 语句，点击右下角的 run 就可以执行。

在左侧菜单找到 Database，

这里有 postgres 的所有的基础功能：schema, 表，函数，触发器，枚举，插件，索引。publications 是一个实时监控，可以把表的修改信息以 Websocket 的形式推送出去。

我们来看一个重要部分，叫做插件 (Extensions)。现代 Web 开发中，各种花哨的工具层出不穷，其实一个 PostgreSQL 数据库搭配上插件，就能存下世间万物，可以很大程度上代替这些花哨的工具。

这里看一个例子 postgis。

安装这个插件，postgres 就有了存储地理位置信息的能力，可以把 postgres 变成一个性能顶尖的企业级地理信息系统数据库。在右边把这个开关开起来，选择一个 schema 去应用这个扩展，选择 public，这样就开启成功了。

创建一个表，用来存储城市里面的地理位置信息，GEOMETRY 是插件提供的一个自定义类型，用来存储地理位置信息。

CREATE TABLE city_map (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  geom GEOMETRY(GEOMETRY, 4326)
);

往表里插入三个地理位置相关的测试数据：一个四边形的公园，一条直线型的河流，还有一个坐标点。

INSERT INTO city_map (name, geom) VALUES 
 ('人民公园', ST_GeomFromText('POLYGON((0 0, 10 0, 10 10, 0 10, 0 0))', 4326)), 
 ('护城河', ST_GeomFromText('LINESTRING(-5 5, 15 5)', 4326)), 
 ('电话亭', ST_GeomFromText('POINT(12 8)', 4326));

可以使用插件提供的函数来计算面积，使用操作符来计算两个地理位置之间的距离。

SELECT name, ST_Area(geom) FROM city_map WHERE name = '人民公园';

数据库连接

除了在网页上操作这个 postgres 数据库，Supabase 还提供了远程连接的方式。点击上面的 connect 按钮，

这里 Supabase 为我们提供了一个远程连接的地址，

可以把它接入到任意一个数据库的客户端，或者 Java Python 之类的后台代码里面。使用 DBeaver 等工具连接：

新建数据库连接 --> 选择 postgres，主机填写这一串，端口 5432，数据库名与用户名都不用改，密码填写创建 Supabase 项目时候的密码，点击完成。

这样，就把 Supabase 的数据库连接进了客户端工具。注意一下，选择 Direct Connection，也就是直连模式，它是不支持 IPV4 的。如果网络只能用 IPV4，需要选择 Session pooler。Session Pooler 跟直连模式非常的像，好处是它支持 IPV4。

在连接模式里面，中间还有一个 Transaction pooler，这个是 supabase 的连接池模式。在直连模式下面，需要后端服务自己维护连接池，比如用 springboot 的 Hikari。

而连接池模式下面，supabase 会自动为我们维护连接池，从而显著降低数据库连接的压力，特别适合一些无状态服务，比如无服务器函数或者边缘函数。

Supabase SDK

以上就是 Supabase 作为一个数据库的功能，接下来看 Supabase SDK。Supabase SDK 可以将任何一个前端框架，比如 React Vue 甚至手机 APP，用一行代码就接入后端。Supabase SDK 一般是配合这里的鉴权功能来使用的。

回到项目的首页，在最下面有一段 Javascript 代码，这就是最基础的 SDK 的使用。

创建一个前端项目试一下。这里使用 Vue 框架。

打开一个文件夹，右键在终端打开，进行前端开发。电脑上需要先安装 node.js，执行第一个命令初始化一个 Vue 工程。项目初始化完成以后，根据提示操作。

cd vue-project
npm install
npm run dev

这样一个 VUE 工程就创建好了。接下来，把 Supabase 的 SDK 接入这个前端工程，第一步就是把 Supabase 的 SDK 在工程里面安装一下。

npm install @supabase/supabase-js

找一段能写 TS 代码的地方，把这个 SDK 来测试一下。在 App.vue 这个文件为例，把官网上的示例代码粘贴过来。这里的 Supabase API Key 直接从官网上面复制。

const supabaseUrl = 'https://sqttzihmuyigautyhyzd.supabase.co'
const supabaseKey = "官网的 API Key"
const supabase = createClient(supabaseUrl, supabaseKey)
await supabase.auth.signUp({ email: '[email protected]', password: 'Supabase123!' })

关于 API Key 直接写到前端代码里面是否安全的问题。Supabase 官网说明这个 key 在浏览器里面使用是安全的，如果你启用了 RLS，也就是行级安全策略，并且正确地配置了你的表。虽然把 API Key 直接放到前端去用有点反直觉，但这其实是 supabase 的一个强大特性，也就是 RLS 行级安全策略，它保证了即使在前端跟数据库交互，也能确保数据的安全。

实现用户注册非常简单：

await supabase.auth.signUp({ email: '[email protected]', password: 'Supabase123!' })

测试一下，把项目启动起来，访问一下前端，然后来到 Supabase 的控制台，在 authentication 里面，就可以看到注册的账户。状态是 waiting for verification，就是还没有邮箱验证。来到注册用户的邮箱，收一下验证邮件，点一下确认链接，确认完毕，这个用户就完全生效了。

就这么几行就简单搞定了用户注册。用户登录只要把 signUp 改成 signInWithPassword，就是使用邮箱加密码登录。

const { data: signInData, error: signInError } = await supabase.auth.signInWithPassword({ email: '[email protected]', password: 'Supabase123!' })
console.log(signInData)

刷新一下页面，在控制台就可以看到打印出来的用户信息，包括 session，用户的状态邮箱 ID 等等的各种信息。

这就是 Supabase SDK 的基础使用，几行代码就完成了用户的注册还有登录。

RLS 行级安全策略

RLS 行级安全策略它原本是 postgres 的一个原生功能，简单来说，就是约束了哪行数据可以被哪些用户修改或者读取。

在演示 RLS 之前，先在数据库里面建一个表。Supabase 自带的这个用户表，只有邮箱，还有电话等信息。准备创建一个用户信息表，把用户的年龄等信息存一下，表明叫 user_info，注意一定要把这里的 RLS 启动起来。

添加想要的字段，先来一个年龄字段，再来一个 first name 字段，再来一个 last name 字段。需要把用户信息表跟这张系统表关联起来，所以需要一个字段把这里的 uid 填进去。添加一个字段叫做 user_id，它的类型选择 uuid，跟系统表是一致的。

然后在最下面新建一个外键，需要把我们的 user_id 跟 auth 这个 schema 里面的用户表关联起来。左边选择 user_id，右边的关联项选择 id，也就是 user_info 表的 user_id 字段跟系统表的 auth.users 的 id 字段，两个形成外键关联，保存一下。

回到左侧菜单，authentication 里面，再新建一个用户，填个邮箱密码，创建，这样系统里面有两个用户了。再回到业务表，把这两个用户的基础信息都填一下，点击 insert row，

第一个用户最下面的 user_id 选 select record，选第一个用户，这样就把他的 ID 关联过来了。

保存，然后第二个用户年龄名字，在下面选择 user_id，这里选择这个用户，保存。我们在 authentication 的系统表里面有两个用户，在业务表里面存储了这两个用户的年龄。

现在的需求是，只让某个用户查看并且修改属于他自己的记录，而不能去查看或者修改别人的记录。

这里需要给业务表配置行级安全策略，点击这个按钮，

add RLS policy -->

create policy。选择 select 查询，右侧给了一些模板，选择最下面这一个 enable user to view their own data。这个模板的意思是登录用户只能读取属于他自己的那一条数据。上面这些都是固定的写法，主要看第 7 行，七行的意思是获取登录用户的 ID，这个 ID 必须跟 user_info 表的 user_id 匹配起来，也就是这个登录用户只能读取属于他自己的那一条数据，这也就是行级安全策略，把它保存一下。

登录用户只能看到属于他自己的数据。有了这个安全保障，可以直接把查询语句写到前端代码里面，supabase 通过行级的安全策略保障了数据的安全性。写一下查询语句，查询语句非常简单：supabase.from('user_info').select('*').eq('first_name', 'tech')。这里要查询 first_name 等于 tech 的数据，试一下。

const { data: signInData, error: signInError } = await supabase.auth.signInWithPassword({ email: '[email protected]', password: 'Supabase123!', })
const { data, error } = await supabase .from('user_info') .select('*') .eq('first_name', 'Tech')
console.log('数据:', data)
console.log('错误:', error)

刷新一下页面，看到数据被查询出来了，用户的年龄，他的名字都被查询出来了。

想查询别人的数据看看可不可以。把 first name 换一下，换成数据库里面的另外一个用户 test。

刷新一下页面，看到这里数据空的，

行级安全策略保证了当前的登录用户是不可能看到别人的数据的。

在浏览器控制台->network 最下面可以看到这次查询的网络请求。Supabase SDK 会自动的把这种 select 的语句转换成 http 的 get 方法，包括表名，然后 select 的字段，后面的条件都写到了这个 get 方法里面。

看到请求里面最重要的部分，是在 header 里面的 authentication 里面，有一个 bearer 里面的 JWT TOKEN，这个 TOKEN 也就是当前登录用户的令牌，只有这个令牌跟后面的行级安全策略匹配起来，才能查询到数据。

还有一些表没有配过行级安全策略，这些表就能随便查吗？比如看一下 test 表，点击这个 ADD RLS Policy。这里写了通过 supabase API 现在没有一行数据能被查询到，因为行级安全策略还没有配置，也就是没有配过 RLS 的表，通过 SDK 是完全查询不到的。

只有通过后台，或者这种直连数据库的形式，才能查询到这些表的数据。

RLS 除了能保证数据的读取，还能保证数据的写入。再来新建一条策略，create policy。选中 insert，模板的话选择这个，也就是用户只能插入跟自己有关的数据。

看到这里的条件跟刚才的 select 是一样的，这样点击 save。把业务表里面这两条测试数据删除掉，然后来修改代码，直接从前端网页来插入数据。插入数据的代码就这么写：supabase from 后面是表明，表明后面就是 insert，接下来就是需要插入的数据：first_name, last_name, 年龄，user_id。

我是从登录的账号里面取用户的 ID，也就是说它只插入 user_id 等于自己的数据。

const { data: signInData, error: signInError } = await supabase.auth.signInWithPassword({ email: '[email protected]', password: 'Supabase123!', })
const { data: data, error: error } = await supabase .from('user_info') .insert([ { first_name: 'Tech', last_name: 'Shrimp', age: 28, user_id: signInData?.user?.id } ]) .select()
console.log('数据:', data)
console.log('错误:', error)

试一下，刷新一下网页，成功打印了日志，来到后台，看到数据也被成功插入了数据库。

行级安全策略约定了用户只能插入跟自己有关的数据，如果改一下 user_id，看看能不能去插别人的 ID。刷新一下页面，看一下控制台，这里报了 403 forbidden。

看到报错：新插入的行违反了行级安全策略。我们的行级安全策略要求只能插入跟自己相关的数据，你不可能去修改别人的数据。从这个例子，看到行级安全策略的强大之处。这也解释了为什么使用 supabase 可以把数据库的操作语句写到前端代码里面。

文件存储

接下来看另外一个重要功能 storage，也就是文件存储。先来看一下它的基础使用。storage 用来存放文件，点击 add new bucket，

先创建一个存储桶，给存储桶起个名字，点击 create。随便找个文件就可以拖拽进去，可以查看下载上传的文件，还有获取它的链接，可以把它当做一个图床使用。这个存储桶功能是适配了 S3 标准的存储协议的，可以通过这个地址使用 S3 协议来管理里面的文件。

同样的存储桶也可以配置它的安全措施，使用 Supabase SDK 直接在前端对存储桶进行操作。

这里看一个例子，先来到 policy，在存储桶这里新建一个 policy，选择第二个模板，也就是用户只能操作跟他的用户 ID 相同名字的文件夹。

右下角点击创建，把这些权限都勾选上，点击保存。准备把这个网页改造一下，变成一个上传的页面。核心上传代码在这里：supabase.storage.form 是我这个存储桶的名字，接下来就是上传，指定一个路径，然后指定一个文件。

试一下，看到用户已经登录了，这里选择一个文件，随便填一个路径，点击上传。看到报错了，他违反了行级安全策略。

安全策略里面约束了，这个文件只能上传到跟他用户 ID 同名的文件夹里面。所以这里随便填一个文件夹是上传不上去的。把用户的 ID 复制一下，把文件夹的名字改成用户的 ID，再次点击上传。这次上传成功，去后台看一下。在存储桶里面可以看到用户的文件夹，在文件夹里面就可以看到他上传进来的文件。

使用的这个云服务版本，免费用户的最大存储空间有一定的限制：数据库最大使用 500 MB，然后存储桶最大可以使用 1GB。如果空间不够，当然也可以进行本地部署，视频的最后会介绍如何进行本地部署。

边缘函数

Edge Function，

也就是边缘函数。Edge Function 的功能非常像 Cloudflare Worker，supabase 的边缘函数跟我之前讲的几乎一模一样，这里就不赘述了。

实时推送

下一个功能是这里的 RealTime，简单来说就是推送功能。可以配置一个触发器来监听数据库的变化，每当数据库有变化的时候，它就会发送一个 Websocket 的通知，然后通过 Supabase 的 SDK 把这个消息推送到网页端。比如，想把一个消息在客户端进行弹窗提醒，就可以建一个提醒表，然后来订阅这个表的变化，每当发现表里面插入的数据跟自己有关，就会在客户端弹一个窗进行提醒。可以根据步骤把一个实时推送配置好。由于篇幅所限，就不详细演示了。

MCP

supabase 下一个重要功能是 MCP。来到文档站，搜索 MCP，找到第二个。

可以根据这里的文档，把 MCP 安装到 AI 工具里面，让 AI 获得操作 Supabase 的能力。

Supabase 本地部署指引

接下来，看如何自己部署一个 supabase。来到 supabase 的首页 supabase.com，点击 Docs，

也就是文档站。在 build 下面有一个 self hosting，

也就是自托管，自部署。这里选择 Docker 的方式，下面有一串部署命令，执行一下。

git clone --depth 1 https://github.com/supabase/supabase
mkdir supabase-project
cp -rf supabase/docker/* supabase-project
cp supabase/docker/.env.example supabase-project/.env
cd supabase-project
docker compose pull
docker compose up -d

supabase 总共有 13 个组件，运行起来整个差不多需要 4GB 的内存。需确保服务器资源充足。

新建一个文件夹，进来以后，右键在终端打开。第一件事需要在电脑上安装 Docker，如果对 Docker 使用方式不熟悉，可以参考官方文档。

把 Docker Desktop 启动起来，然后执行官网上的命令。

首先第一个命令使用 git 克隆命令把源代码克隆到本地。

git clone --depth 1 https://github.com/supabase/supabase

然后第二个命令新建一个文件夹。

mkdir supabase-project

第三个命令拷贝文件，不过 Windows 上不能这么直接执行。

手动拷贝一下，来到这个 supabase 文件夹，找到 docker，把这里面的所有东西复制一下，粘贴到 supabase-project 文件夹里面。

下一个命令是创建这个.env 文件，找到.env.example，把它复制一下创建一个.env 文件

进来以后，需要改一些东西，这里有需要改的是它的前端端口，在 Windows 电脑上必须把这个端口改高一点，在前面加个 1，改成 18,000。下面这个也改 18443，这样配置文件也准备好了。

接下来执行这个命令 CD 进去

cd supabase-project

执行这个命令

docker compose pull

把所有需要的镜像都拉取下来，总共有 13 个组件，非常的多。

然后输入最后一个命令

docker compose up -d

把这 13 个容器一把全部启动起来。

启动完成以后，就可以来访问一下了。输入 localhost:18000，注意端口填写配置文件里配的端口 18000。

启动后需要填账号名密码，

账号名是 supabase，密码填写这一串。this_password_is_insecure_and_should_be_updated

登录，这样，成功在本地部署好了。一个 supabase 应用。可以在数据库里面建表进行测试，然后刚才讲的数据库鉴权、文件存储、边缘函数这些功能，在自托管的版本里面也是有。

包括 Supabase SDK 也是可以正常用的，只需要把这里的地址，还有 API Key 换成本地部署的地址，还有 API Key。在上面的 connect 里面选到 APP framework，这里选到 Vue.js，把这个地址替换到代码里面，包括 API Key 替换到代码里面，supabase SDK 也可以完全正常使用

只需要找一个服务器，使用 Docker 把这一整套东西部署上去，就可以解锁 supabase 的全部能力。而且它的源代码在 GitHub 上面是完全开源的，使用的是宽松的 apache 2.0 协议，完全免费自由的商用。