Supabase 完整教學 2026：108K 星開源 Firebase 替代品，Postgres 資料庫、Auth 認證、Storage 儲存、Edge Functions 一次學會

直接答案：Supabase 是一個開源（Apache-2.0）的 Backend-as-a-Service 平台，用「Firebase 的開發體驗 + Postgres 的企業級能力」幫你把資料庫、身分認證、檔案儲存、即時訂閱與 Edge Functions 全部管好——你只要寫 SQL 與前端程式碼，不用自己養伺服器。

為什麼 2026 年還要學 Supabase？

如果你自架過 n8n 這類工具，大概能體會「開源取代 SaaS」的吸引力：資料在自己手上、沒有 vendor lock-in、隨時可以搬走。Supabase 是這個哲學在後端領域的代表作——GitHub 上 108,744 顆星（2026-09-02），授權 Apache-2.0，背後是 Postgres 這顆 30 年歷史的資料庫引擎。

它的定位一句話：Firebase 能給你的開發體驗，Supabase 用開源工具全部重做一遍，而且資料庫是真正的 SQL。

架構拆解：它不是一套軟體，是五套開源軟體

graph TD
    A[你的 App<br/>Web / Mobile] --> B[PostgREST<br/>REST API]
    A --> C[GoTrue<br/>Auth 認證]
    A --> D[Storage API<br/>檔案儲存]
    A --> E[Realtime<br/>WebSocket 即時]
    A --> F[pg_graphql<br/>GraphQL API]
    B --> G[(Postgres<br/>你的資料)]
    C --> G
    D --> G
    E --> G
    F --> G
    H[Edge Functions<br/>Deno 邊緣函式] --> G

這正是 Supabase 的關鍵設計：每個元件都是獨立開源專案，核心架構文件公開，你隨時可以把整套東西搬到自己家（自架）或本機 Docker 裡跑——不會像 Firebase 一樣，哪天想搬走才發現無處可逃。

Supabase vs Firebase：選哪個？

怎麼選？ 專案從第一天就需要關聯資料、複雜查詢、或「以後可能想搬走」，直接選 Supabase；想要最省事的即時同步與離線體驗、且不介意綁 Google 生態，Firebase 仍是好選項。想比較另一種「全 TypeScript 反應式後端」的路線，可以讀我們寫過的 Convex 完整教學。

快速開始：本機開發（免費、免註冊）

Supabase 官方建議的工作流是「本機開發 + 雲端部署」。先裝 CLI 與 Docker：

# npm 安裝（當專案 dev dependency）
npm install supabase --save-dev

# 或 Homebrew
brew install supabase/tap/supabase

在你的專案裡初始化並啟動整套本機服務：

npx supabase init        # 產生 supabase/ 設定目錄
npx supabase start       # 用 Docker 啟動 Postgres + Auth + Storage + Edge Functions

啟動後打開 http://localhost:54323 就是本機 Dashboard。本機開發的優點很實際：免費、可離線、不消耗雲端額度、資料不會外洩——supabase start 只需要 Docker，不依賴任何雲端帳號。若你人在不信任的公共網路，記得先建立只綁 127.0.0.1 的 Docker network，千萬別把本機開發環境公開上網。

實戰 1：資料庫 + 自動 API（含 Row Level Security）

在 Dashboard 的 SQL Editor 執行這段，建立一張表並開啟列級安全：

create table articles (
  id bigint generated always as identity primary key,
  title text not null,
  body text,
  author_email text default auth.email(),
  created_at timestamptz default now()
);

-- 開啟 Row Level Security（RLS）：沒開政策 = 誰都讀不到
alter table articles enable row level security;

-- 公開讀取政策
create policy "articles 可公開讀取" on articles
  for select using (true);

-- 只有作者自己能改自己的文章
create policy "作者可更新自己的文章" on articles
  for update using (auth.email() = author_email);

RLS 是 Supabase 安全模型的核心：就算有人偷到 anon key，沒過政策就讀不到資料。很多新手專案「忘了開 RLS」導致資料裸奔，這點務必養成習慣。

表格建好後，REST API 就自動存在了——不需要寫任何 controller。用官方 SDK 讀寫：

// npm install @supabase/supabase-js（2026 年最新 v2.114）
import { createClient } from '@supabase/supabase-js'

// URL 與 anon key 從 Dashboard → Project Settings → API 拿
const supabase = createClient('https://你的專案.supabase.co', '你的anon公開金鑰')

// 讀取（等同 GET /rest/v1/articles）
const { data, error } = await supabase
  .from('articles')
  .select('*')
  .order('created_at', { ascending: false })
  .limit(10)

// 寫入（等同 POST /rest/v1/articles）
const { data: inserted, error: insertError } = await supabase
  .from('articles')
  .insert({ title: '我的第一篇 Supabase 文章', body: 'Hello RLS' })

前後端都適用這套 API；TypeScript 專案還可透過 supabase gen types typescript 直接從資料庫產生型別。

實戰 2：Auth 認證（Email + Google）

// 註冊
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: '超強密碼',
})

// 登入
const { data: session } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: '超強密碼',
})

// 監聽 session 變化（前端路由守衛常用）
supabase.auth.onAuthStateChange((event, session) => {
  console.log('auth event:', event, session?.user?.email)
})

在 Dashboard 的 Authentication → Providers 打開 Google/GitHub 開關、貼上憑證，OAuth 登入就完成了。前端登入後，auth.uid() / auth.email() 就能在 SQL 政策裡辨識使用者——這就是上一節 RLS 政策能「只讓作者改自己文章」的原因。

實戰 3：Storage 與 Realtime

Storage：上傳檔案並限制只有登入者能讀：

const { data, error } = await supabase.storage
  .from('avatars')                    // Dashboard 先建立 bucket
  .upload('me.webp', file)

// 產生公開 URL（若 bucket 有設公開政策）
const { data: url } = supabase.storage
  .from('avatars')
  .getPublicUrl('me.webp')

Realtime：訂閱表格異動，聊天室、協作白板、即時通知都靠這個：

const channel = supabase
  .channel('articles-changes')
  .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'articles' },
       (payload) => console.log('新文章！', payload.new))
  .subscribe()

實戰 4：Edge Functions（無伺服器函式）

npx supabase functions new hello-world   # 建立函式
npx supabase functions deploy hello-world  # 部署

函式本體是 Deno + TypeScript，寫法跟一般 serverless 很像，適合放需要伺服器機密的邏輯（例如呼叫 LLM API）——因為瀏覽器端的 anon key 不該有呼叫付費 API 的權限。

AI 開發者的加分題：內建向量資料庫

對做 RAG 的人來說，Supabase 最香的是 AI + Vector 工具包：用 Postgres + pgvector 直接當向量資料庫，支援語意搜尋、關鍵字搜尋與混合搜尋（hybrid search），還能在 Edge Functions 裡直接產生 embeddings、串 OpenAI / Hugging Face / LangChain / LlamaIndex。官方案例中，Firecrawl 甚至從 Pinecone 搬到 Supabase 省掉一套基礎設施。此外 Supabase 官方提供 MCP server 與 Agent Skills（npx skills add supabase/agent-skills），讓 Claude Code、Cursor 這類 AI 編碼代理直接讀你的 schema 幫忙寫程式——如果你還沒搞懂 MCP 是什麼，建議先讀我們的 MCP 完整教學。

價格：免費方案夠不夠用？

計費是「方案費 + compute 實例費」雙軌制：Pro 以上每台專案實例（Micro 約 $10/月起，ARM 架構）另外算，方案內含的 $10 額度剛好抵一台。個人專案 Free 綽綽有餘；要注意的是用量型服務（Auth MAU、Storage、Egress）超過方案額度後會按量計費，上線前記得在 Dashboard 設好用量警示。

什麼時候「不該」用 Supabase？

誠實的結論：如果專案只需要一張表、五個欄位、三天內要上線的內部工具，用 Supabase 反而多餘——SQLite 配 FastAPI 或直接套 n8n 就能搞定。但當你開始需要使用者帳號、檔案上傳、即時通知、RLS 權限模型，而且不想為了這些東西各自養一台伺服器時，Supabase 的「一個平台全包 + 隨時可自架」就是目前開源圈最成熟的答案。

延伸閱讀

• Convex 完整教學：全 TypeScript 的反應式後端平台，串接資料庫、即時同步、AI Agent 一次搞定
• MCP 完整教學 2026：什麼是 Model Context Protocol？從架構、三大原語到 Python 實作第一個 MCP Server 的權威指南
• FastAPI 完整教學 2026：從安裝、路由、Pydantic v2 到依賴注入與部署，Python 最強 API 框架實戰指南

資料來源

• Supabase GitHub 官方 repo（108,744 星、Apache-2.0，存取日期 2026-09-02）：https://github.com/supabase/supabase
• 官方文件 Local Development & CLI：https://supabase.com/docs/guides/local-development
• 官方文件 AI & Vectors：https://supabase.com/docs/guides/ai
• 官方定價頁：https://supabase.com/pricing