SelfHostSelfHost

Supabase 入门指南：让前端开发者也能轻松搞定后端的神器

9 months ago

先说点实在的

你是不是经常遇到这种情况：想做个小项目练手，前端三下五除二搞定了，但一想到后端就头大——要搭数据库、写 API、做用户认证、处理文件上传...最后直接放弃了？

别急，今天介绍的 Supabase 就是来拯救你的。简单来说，它就是一个开源版的 Firebase，但用的是大家更熟悉的 PostgreSQL 数据库，而且完全免费就能搞定大部分需求。

https://appstore.lazycat.cloud/#/shop/detail/cloud.lazy.app.supabase

Supabase 到底是个啥？

Supabase 是一个 Postgres 开发平台，提供了托管的 Postgres 数据库、身份认证和授权、自动生成的 API、函数、文件存储、AI 和向量/嵌入工具包，以及管理面板等功能。

听起来很厉害对吧？其实说白了就是：你只需要会写前端代码，Supabase 帮你搞定所有后端的事儿。

核心功能

  • PostgreSQL 数据库：不是那种简单的 NoSQL，而是功能完整的关系型数据库
  • 用户认证：邮箱密码、第三方登录（Google、GitHub 等）统统支持
  • 实时数据同步：数据一变化，所有用户立马能看到，做聊天室、协作工具特别方便
  • 自动生成 API：建好表就自动有了 REST API，不用自己写接口
  • 文件存储：图片、视频上传下载，跟用网盘一样简单
  • 行级权限控制：谁能看什么数据，精确到每一行

最爽的是，这些功能在免费套餐里就够用了！对于个人项目和小型应用来说，基本不花钱就能搞定。

5分钟快速上手

应用启动后，会引导你设置账户密码，登录后进入首页：

image.png

创建你的第一个表

进入项目后，点击左侧的 "Table Editor"，创建一个 todos 表：

-- 在 SQL Editor 里运行这段代码
create table todos (
  id serial primary key,
  task text not null,
  is_complete boolean default false,
  created_at timestamp with time zone default timezone('utc'::text, now())
);

-- 开启实时同步功能
alter publication supabase_realtime add table todos;

image.png

在前端使用

安装 Supabase 客户端库，通过 npm 安装 @supabase/supabase-js，然后使用项目 URL 和 API 密钥初始化客户端：

npm install @supabase/supabase-js

image.png

点击右上角，在这里拿到你的项目 URL 和密钥

image.png 创建一个简单的 Todo 应用：

// 初始化 Supabase 客户端
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://你的项目ID.supabase.co'
const supabaseKey = '你的匿名密钥'

const supabase = createClient(supabaseUrl, supabaseKey)

// 添加任务
async function addTodo(task) {
  const { data, error } = await supabase
    .from('todos')
    .insert([{ task: task }])
  
  if (error) console.log('出错了：', error)
  else console.log('添加成功！', data)
}

// 获取所有任务
async function getTodos() {
  const { data, error } = await supabase
    .from('todos')
    .select('*')
    .order('created_at', { ascending: false })
  
  return data
}

// 标记完成
async function completeTodo(id) {
  const { error } = await supabase
    .from('todos')
    .update({ is_complete: true })
    .eq('id', id)
}

// 删除任务
async function deleteTodo(id) {
  const { error } = await supabase
    .from('todos')
    .delete()
    .eq('id', id)
}

本地运行后的效果，添加一条记录：

image.png

就这么简单！不需要写任何后端代码，你已经有了一个完整的 CRUD 应用。

进阶玩法：实时协作

Supabase 的实时功能允许你监听数据库的变化，比如监听 messages 表的插入操作，当有新消息时实时更新。想做个多人实时协作的 Todo 应用？加几行代码就搞定：

// 监听 todos 表的变化
supabase
  .channel('todos-channel')
  .on('postgres_changes', 
    { event: '*', schema: 'public', table: 'todos' },
    (payload) => {
      console.log('数据变化了！', payload)
      // 根据变化类型更新界面
      if (payload.eventType === 'INSERT') {
        // 有人添加了新任务
        addTodoToUI(payload.new)
      } else if (payload.eventType === 'UPDATE') {
        // 有人更新了任务
        updateTodoInUI(payload.new)
      } else if (payload.eventType === 'DELETE') {
        // 有人删除了任务
        removeTodoFromUI(payload.old.id)
      }
    }
  )
  .subscribe()

现在你的应用就支持多人实时协作了！任何人的操作，其他人都能立即看到。

实战项目推荐

1. 实时聊天室

利用 Supabase 的实时功能，20 分钟就能做出来：

// 发送消息
async function sendMessage(message) {
  await supabase.from('messages').insert([{
    content: message,
    user_id: (await supabase.auth.getUser()).data.user.id,
    username: (await supabase.auth.getUser()).data.user.email
  }])
}

// 监听新消息
supabase
  .channel('messages')
  .on('postgres_changes', 
    { event: 'INSERT', schema: 'public', table: 'messages' },
    (payload) => {
      displayMessage(payload.new)
    }
  )
  .subscribe()

项目首页提供了各个项目的源码，可以下载下来运行一下

image.png

与 Next.js 完美集成

Next.js 14 与 Supabase 的集成变得更加简单，通过 Server Components 可以在服务器端直接操作数据库，通过 Server Actions 可以将数据变更逻辑放在负责获取数据和渲染页面的组件旁边：

// app/todos/page.js
import { createClient } from '@/utils/supabase/server'

export default async function TodosPage() {
  const supabase = createClient()
  
  // 直接在服务器组件中获取数据
  const { data: todos } = await supabase
    .from('todos')
    .select('*')
    .order('created_at', { ascending: false })
  
  // Server Action：处理表单提交
  async function addTodo(formData) {
    'use server'
    
    const task = formData.get('task')
    const supabase = createClient()
    
    await supabase.from('todos').insert([{ task }])
    revalidatePath('/todos')
  }
  
  return (
    <div>
      <form action={addTodo}>
        <input name="task" placeholder="添加新任务..." />
        <button type="submit">添加</button>
      </form>
      
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.task}</li>
        ))}
      </ul>
    </div>
  )
}

总结

Supabase 特别适合：

  • 个人项目和 Side Project
  • MVP 快速验证
  • 中小型 SaaS 应用
  • 实时协作类应用
  • 不想折腾后端的前端开发者

最重要的是，它的免费额度对个人开发者来说完全够用：

  • 500MB 数据库空间
  • 2GB 文件存储
  • 5万月活用户
  • 200万 Edge Function 调用

相关资源：

作者
天天