一句話說明

Supabase 是開源的 Firebase 替代方案，讓你用 PostgreSQL 快速建後端。

這篇文章要解決什麼問題？

你想做一個有會員系統、能存資料、能上傳檔案的應用程式。傳統做法是：

1. 架一台伺服器
2. 裝資料庫
3. 寫 API
4. 做登入系統
5. 設定檔案儲存

這些事情加起來可能比你的核心功能還要花時間。

BaaS（Backend as a Service）就是解決這個問題的——把後端服務打包好給你用，你只要專注寫前端。

Supabase 是什麼？

Supabase = PostgreSQL 資料庫 + 自動 API + 登入系統 + 檔案儲存 + 即時同步

翻譯成白話：

Supabase vs Firebase：一張表看懂差異

如果你聽過 Firebase，這張表幫你快速理解 Supabase 的定位：

什麼時候選 Supabase？

• 你的資料有關聯性（例如：使用者有多筆訂單）
• 你想用 SQL 查詢
• 你不想被特定廠商綁住
• 你可能需要自架（self-host）

什麼時候選 Firebase？

• 你需要快速做原型
• 資料結構簡單、常變動
• 你已經在 Google 生態系裡

Supabase 核心功能速覽

1. Database：PostgreSQL 資料庫

-- 建立一個 todos 資料表
create table todos (
  id serial primary key,
  task text not null,
  is_done boolean default false,
  created_at timestamp default now()
);
Code language: JavaScript (javascript)

這段在幹嘛：建一個待辦事項表，有自動編號的 id、任務內容、完成狀態、建立時間。

Supabase 會自動幫這個表產生 REST API，你不用再寫後端程式。

2. Auth：登入系統

// 用 Email 註冊
const { data, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'password123'
})
Code language: JavaScript (javascript)

這段在幹嘛：呼叫 Supabase 的註冊 API，傳入 email 和密碼，自動處理帳號建立。

支援的登入方式：

• Email / 密碼
• Magic Link（免密碼，寄連結登入）
• OAuth（Google、GitHub、Discord 等）
• 手機簡訊

3. Storage：檔案儲存

// 上傳檔案到 avatars bucket
const { data, error } = await supabase.storage
  .from('avatars')
  .upload('user1/profile.png', file)
Code language: JavaScript (javascript)

這段在幹嘛：把檔案上傳到名為 avatars 的儲存桶，路徑是 user1/profile.png。

4. Edge Functions：自訂邏輯

// supabase/functions/hello/index.ts
Deno.serve(async (req) => {
  const { name } = await req.json()
  return new Response(
    JSON.stringify({ message: `Hello ${name}!` }),
    { headers: { 'Content-Type': 'application/json' } }
  )
})
Code language: JavaScript (javascript)

這段在幹嘛：建立一個 API 端點，接收 JSON 裡的 name，回傳打招呼訊息。

Edge Functions 用 Deno（TypeScript）執行，適合放自訂邏輯。

5. Realtime：即時同步

// 監聽 todos 表的變動
const subscription = supabase
  .channel('todos-changes')
  .on('postgres_changes',
    { event: '*', schema: 'public', table: 'todos' },
    (payload) => {
      console.log('資料變動:', payload)
    }
  )
  .subscribe()
Code language: JavaScript (javascript)

這段在幹嘛：訂閱 todos 表的所有變動（新增、修改、刪除），有變動時自動收到通知。

適合做聊天室、協作工具、即時儀表板。

建立第一個 Supabase 專案

步驟 1：註冊帳號

前往 supabase.com，用 GitHub 或 Email 註冊。

步驟 2：建立新專案

1. 點擊「New Project」
2. 選擇組織（Organization）
3. 填寫專案名稱
4. 設定資料庫密碼（重要！記下來）
5. 選擇地區（建議選離使用者近的）

等待約 2 分鐘，專案就建好了。

步驟 3：取得連線資訊

在專案設定（Settings > API）可以找到：

Supabase Dashboard 導覽

建好專案後，Dashboard 左側選單是這樣的：

Vibe Coder 重點

Table Editor 是你最常用的——可以直接在網頁上新增資料表、欄位、資料，不用寫 SQL。

SQL Editor 有 AI 輔助功能，可以用自然語言產生 SQL。

本系列文章預覽

這是 Supabase 系列的第一篇，後續文章會帶你：

Vibe Coder 檢查點

開始使用 Supabase 時，確認這些事：

• [ ] 有沒有記下資料庫密碼？（忘記只能重設）
• [ ] anon key 和 service_role key 分清楚了嗎？
• [ ] 知道自己的專案 URL 在哪裡找嗎？
• [ ] 資料需要關聯性嗎？（需要就選 Supabase）

延伸：知道就好

這些進階功能，遇到再查：

• Row Level Security（RLS）：資料庫層級的權限控制，下一篇會教
• Database Webhooks：資料變動時自動呼叫外部 API
• Postgres Extensions：擴充功能，例如全文搜尋、向量搜尋
• Branching：類似 Git，建立資料庫分支做測試

小結

下一篇我們會實際操作資料庫——建表、寫資料、設定權限。

參考資源

• Supabase 官方網站
• Supabase 官方文件
• Supabase vs Firebase 比較