Supabase 是一個開源的 後端即服務（Backend as a Service，BaaS）平台，提供了一系列的服務來幫助開發者快速搭建和部署網絡應用程式。它被許多人視為是一個開源的 Firebase 替代品，因為它提供了許多相似的功能，但卻能給予開發者更多的控制權和自由度。

得益於 Supabase 完全開源的關係，除了選擇使用 Supabase 官方的 Cloud 雲端服務之外，開發者們也可以選擇在自己喜歡的地方自行部署一個私有版本的 Supabase，換句話說：可以自己選擇喜歡的雲端廠商！

比如說如果你是台灣的開發者，你想要讓你的 Supabase 從台灣訪問的延遲可以低一點，那麼你可以選擇 唯一在台灣有本地機房 的 Google Cloud Platform。或是如果你的預算有限，想要用客家一點的方式部署，那麼可以選擇 Digital Ocean 這類的便宜平台。

然而，相比於雲端版本，在自己的雲端主機自部署一個完整複雜的 Supabase 系統是有一定門檻的，這個門檻往往讓剛入門的新手開發者放棄自部署這條路，即使是有經驗的工程師可能也會為了方便省時間而放棄。

因此，今天這篇部落格文章我想要示範一下，原來搭配 Zeabur 雲端部署平台，只需要輕輕一按就可以把 Supabase 部署到 Google Cloud 或 Digital Ocean，用和 Supabase 雲端版本一樣簡單的方式，享受自部署帶來的各種好處 😋

部署教學

首先，我們打開 Supabase 的 Zeabur 模板 頁面：

點擊右上角的紫色「部署」按鈕，會彈出一個對話窗：

這個對話框會問你兩個問題：

1. Domain: 你的 Supabase 想要用什麼域名？

   這裡的域名是 Zeabur 免費提供的子域名，所以你不需要另外花錢買一個域名 👍 比如說你如果輸入 my-supabase 的話，你部署完成後就可以用 https://my-supabase.zeabur.app 來使用你的 Supabase 服務了。

   當然，如果你有付錢購買過自己的域名，在部署完成後可以額外綁定上去，只需要設定 CNAME 紀錄把你的自訂域名指向 Zeabur 提供的位置就可以啦～

2. 區域: 你要把 Supabase 部署到哪個區域？

   在下拉選單中，你可以看到許多各式各樣的區域，例如 Google Cloud Platform 的台灣機房、Amazon Web Service 的香港、東京、加州、法蘭克福機房、Digital Ocean 的新加坡機房以及 Huawei Cloud 的上海機房。

   

在這個範例中，我選擇 Google Cloud Platform 的台灣機房，然後點擊對話窗右下角的「確定」按鈕開始部署！

稍微等幾秒以後，畫面就會自動跳轉到專案詳情的頁面，可以看到我們 Supabase 所有的服務都已經在運行中了。

然後我們打開剛剛自己輸入的域名，會被詢問帳號密碼：

預設的帳號密碼都是 supa，這個可以從 kong 服務的設定檔裡面進行修改：

然後你輸入完帳號密碼以後就可以打開 Supabase 控制台了：

不用懷疑，就是這麼簡單，專屬於你的 Supabase 系統已經完成部署到 Google Cloud 台灣機房了 🤣

用指令的方式部署

如果你平常比較習慣用 Terminal 輸入指令的方式操作，不喜歡像前面的教學一樣在網站 UI 按來按去，也可以用指令的方式部署：

npx zeabur template deploy -f https://zeabur.com/templates/SUPABS.yaml

示範：用 React 串接剛剛部署好的 Supabase

為了讓這篇文章看起來不要太短，我們現在跟著 Build a User Management App with React 這篇 Supabase 官方教學文章，一起來示範一下如何把 React 網站串接到剛剛部署好的 Supabase 系統。

初始化資料庫 Schema

根據 官方教學 的步驟，我們首先必須要先初始化資料庫的 Schema，所以可以點擊 Supabase 控制台左邊的 SQL Editor 然後選擇 Quickstarters 裡面的 User Management Starter：

然後點擊 Run 讓他執行這個 Quick Starter 的 SQL 指令：

完成以後，如果你點擊側邊欄的 Table Editor，可以發現多了一張 Table 叫做 Profiles，我們待會就是要寫一個使用者管理系統，然後把使用者資料存在這個 Table 裡面：

註冊 Resend 免費電子郵件服務

由於這篇教學是示範用 Supabase 寄送使用者登入的電子郵件來進行登入，為了讓我們自部署的 Supabase 可以寄信，首先我們需要先註冊 Resend 這個寄信服務，他的免費帳號每個月可以寄送 3000 封信 👍

註冊好以後在 https://resend.com/api-keys 建立一個新的 API Key，然後回到 Zeabur 控制台，選擇 auth 服務，修改下面圈選的四個環境變數：

參考 Resend 的 SMTP 文件 進行以下修改：

1. GOTRUE_SMTP_HOST 修改為 smtp.resend.com
2. GOTRUE_SMTP_PORT 修改為 25
3. GOTRUE_SMTP_USER 修改為 resend
4. GOTRUE_SMTP_PASS 修改為你剛剛拿到的 API Key
5. GOTRUE_SMTP_ADMIN_EMAIL 修改為你用來寄信的 Email，域名必須和綁定在 Resend 的一致，例如如果 Resend 綁定的域名是 zeabur.com，這裡可以填寫 supabase-demon@zeabur.com
6. GOTRUE_SMTP_SENDER_NAME 寄信顯示的名稱，例如 Supabase Demo

除了上面這些關於 SMTP 的設定，還有一個 GOTRUE_SITE_URL 變數要改成 https://localhost:5173，這個變數要填寫的是我們前端網站的網址，以目前的本地開發階段來說就是 Vite 的 https://localhost:5173，這樣當我們點擊登入的 Email 按鈕以後，他就會把我們導回前端～

開發前端頁面

首先我們可以先初始化一個 Vite React 前端專案

npm create vite@latest supabase-react -- --template react
cd supabase-react

然後安裝 @supabase/supabase-js 這個套件：

npm install @supabase/supabase-js

安裝完以後，在專案目錄下增加一個 .env.local 檔案，填寫以下內容：

VITE_SUPABASE_URL=<SUPABASE_URL>
VITE_SUPABASE_ANON_KEY=<ANON_KEY>

其中 <SUPABASE_URL> 就是我們剛剛部署好的 Supabase 綁定的網址，例如 https://my-supabase.zeabur.app，然後 <ANON_KEY> 是指沒登入的使用者預設使用的 Key，這個可以在 Zeabur 的環境變數列表裡面查看：

接下來，我們打開 Supabase 官方的原版教學文章，快速開發（複製貼上）一些簡單的前端程式碼：

1. src/supabaseClient.js
2. src/Auth.jsx
3. src/Account.jsx
4. src/App.jsx

然後在終端機輸入 npm run dev 啟動本地開發伺服器，在瀏覽器開啟 http://localhost:5173：

就看到我們的前端頁面了！試著在輸入框輸入你的 Email，然後點擊 Send magic link 按鈕，Supabase 就會通過 Resend 寄送一封信給你：

按下 Confirm your email address 以後，就會被導回來 http://localhost:5173/ 然後你就可以看到已經登入成功了！！

你可以試著修改 Name 和 Website，然後點擊 Update，他就會更新 Value 到資料庫了！

加碼：上傳頭貼照片

Supabase 除了資料庫的功能之外，還可以儲存使用者上傳的檔案，所以我們可以用這個功能來輕鬆開發出上傳使用者照片的功能：

你可以在 Supabase Studio 的 Storage 分頁裡面看到有一個 avatars Bucket，我們剛剛上傳的照片就放在裡面～