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

Supabase 全栈开发实战:数据库、认证与本地部署

介绍 Supabase 作为开源后端服务的核心功能与实战应用。内容涵盖基于 PostgreSQL 的数据库管理、PostGIS 插件使用、多种连接模式配置;通过 Vue 示例演示 SDK 集成、用户认证流程及行级安全策略(RLS)实现数据隔离;讲解文件存储桶的安全配置、边缘函数与实时推送功能;最后提供 Docker 本地部署完整步骤。文章旨在帮助开发者快速搭建前后端分离应用,实现从云服务到私有化部署的全流程掌握。

技术博主发布于 2026/4/5更新于 2026/9/1080 浏览
Supabase 全栈开发实战:数据库、认证与本地部署

Supabase 是一个开源的后端级服务框架,在强大的 PostgreSQL 数据库基础上,封装了用户认证、文件存储、可视化的运维面板等功能,为开发者提供了一整套开箱即用的后端基础设施。它提供了三大部分的能力:后端、前端与云服务。

数据库核心

访问 Supabase 官网注册登录,创建一个组织并选择免费套餐,然后创建项目(数据库实例)。

在 Table Editor 中可以创建表、编辑字段和记录。左侧 SQL Editor 支持直接编写和执行 SQL 语句。Database 菜单包含 schema、表、函数、触发器、枚举、插件、索引等基础功能。

插件 (Extensions) 现代 Web 开发中,PostgreSQL 搭配插件可以替代许多工具。例如安装 PostGIS 插件后,Postgres 便具备存储地理位置信息的能力。

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

插入测试数据:

INSERT INTO city_map (name, geom) VALUES 
('人民公园', ST_GeomFromText('POLYGON((0 0, 10 0, 10 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 = '人民公园';

数据库连接

点击 Connect 按钮获取远程连接地址,可接入任意数据库客户端或后端代码。推荐使用 DBeaver 等工具连接。

连接模式分为三种:

  1. Direct Connection (直连):不支持 IPv4,适合有 IPv6 环境。
  2. Session Pooler:支持 IPv4,类似直连。
  3. Transaction Pooler (事务池):自动维护连接池,适合无状态服务或边缘函数。

Supabase SDK

Supabase SDK 可将前端框架(如 React、Vue)轻松接入后端。以 Vue 为例,初始化工程后安装 SDK:

npm install @supabase/supabase-js

配置客户端:

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

用户认证

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

即使将 API Key 暴露在前端,只要启用 RLS(行级安全策略),数据依然是安全的。

RLS 行级安全策略

RLS 约束哪行数据可以被哪些用户修改或读取。创建业务表 user_info 并关联系统用户表 auth.users。

开启表的 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);
CREATE POLICY "Users can insert own data" ON user_info
FOR INSERT WITH CHECK (auth.uid() = user_id);

前端查询时,SDK 会自动携带 JWT Token,确保只能访问授权数据。

文件存储

Storage 用于存放文件,适配 S3 标准。创建 Bucket 后可通过 SDK 操作。

配置 Bucket 的 RLS 策略,限制用户只能操作属于自己的文件夹。上传时需指定路径为用户 ID,否则会被拒绝。

边缘函数

Edge Function 类似于 Cloudflare Worker,支持运行服务端逻辑。可通过文档集成到 AI 工具中扩展能力。

实时推送

RealTime 功能监听数据库变化,通过 Websocket 推送通知到客户端。例如订阅消息表变化实现弹窗提醒。

本地部署

Supabase 完全开源,可使用 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

启动后访问 localhost:8000(需根据 .env 配置端口),默认账号密码可在文档获取。自托管版本同样支持数据库鉴权、文件存储及 SDK 连接。

目录

  1. 数据库核心
  2. 数据库连接
  3. Supabase SDK
  4. RLS 行级安全策略
  5. 文件存储
  6. 边缘函数
  7. 实时推送
  8. 本地部署

更多推荐文章

查看全部
  • FlashTable 实测:AI 赋能低代码开发与企业级应用构建
  • Spring Boot 数据缓存集成与性能优化实践
  • AI Agent 开发入门:零基础学习指南
  • π0.5 开源:Physical Intelligence GitHub 仓库 9 月更新
  • 2026 年 AI 大数据与大模型就业趋势分析
  • Open WebUI MCPo 项目解析:将 MCP 工具转换为 OpenAPI 接口
  • Windows 系统下 Neo4j 与 JDK 安装配置实战
  • Docker 安装部署全流程使用指南(Linux 通用版)
  • CTFHub Git 泄露漏洞利用与 Flag 获取实战
  • 深入理解 Claude Code:架构、上下文与工具系统
  • WebApi 项目集成企业微信和公众号
  • Ollama Windows 安装与使用指南:本地运行 Llama、DeepSeek 大模型
  • OpenCode 接入 Kimi K2.5 配置与实战指南
  • ESP32 无人机合规识别实战:ArduRemoteID 开源方案解析
  • MCP 插件配置指南:browser-tools-mcp 示例
  • Python 利用 wxpy 分析微信好友地区与性别分布
  • BK7258 与 LiveKit WebRTC 端侧适配实战
  • 一种光伏产品缺陷检测 AI 深度学习算法
  • 推荐系统 10 大必读经典论文:构建完整知识体系
  • 使用 LLaMA-Factory 微调大语言模型实战指南

相关免费在线工具

  • 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