跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptSaaSAI大前端

Supabase 全栈开发实战:从云端服务到本地部署

Supabase 基于 PostgreSQL 封装了认证、存储及边缘计算能力,提供云端服务与本地部署两种模式。本文详解了其数据库核心特性、PostGIS 插件应用、SDK 集成方式及 RLS 行级安全策略配置。通过实际案例展示了如何在前端直接操作数据库并确保数据安全,同时介绍了文件存储桶管理与边缘函数用法。最后给出了基于 Docker 的本地化部署完整流程,帮助开发者灵活掌控后端基础设施。

内存管理发布于 2026/4/9更新于 2026/9/854 浏览
Supabase 全栈开发实战:从云端服务到本地部署

Supabase 全栈开发实战:从云端服务到本地部署

2025 年,Supabase 作为开源后端基础设施的代表项目,在 GitHub 上获得了极高的关注度。它基于强大的 PostgreSQL 数据库,封装了用户认证、文件存储、边缘函数及可视化运维面板等功能,为开发者提供了一套开箱即用的后端解决方案。

Supabase 的核心能力涵盖后端基础设施、前端 SDK 集成以及灵活的云服务选项。后端方面,它提供数据库、存储和边缘计算能力;前端则通过 SDK 支持 React、Vue 甚至移动端应用快速接入。作为一个完全开源的项目,既可以使用官方云服务,也能通过 Docker 自行部署完整实例。

本文将深入探讨 Supabase 的数据库核心、SDK 使用、行级安全策略(RLS)以及本地化部署方案。

数据库核心

访问 Supabase 官网并登录,创建组织与项目即可拥有一个完整的 PostgreSQL 实例。在左侧菜单中,Table Editor 提供了可视化的表管理功能,支持字段定义、数据增删改查。SQL Editor 则允许直接编写和执行原生 SQL 语句。

插件扩展

PostgreSQL 的强大之处在于其丰富的插件生态。例如,安装 postgis 插件后,数据库便具备了处理地理空间数据的能力,可替代部分 GIS 系统。

启用插件后,可以创建包含几何类型的表:

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

插入测试数据:

INSERT INTO city_map (name, geom) VALUES 
('公园', ST_GeomFromText('POINT(10 10)', 4326)),
('河流', ST_GeomFromText('LINESTRING(0 0, 20 20)', 4326));

利用插件提供的函数,可以计算面积或查询邻近点。例如查找距离某坐标最近的元素:

SELECT name, ST_Distance(geom, ST_GeomFromText('POINT(12 8)', 4326)) AS distance
FROM city_map
ORDER BY distance ASC;

数据库连接

除了网页操作,Supabase 支持远程直连。点击 Connect 按钮获取连接信息,可接入 DBeaver 等客户端工具。

连接模式主要有三种:

  • Direct Connection:直连模式,延迟最低但不支持 IPv4。
  • Session Pooler:会话池模式,支持 IPv4,适合常规应用。
  • Transaction Pooler:事务池模式,由 Supabase 维护连接池,特别适合无服务器函数或边缘计算场景。

Supabase SDK

Supabase SDK 使得前端框架能轻松调用后端能力。以 Vue.js 为例,初始化工程后安装 SDK:

npm install @supabase/supabase-js

在代码中引入并配置客户端:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://your-project.supabase.co'
const supabaseKey = 'your-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)

虽然将 API Key 暴露在前端看似不安全,但 Supabase 通过 RLS(行级安全策略)保障了数据安全。只要正确配置策略,即使密钥公开,未授权的用户也无法访问敏感数据。

用户鉴权

注册与登录逻辑非常简洁:

// 注册
await supabase.auth.signUp({ email: '[email protected]', password: 'password' })

// 登录
const { data, error } = await supabase.auth.signInWithPassword({ 
  email: '[email protected]', 
  password: 'password' 
})
console.log(data.user)

验证邮件发送后,用户状态将在控制台更新。登录成功后返回的 Session 可用于后续请求的身份标识。

RLS 行级安全策略

RLS 是 PostgreSQL 的原生功能,用于约束数据的读写权限。默认情况下,未开启 RLS 的表无法通过 SDK 查询,这强制开发者必须考虑安全性。

配置示例

假设有一个 user_info 表,存储用户年龄等信息,需关联系统用户 ID:

ALTER TABLE user_info ADD COLUMN user_id UUID REFERENCES auth.users(id);

开启 RLS 并设置策略,确保用户只能查看自己的数据:

ALTER TABLE user_info ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view own data" ON user_info
FOR SELECT USING (auth.uid() = user_id);

前端查询时,SDK 会自动注入当前用户的 JWT Token,服务端校验通过后仅返回匹配的数据。若尝试查询他人数据,将返回空结果或报错。

写入同样受控,可限制用户只能插入与自己 ID 匹配的记录。这种机制让前端直接操作数据库成为可能,而无需担心越权风险。

文件存储

Storage 模块提供 S3 兼容的文件存储服务。创建 Bucket 后,可配置类似 RLS 的安全策略,控制用户上传路径。

例如,限制用户只能上传到以其 ID 命名的文件夹:

const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`public/${user.id}/image.png`, file)

免费层通常有存储空间限制(如 500MB 数据库 + 1GB 存储),超出后可选择本地部署或升级计划。

边缘函数与实时推送

Edge Functions 类似于 Cloudflare Worker,支持运行 Serverless 代码。RealTime 功能则通过 Websocket 监听数据库变更,实现消息推送或状态同步。这两项功能极大丰富了应用交互能力。

此外,Supabase 支持 MCP(Model Context Protocol),可将数据库能力集成至 AI 工具中,辅助自动化开发流程。

本地部署指引

对于需要私有化部署的场景,可通过 Docker 一键启动所有组件。Supabase 包含约 13 个微服务,建议至少 4GB 内存环境。

部署步骤

  1. 克隆仓库并准备目录:
    git clone --depth 1 https://github.com/supabase/supabase
    mkdir supabase-project
    cp -rf supabase/docker/* supabase-project/
    
  2. 配置环境变量: 复制 .env.example 为 .env,修改端口号(Windows 下建议避开常用端口,如改为 18000)。
  3. 拉取镜像并启动:
    cd supabase-project
    docker compose pull
    docker compose up -d
    

启动完成后访问 localhost:18000,使用默认凭证登录。本地部署版本功能与云端一致,SDK 仅需替换 URL 和 Key 即可无缝切换。

Supabase 采用 Apache 2.0 协议开源,商业友好,是构建现代全栈应用的优秀选择。

目录

  1. Supabase 全栈开发实战:从云端服务到本地部署
  2. 数据库核心
  3. 插件扩展
  4. 数据库连接
  5. Supabase SDK
  6. 用户鉴权
  7. RLS 行级安全策略
  8. 配置示例
  9. 文件存储
  10. 边缘函数与实时推送
  11. 本地部署指引
  12. 部署步骤

更多推荐文章

查看全部
  • 滑动窗口算法专题:四道经典题目深度解析
  • 从零实现Vivado下载与初始设置:FPGA开发第一步
  • MySQL 权限管控与 C/C++ 客户端接入实战
  • VRChat 跨语言交流工具 VRCT 使用指南
  • Java 面试核心知识点与常见问答整理
  • Go 语言文件读写入门:os、bufio 与 ioutil 实战
  • AIGC 产品经理:定义、核心职责与 AI 产品经理的区别
  • AMD 显卡在 Windows WSL 下部署 Stable Diffusion(WebUI 与 ComfyUI)
  • DataRoom 开源大屏设计器:基于 SpringBoot 快速构建数据可视化平台
  • 量化金融领域主要职位解析:研究、开发与交易
  • 利用 Coze 构建企业级知识库与 AI Agent 开发指南
  • 使用本地大模型 Llama3 进行数据分类标记
  • 基于 C# .NET Framework 的 WebService 服务开发实例详解
  • 算法的“预谋”:前缀和如何改变游戏规则
  • C++核心特性解析:函数重载、引用、内联函数、auto 与 nullptr
  • MIT 电机模式控制详解:参数配置与调试实战
  • Rokid 灵珠平台:快速搭建旅游 AR 智能体实战
  • 双指针算法实战:移动零与复写零
  • C++11 新特性详解:Lambda、移动语义与可变参数模板
  • 8 款科研绘图工具推荐:AI 助力学术可视化与图表绘制

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online