为什么用 Supabase?

想象你在开发一个应用。你需要一个数据库来存储用户数据，一个身份验证系统来管理登录，一个文件存储服务来存储图片和文件，并且需要实时更新让用户能够即时看到更新。

你可能需要花几周的时间来搭建一个后端系统，使用PostgreSQL，编写API，保护端点的安全，以及处理认证事宜。

或者…

你可以使用 Supabase，就能在几分钟内轻松搞定。
使用 Supabase，你就能轻松在几分钟内搞定。

（注：此处调整了句子结构，使其更符合中文表达习惯，同时保留了原意。）

最终调整如下：

你可以使用 Supabase，就能轻松在几分钟内搞定。

Supabase就像是聘请了一位免费且从不说闲话的资深后端开发人员。它为你提供了一个即用型的PostgreSQL数据库实例、认证系统、文件存储以及实时API功能——所有这些功能都整合在一个简单易用的仪表盘中。

现在，让我们开始吧，一点点学会它。

第一章：什么是Supabase？为什么要使用它？

把 Supabase 当作带脑子的 Firebase。

1.1 Supabase 与 Firebase：整体比较

1.2 Supabase 什么时候用？

✅ 你需要包含关系的数据结构（例如，用户和帖子）。
✅ 你喜爱SQL，并需要强大的查询功能。
✅ 你想要一个开源的后端，可以自行托管或随时迁移或托管。
✅ 你需要实时更新，但又希望具有SQL的灵活性。

如果你觉得这些描述很贴切的话，Supabase就很适合你。

第2章：五分钟搞定 Supabase

你可以比煮咖啡还快地搭建 Supabase。下面是如何操作：

2.1 创建 Supabase 项目

1. 访问 supabase.com，并使用 GitHub 账号登录。
2. 点击 “新建项目” 按钮。
3. 输入项目名称，设置数据库密码，并选择一个地区。
4. 点击 “创建项目” 按钮，并等待几分钟左右。

🎉 搞定啦！你现在有了一个实时后台啦！

2.2 安装 Supabase 的 SDK

要与 Supabase 进行交互，请在你的应用中安装 SDK。

关于 JavaScript/React/Next.js

npm install @supabase/supabase-js

使用 npm 安装 @supabase/supabase-js 包。在命令行中运行此命令来安装 Supabase 的 JavaScript 客户端库。

关于 Python

在命令行中运行以下命令安装supabase：
pip install supabase

2.3 将您的应用连接 Supabase:

在你的应用中，初始化 Supabase 客户端。

// 导入 Supabase 客户端创建函数
import { createClient } from '@supabase/supabase-js';  

// 设置 Supabase 项目的 URL
const supabaseUrl = 'https://your-project-url.supabase.co';  

// 设置匿名 API 密钥
const supabaseKey = 'your-anon-key';  

// 使用 URL 和 API 密钥创建 Supabase 客户端
const supabase = createClient(supabaseUrl, supabaseKey);

你的应用现在可以立即与数据库对话了！

第3章：与Supabase数据库工作

数据库就像是打了鸡血的电子表格。Supabase 使用 PostgreSQL，它是世界上功能最强大的数据库之一。

3.1 创建一个数据表:

进入 Supabase 控制台 → 数据库 → 表 → 新建表，并新建一个 users 表：

    创建一个名为 users 的表 (  
        id UUID PRIMARY KEY 默认生成 uuid_generate_v4(),  
        name TEXT NOT NULL,  
        email TEXT UNIQUE NOT NULL,  
        created_at TIMESTAMP 默认当前时间戳  
    );

3.2 在 Supabase 插入数据

    const { data, error } = await supabase  
        .from('users')  
        .insert([{ name: 'John Doe', email: 'john@example.com' }]);

3.3 查询 Supabase 的数据

const { data, error } = await supabase  
    .from('users')  
    .select('*')  
    .eq('email', 'john@example.com');

第4章：身份验证 — 用户注册和登录

Supabase 提供了使用电子邮件、OAuth（如 Google、GitHub 等）和一次性登录链接的内置身份验证。

4.1 注册一个用户

// 注册新用户
const { user, error } = await supabase.auth.signUp({  
    email: 'user@example.com',  // 邮箱用于创建新账户
    password: 'securepassword'  // 密码用于创建新账户
});
// user 用于存储新注册的用户信息，error 用于存储可能的错误信息

4.2 登录一个用户

    const { user, error } = await supabase.auth.signInWithPassword({  
        email: 'user@example.com',  
        password: 'securepassword'  
    });

//这里我们用电子邮件和密码尝试登录用户账户。

4.3 检查当前登录用户 (JavaScript)

const { data: 用户数据 } = await supabase.auth.getUser();

4.4 用户注销

    await supabase.auth.signOut(); // 等待注销用户认证，signOut 表示注销用户

第5章：Supabase存储功能（如何上传图片和文件）

Supabase 提供了类似于 S3 的对象存储，用于存储 图片、PDF和视频 等。

5.1 上传文件

    const file = document.querySelector('#file-input').files[0];  

    const { data, error } = await supabase  
        .storage  
        .from('avatars')  
        .上传(`profile-pictures/${file.name}`, file);

5.2 获取公开文件的链接

const { data } = supabase.storage  
    .from('avatars')  
    .getPublicUrl('profile-pictures/user123.png'); // 获取用户头像的公共URL

5.3 获取已签名的安全文件 URL

    const { data } = await supabase  
        .storage  
        .from('avatars')  
        .createSignedUrl('profile-pictures/user123.png', 600);

由于没有提供源代码周围的解释性文本，这里的翻译仅保留了代码部分。如果有任何注释或解释性文本，应该将其翻译成通俗的中文。

第6章：Supabase 实时更新 — 让您的应用实现即时更新

想象你正在构建一个聊天应用或一个实时仪表板。你希望用户能够立刻看到新消息或更新的数据，无需刷新页面。这时，Supabase 实时就派上用场了。

Supabase 使用 PostgreSQL 的 **LISTEN/NOTIFY** 功能，每当数据发生变化时实时更新。无需手动刷新！

6.1 在表上启用实时性

默认情况下，Supabase 不提供实时更新 功能。你需要手动开启此功能。

1. 前往 Supabase 控制面板 → 数据库 → 复制。
2. 点击 开启实时更新 你要启用实时功能的表（例如，messages 表）。

✅ 现在你的表实时更新变化。

6.2 订阅数据库变化

一旦实时启用，你的前端可以监听变化事件，如INSERT、UPDATE或DELETE事件。

在聊天软件中查看新消息

    supabase  
        .channel('实时消息频道')  
        .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, (payload) => {  
            console.log('新消息:', payload.new);  
        })  
        .subscribe();

✅ 每当在 messages 中添加新行时，你的应用会 立即收到数据 — 就像 WhatsApp 一样即时

第7章：安全与行级安全策略（RLS）

如果 Supabase 实时功能 像一条高速路，那么 行级安全（RLS，行级安全） 就是这条路上的交通管制。

默认情况下，Supabase会阻止所有数据库访问请求，除非你明确允许访问。这被称为行级安全（RLS，Row-Level Security）——这一强大的功能确保用户只能看到他们被授权访问的数据。

7.1 开启行级安全

1. 前往 Supabase 控制台 → 数据库 → 您的表 页面。
2. 点击 安全与策略选项卡。
3. 启用行级安全 (RLS)。
4. 接下来，您需要 创建策略 来允许访问。

7.2 让用户只能看到自己的数据

假设你有 users 表，并且每个用户只能看到自己的个人资料。

SQL 规则

创建名为 "用户可以查看个人资料" 的策略，针对 users 表的 SELECT 操作，条件是 (auth.uid() = id)。

当用户运行如下：

const { data } = await supabase.from('users').select('*'); // 从 'users' 表中获取所有数据

他们将只能看到自己的个人资料，但看不到其他用户的资料！

7.3 允许已验证用户添加数据

如果你想仅限登录用户发帖，可以使用这个策略：

    创建策略名为 "已认证的用户可以插入帖子"  
    在 posts 表上的插入操作  
    检查条件为 (auth.role() = '已认证')

✅ 目前，只有登录的用户才能向数据库添加新的帖子。

7.4 限制只有所有者可以进行更新和删除

假设你有一个博客app，你希望用户只能编辑和删除自己的帖子。

    创建策略名为 "用户可以编辑或删除自己的帖子"  
    应用于 posts 表的，对于更新和删除操作  
    使用条件(auth.uid() = user_id);

✅ 现在，用户只能更新或删除自己的帖子，防止他人未经授权的修改！

第八章：Supabase的无服务器API

想象你需要一个自定义的 API 端点，它需要满足以下条件：

• 保存前清理用户数据
• 调用外部API
• 执行复杂的后端逻辑

你可以用Express.js搭建一个服务器…… 或者你可以使用Supabase边缘功能——无服务器功能，它们运行在靠近用户的地点，以实现快速响应。

8.1 配置 Supabase 边缘功能

1. 先装一下 Supabase CLI（Supabase命令行界面）：

npm install -g supabase

    supabase functions new hello-world

注：此命令用于创建一个新的函数，名为 'hello-world'。

1. 打开 index.ts 文件，然后输入你的函数代码：

    import { serve } from "https://deno.land/std/http/server.ts";  

    serve(async (req) => {  
       return new Response(JSON.stringify({ message: "来自 Supabase 边缘的问候，你好！" }), {  
          headers: { "Content-Type": "application/json" },  
       });  
    });

supabase functions deploy hello-world
（部署名为'hello-world'的函数到Supabase）

✅ 您的功能现已通过 API 接口上线并可使用！

第9章：为高流量扩展Supabase的方案

当你的应用拥有数百万用户时，你需要优化Supabase以提升速度和稳定性。

9.1 使用 PgBouncer 连接池

过多的数据库连接可能会拖慢你的应用速度。
✅在 Supabase 控制面板中的数据库设置里启用 PgBouncer。

9.2 增加索引来加快查询速度

如果你的查询慢，可以在经常被搜索的列上添加 索引 以加快查询速度。

在 users 表的 email 列上创建一个名为 idx_users_email 的索引

✅ 现在，搜索邮件的速度超快！🚀

9.3 使用 CDN 来存储文件

如果你的应用提供数百万张图片和视频，使用CloudFront 或 Cloudflare CDN进行全球缓存。

    const { data } = await supabase  
        .storage  
        .from('avatars')  
        .createSignedUrl('profile-pictures/user123.png', 600);

注：以上为代码片段，展示了如何使用supabase的storage模块从'avatars'存储桶中创建一个签名URL。

第十章：将Supabase部署到生产环境中的应用

请在准备上线时，请遵循这些最佳实践。

✅ 不要在前端代码里暴露**service_role**密钥（key）。
✅ 为 Supabase API 设置定制域名（https://api.myapp.com）。
✅ 这种做法使用环境变量（.env）来存储 API 密钥。
✅ 在 Supabase 日志中监控数据库性能。

🎉 现在你的 Supabase 应用已经准备好供真实世界的用户使用了！

最后的感想：成为 Supabase 高手

厉害了！你现在明白了从基本设置到如何扩展以服务数百万用户的所有内容。🚀

💡 接下来会是什么呢？

• 构建真实世界的应用程序，比如聊天应用、仪表板和社交网络。
• 尝试使用 Supabase + Next.js、React Native 或 Flutter。
• 加入 Supabase Discord，为开源社区出一份力。

编程愉快！加油！🚀🔥

特别感谢你加入我们社区

在你走之前:

• 记得给作者点赞并关注👏️
• 关注我们: X | LinkedIn | YouTube | Newsletter | Podcast | Differ
• 试试CoFeed，以智能方式掌握最新科技资讯 🧪
• 在Differ上免费创建自己的AI博客 🚀
• 加入我们的内容创作者社群Discord社区 🧑‍💻
• 更多内容，请访问 plainenglish.io 和 stackademic.com