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

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

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

技术博主发布于 2026/4/5更新于 2026/7/2353 浏览
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'
 supabaseKey = 
 supabase = (supabaseUrl, supabaseKey)
const
'your-anon-key'
const
createClient

用户认证

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. 本地部署
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • NFT 元数据去中心化存储与智能合约集成实战
  • Python 空洞卷积网络架构与 PAMAP2 数据集实验分析
  • DeerFlow 2.0 生产级 AI Agent 框架的 Docker 部署与并行编排
  • 滑动窗口算法详解:水果成篮问题解法
  • C++ 高阶数据结构:二叉搜索树(BST)
  • ZeroClaw 开源:基于 Rust 的轻量级 AI Agent 框架
  • 机器人建模(URDF)与仿真配置
  • 直流无刷电机 FOC 控制算法
  • Python 爬虫实战:跨境电商数据采集与代理 IP 策略
  • WebGIS、无人机与 AI 融合:构建下一代智能巡检系统
  • 7 系列 FPGA 万兆以太网通信实现方案
  • 前端 WebSocket 实时通信实战:替代轮询方案
  • 基于 7 系列 FPGA 实现万兆网通信
  • Java IO 流:从字节流到字符流
  • AI 绘画创意文字制作全流程指南
  • ngrok 内网穿透工具详解:免费 HTTPS 与本地开发调试
  • ToClaw:基于 OpenClaw 的云端 AI 自动化助手评测
  • 宇树 G1 机器人强化学习训练环境搭建与奖励函数解析
  • Python Web 框架 Django 核心功能与实战
  • 大模型基于 llama.cpp 量化与 GGUF 格式详解

相关免费在线工具

  • 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