Supabase 的入門詳細介紹

Supabase 是什么？

簡單來說，Supabase 是一個開源的 Firebase 替代品。它提供了一整套后端即服務 (BaaS - Backend as a Service) 的工具，讓你能夠快速構建應用程序的后端，而無需自己從頭搭建和管理服務器、數據庫等基礎設施。

Supabase 的核心是強大的 PostgreSQL 數據庫，并在此基礎上提供了一系列圍繞數據、用戶、文件和自定義邏輯的功能。

為什么選擇 Supabase？（核心優勢）

開源和可移植性：
- 核心技術棧是開源的，這意味著你擁有更大的控制權。
- 你可以選擇使用 Supabase 官方的托管服務，也可以選擇在自己的服務器上自托管 (self-hosting)。
強大的 PostgreSQL 核心：
- 在這兒你會獲得的一個功能齊全的 PostgreSQL 數據庫，可以使用完整的 SQL 功能，包括復雜的查詢、事務、觸發器、函數和豐富的擴展 (如 PostGIS, pg_cron, pgvector)。
- 對于熟悉 SQL 的開發者來說，上手非常快。
易用性和開發者體驗：
- 提供直觀的圖形用戶界面 (Supabase Studio) 用于管理數據庫、用戶、存儲等。
- 自動生成 RESTful 和 GraphQL API，無需編寫后端代碼即可進行數據操作。
- 提供多種語言的客戶端庫 (JavaScript, Python, Dart/Flutter, Swift, Kotlin 等)，方便與前端和移動應用集成。
一體化解決方案：
- 數據庫 (Database): 核心功能。
- 用戶認證 (Authentication): 輕松實現用戶注冊、登錄、第三方登錄等。
- 文件存儲 (Storage): 存儲和提供圖片、視頻等大文件。
- 邊緣函數 (Edge Functions): 編寫和部署無服務器函數，處理自定義后端邏輯。
- 實時 (Realtime): 訂閱數據庫變更，實現實時數據同步。
成本效益：
- 提供慷慨的免費套餐，非常適合個人項目、學習和原型開發。
- 付費套餐的價格也相對透明和合理。

Supabase 的核心功能組件詳解：

數據庫 (Database - PostgreSQL):
- 表格編輯器： 在 Supabase Studio 中可以像操作電子表格一樣創建、修改表結構和數據。
- SQL 編輯器： 直接在瀏覽器中編寫和執行 SQL 查詢。
- 行級安全策略 (Row Level Security - RLS): 這是 Supabase 安全模型的基石。你可以基于用戶身份、角色等定義精細的數據訪問規則，確保用戶只能訪問他們被授權的數據。強烈建議啟用并配置 RLS。
- 數據庫函數和觸發器： 利用 PostgreSQL 的強大功能，在數據庫層面實現復雜的業務邏輯。
- 數據庫擴展： 安裝如 pg_cron (定時任務)、pgvector (向量數據，用于 AI/ML) 等擴展增強功能。
用戶認證 (Authentication):
- 多種登錄方式： 郵箱密碼、手機 OTP、魔法鏈接 (Magic Links)、匿名登錄。
- 社交登錄 (OAuth)： 支持 Google, GitHub, Apple, Facebook, Twitter, Azure, GitLab 等眾多提供商。
- JWT (JSON Web Tokens)： 使用行業標準的 JWT 進行會話管理。
- 用戶管理： 在 Supabase Studio 中查看和管理用戶。
- 與 RLS 集成： 認證信息 (如用戶 ID) 可以直接在 RLS 策略中使用。
文件存儲 (Storage):
- 存儲桶 (Buckets)： 類似于文件夾，用于組織文件。可以設置公開或私有。
- 權限控制： 可以為存儲桶和單個對象設置精細的訪問權限，與用戶認證系統和 RLS 集成。
- CDN 集成： 通常會自動配置 CDN，加速全球文件訪問。
邊緣函數 (Edge Functions):
- Serverless 架構： 無需管理服務器，按需執行。
- 使用 Deno (TypeScript/JavaScript)： 編寫函數邏輯。
- 用途： 處理 Webhooks、與第三方 API 交互、執行需要保密的后端邏輯、數據校驗和轉換等。
- 全球部署： 部署在靠近用戶的邊緣節點，減少延遲。
實時 (Realtime):
- 訂閱數據庫變更： 當數據庫中的數據發生插入、更新或刪除時，客戶端可以實時收到通知。
- 用途： 聊天應用、實時協作、實時儀表盤、通知系統等。
- 基于 PostgreSQL 的 LISTEN/NOTIFY 和 Supabase Realtime 服務器。
自動生成的 API:
- RESTful API: Supabase 使用 PostgREST 自動為你的數據庫表生成 RESTful API 端點。
- GraphQL API: 通過 pg_graphql 擴展，可以自動生成 GraphQL API。
Supabase Studio (管理后臺):
- 一個用戶友好的 Web 界面，用于管理上述所有功能：
  - 數據庫表和數據
  - SQL 編輯器
  - 用戶認證配置和用戶列表
  - 文件存儲桶和文件
  - 邊緣函數部署和日志
  - API 文檔和密鑰管理
  - 項目設置、日志、使用量監控等

如何開始使用 Supabase (基本步驟):

注冊賬戶： 訪問 Supabase 官網并注冊一個賬戶。
創建新項目：
- 登錄后，點擊 “New project”。
- 選擇一個組織 (Organization)。
- 填寫項目名稱 (Name)。
- 設置一個強大的數據庫密碼 (Database Password)，并務必妥善保存！ 創建后 Supabase 不會再顯示它。
- 選擇一個區域 (Region)，通常選擇離你的用戶最近的區域。
- 選擇定價計劃 (Pricing Plan)，通常從 “Free” 開始。
- 點擊 “Create new project”。
等待項目創建： 大約需要幾分鐘時間。
探索項目儀表盤 (Supabase Studio)：
- 項目創建完成后，你會被帶到項目儀表盤。
- 獲取 API 信息： 在 “Project Settings” -> “API” 頁面，你會找到：
  - Project URL: 你的項目 API 的基礎 URL。
  - anon (public) key: 用于客戶端的公共 API 密鑰。這個密鑰是安全的，可以暴露在前端代碼中，因為它會受到 RLS 策略的限制。
  - service_role key: 擁有超級權限的密鑰，絕不能暴露在前端或不安全的環境中。 僅用于后端服務、腳本或受信任的環境 (如 Edge Functions)。
安裝客戶端庫：
- 根據你的前端框架或語言選擇合適的 Supabase 客戶端庫。最常用的是 supabase-js (用于 JavaScript/TypeScript 項目)。
- 例如，在 JavaScript 項目中：npm install @supabase/supabase-js 或 yarn add @supabase/supabase-js

在你的應用中初始化 Supabase Client：

// 示例 (JavaScript)
import { createClient } from '@supabase/supabase-js';const supabaseUrl = 'YOUR_SUPABASE_URL'; // 從項目 API 設置中獲取
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'; // 從項目 API 設置中獲取const supabase = createClient(supabaseUrl, supabaseAnonKey);export default supabase;

開始使用 Supabase 功能：

數據庫操作 (CRUD):

// 插入數據
const { data, error } = await supabase.from('your_table_name').insert([{ some_column: 'someValue', other_column: 'otherValue' }]);// 查詢數據
const { data, error } = await supabase.from('your_table_name').select('*') // 或者 'column1, column2'.eq('some_column', 'someValue'); // 添加查詢條件

用戶認證：

// 郵箱密碼注冊
const { data, error } = await supabase.auth.signUp({email: 'user@example.com',password: 'securepassword123',
});// 郵箱密碼登錄
const { data, error } = await supabase.auth.signInWithPassword({email: 'user@example.com',password: 'securepassword123',
});// 獲取當前用戶
const { data: { user } } = await supabase.auth.getUser();// 退出登錄
const { error } = await supabase.auth.signOut();

文件存儲：

// 上傳文件
const { data, error } = await supabase.storage.from('your_bucket_name').upload('path/to/your_file.png', fileObject);// 下載文件
const { data, error } = await supabase.storage.from('your_bucket_name').download('path/to/your_file.png');