logo

quickActions

icon

Supabase

開源的 Firebase 替代方案。我們使用企業級開源工具來建構 Firebase 的功能。

template cover
部署次數2148 次
發布者zeaburZeabur
建立於2024-04-03
模板內的服務
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
標籤
CMSDatabaseToolAPI

部署 Supabase

Supabase 是一個很受歡迎的開源 Firebase 替代方案。它提供 Postgres 資料庫、身分驗證、API 與檔案儲存等一整套工具，是一個強大的後端解決方案。

Zeabur 簡化了這個複雜技術棧的部署。透過 Zeabur，你可以一鍵啟動完整可用的 Supabase 實例（包含 Kong Gateway、Authentication、PostgreSQL），無需手動設定。

你將學到什麼

在本教學中，我們會帶你完成：

  1. 從 Zeabur Marketplace 部署 Supabase 服務栈。
  2. 透過 Kong Gateway 存取 Supabase Dashboard。
  3. 取得你的 API keys 並連接你的應用。

⚠️ 重要限制：

UI 無 Logs： Supabase Studio 的「Logs」功能無法使用（因缺少 Vector 服務）。你必須在 Zeabur 控制台查看各服務的日誌。 無 MCP： 本模板不包含 AI Model Context Protocol 伺服器。

階段 1：部署服務

步驟 1：建立 Supabase 服務

Zeabur 透過模板市集提供「一鍵部署」。

選項 1：從專案頁面建立 Supabase 實例

  1. 登入你的 Zeabur Dashboard。
  2. 點擊 "Add Service" 按鈕。
  3. 選擇 "Template"（Marketplace）。
  4. 搜尋 Supabase。
  5. 選擇 Supabase 模板。你的服務（包含 PostgreSQL、minio、Kong）會立即開始部署。

步驟 2：存取 Supabase Dashboard（Kong Gateway）

與單獨的資料庫不同，Zeabur 上的 Supabase 透過 Kong Gateway 管理存取。你需要先取得憑證才能登入 UI。

  1. 進入專案內的 Kong 服務面板。
  2. 你會在此看到 Supabase Username 與 Supabase Password。
  3. 在 Kong 服務面板側邊的 Domains 中，點擊提供的 URL。
  4. 使用步驟 2 的憑證登入 Supabase Dashboard。

kong.png

階段 2：加固你的實例（關鍵）

⚠️ 警告： 此模板使用預設 API key 僅供示範。正式環境中你必須生成新的 key，否則任何知道預設 key 的人都能存取你的資料庫。

步驟 1：生成新的 keys

  1. 造訪 Supabase JWT Generator。
  2. 建立自訂 JWT_SECRET，並使用工具生成：
    • anon key
    • service_role key

步驟 2：更新 Kong 環境變數

  1. 回到 Zeabur 的 Kong 服務。
  2. 打開 Variables 分頁。
  3. 以新 keys 更新以下值：
    • JWT_SECRET: 你的自訂 secret
    • ANON_KEY: 你的新 anon key
    • SERVICE_ROLE_KEY: 你的新 service_role key

步驟 3：重啟服務

要套用這些安全變更，你必須重啟整個栈：

  1. 進入 Project Settings → General。
  2. 捲動到 Batch Actions。
  3. 點擊 Restart All。

階段 3：設定（Auth 與 Email）

預設情況下，Supabase 不能寄送 Email（magic link、密碼重設等）。你需要設定 SMTP 供應商。我們推薦 Resend，但任何 SMTP 都可使用。

步驟 1：設定 SMTP（Email）

  1. 進入你 Zeabur 專案中的 Auth 服務。
  2. 打開 Variables 分頁並新增：
    • GOTRUE_SMTP_HOST: smtp.resend.com（或你的供應商）
    • GOTRUE_SMTP_PORT: 587
    • GOTRUE_SMTP_USER: resend（或你的使用者名稱）
    • GOTRUE_SMTP_PASS: re_123...（你的 API Key）
    • GOTRUE_SMTP_ADMIN_EMAIL: [email protected]
    • GOTRUE_SITE_URL: https://your-project-domain.zeabur.app（使用者跳轉連結）
  3. 重啟 Auth 服務以套用變更。

步驟 2：設定 OAuth（Google/Apple）- 選用

若要啟用 Google 登入，請在 Auth 服務中新增：

  • GOTRUE_EXTERNAL_GOOGLE_ENABLED: true
  • GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: your-google-client-id
  • GOTRUE_EXTERNAL_GOOGLE_SECRET: your-google-secret
  • GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: https://your-project.zeabur.app/auth/v1/callback

注意：請將 your-project.zeabur.app 更新為你的實際網域。

步驟 3：手動測試 Email 功能

服務重啟後，可以透過終端機手動觸發註冊來驗證設定：

curl -X POST "https://your-project.zeabur.app/auth/v1/signup" \
  -H "Content-Type: application/json" \
  -H "apikey: YOUR_ANON_KEY" \
  -d '{
    "email": "[email protected]",
    "password": "yourpassword"
  }'

預期結果：

  • 收到 200 OK 的 JSON 回應
  • [email protected] 收到驗證信（請檢查垃圾郵件）

Email 疑難排解

  • Redirect URI 不符： 請確認 GOTRUE_SITE_URL 與實際部署網域完全一致。
  • SPF/DKIM： 使用自訂網域時，請確保 DNS 記錄符合 SMTP 供應商要求，避免被拒收。
  • 投遞： 初期信件常進垃圾郵件；可對網域進行「預熱」，或將信件標記為「非垃圾」。

階段 4：連接 Supabase

前置：取得你的 API keys

關鍵： 不要從 Supabase Studio 儀表板複製 keys，因為它可能顯示舊的預設 keys。

  1. 前往 Zeabur 的 Kong 服務 → Variables。
  2. 複製你的 ANON_KEY 與網域 URL。

選項 1：連接你的前端/應用

適用：連接 Lovable 專案或一般 Web 應用。

為了讓前端能與 Supabase 後端溝通，你需要在程式碼中設定環境變數。

  1. 在專案根目錄建立或打開 .env 檔案。

  2. 新增前置步驟取得的憑證：

    VITE_SUPABASE_URL=[your-project-url]
VITE_SUPABASE_ANON_KEY=[your-anon-key]

選項 2：同步資料庫 Schema（CLI）

適用：開發者將本機資料庫變更推送到生產實例。

你可以使用連線字串將本機 schema 推送到 Supabase。

  1. 取得連線字串： 在 Zeabur 控制台中打開 Supabase 服務栈中的 PostgreSQL 服務面板。

  2. 複製： 複製 PostgreSQL 連線字串。

    PostgreSQL Connection String

  3. 執行： 在終端機執行以下命令（請先安裝 Supabase CLI）：

    supabase db push --db-url "[your-supabase-postgresql-connection-string]" --debug

階段 4.5：連接你的應用（服務間）

當你在 Zeabur 與 Supabase 一起部署你的應用時，需要把憑證注入到部署環境變數中。

手動方式

  1. 前往 Zeabur 的 App Service 設定。
  2. 點擊 Configurable（或進入 Variables 分頁）。
  3. 新增以下變數：
    • VITE_SUPABASE_URL: 貼上你的 Project URL
    • VITE_SUPABASE_ANON_KEY: 貼上你的 anon 公鑰

提示：請確保 .env 等憑證檔已加入 .gitignore，避免洩露密鑰。

階段 5：進階設定（選用）

將以下變數加入對應服務，以啟用進階功能。

1. 進階 Auth Hooks（Auth 服務）

在 Auth 服務變數中加入以下內容，以在特定事件觸發 Postgres 函數：

  • Custom Access Token Hook:
    • GOTRUE_HOOK_CUSTOM_ACCESS_TOKEN_ENABLED=true
    • GOTRUE_HOOK_CUSTOM_ACCESS_TOKEN_URI=pg-functions://postgres/public/custom_access_token_hook
  • MFA Verification Hook:
    • GOTRUE_HOOK_MFA_VERIFICATION_ATTEMPT_ENABLED=true
    • GOTRUE_HOOK_MFA_VERIFICATION_ATTEMPT_URI=pg-functions://postgres/public/mfa_verification_attempt
  • Password Verification Hook:
    • GOTRUE_HOOK_PASSWORD_VERIFICATION_ATTEMPT_ENABLED=true
    • GOTRUE_HOOK_PASSWORD_VERIFICATION_ATTEMPT_URI=pg-functions://postgres/public/password_verification_attempt

2. Studio AI 助手（Studio 服務）

在 Studio 服務變數中新增以下內容，以啟用 AI SQL 助手：

  • OPENAI_API_KEY=your-openai-api-key

3. 安全調整（Auth 服務）

  • GOTRUE_EXTERNAL_SKIP_NONCE_CHECK=true（適用於行動裝置 Google Sign In）
  • GOTRUE_MAILER_SECURE_EMAIL_CHANGE_ENABLED=true（變更 Email 時強制驗證）