本地開發完成排隊系統後，下一步就是將整個系統部署到雲端環境。如何將本地的 Supabase CLI 設定部署到雲端，並介紹自動化部署流程。

關於本地與雲端

1.1 本地開發環境

• 本地 Supabase 實例：運行在 http://127.0.0.1:54321
• 本地資料庫：PostgreSQL 運行在本機
• 測試用的假資料：透過 seed.sql 建立的測試資料

1.2 雲端生產環境

• Supabase 雲端專案：例如 https://your-project.supabase.co
• 雲端資料庫：Supabase 託管的 PostgreSQL
• 真實的使用者資料：實際的用戶註冊和使用

準備雲端 Supabase 專案

2.1 建立雲端專案

1. 前往 Supabase Dashboard
2. 點擊「New Project」建立新專案
3. 選擇適合的方案（免費方案足夠開始使用）
4. 記錄下專案的重要資訊：
   • Project Reference ID：例如 abcdefghijklmnop
   • Project URL：例如 https://abcdefghijklmnop.supabase.co
   • API Keys：anon key 和 service_role key

2.2 取得 Supabase Access Token

為了讓 GitHub Actions 能夠存取您的 Supabase 專案，需要建立 Access Token：

1. 前往 Supabase Dashboard
2. 點擊右上頭像 > Account settings > Access Tokens > Generate new token
3. 輸入 Token 名稱（例如：GitHub Actions Deploy）
4. 複製產生的 Token（這個 Token 只會顯示一次）

使用 Supabase CLI 部署

3.1 連結本地專案到雲端

首先，將本地專案連結到雲端專案：

# 登入 Supabase CLI
supabase login

# 連結到雲端專案
supabase link --project-ref your-project-reference-id

3.2 部署資料庫遷移

將本地的資料庫結構部署到雲端：

# 檢查要部署的遷移檔案
supabase db diff

# 部署所有遷移檔案到雲端
supabase db push

3.3 部署 Edge Functions

將本地的 Edge Functions 部署到雲端：

# 部署所有 Edge Functions
supabase functions deploy

# 或者部署特定的 Function
supabase functions deploy hello-world

使用 GitHub Actions 自動化部署

4.1 CI/CD 流程

CI（持續整合） 和 CD（持續部署） ：

• CI：每次程式碼變更時，自動執行測試確保品質
• CD：測試通過後，自動部署到測試或生產環境

4.2 建立 CI 工作流程

/.github/workflows/ci.yml

name: CI
on:
  push: # 當分支有新的 commit 時觸發

jobs:
  # 測試 Edge Functions
  edge-functions:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4      # 下載程式碼
      - uses: denoland/setup-deno@v2   # 安裝 Deno 環境
      - name: Test Edge Functions      # 執行測試
        run: deno test --allow-all supabase/functions/hello-world/index.test.ts

  # 驗證 Supabase 設定檔
  supabase-validation:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4      # 下載程式碼
      - uses: supabase/setup-cli@v1    # 安裝 Supabase CLI
      - name: Validate Supabase config file  # 檢查設定檔是否正確
        run: |
          if [ -f "supabase/config.toml" ]; then
            echo "Supabase config.toml exists"
          else
            echo "Error: supabase/config.toml not found"
            exit 1
          fi

4.3 建立 CD 部署工作流程

/.github/workflows/cd.yml

name: CD
on:
  pull_request:  # 當有人提交 Pull Request 時觸發

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      # 1. 準備環境
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Supabase CLI
        uses: supabase/setup-cli@v1

      # 2. 檢查必要的環境變數
      - name: Verify environment variables
        run: |
          if [ -z "${{ secrets.STAGING_PROJECT_ID }}" ]; then
            echo "STAGING_PROJECT_ID is not set"
            exit 1
          fi

      # 3. 測試部署
      - name: Test migration (dry-run)
        run: |
          supabase db push --db-url "${{ secrets.STAGING_DATABASE_URL }}" --dry-run

      # 4. 實際部署資料庫遷移
      - name: Apply migrations
        run: |
          supabase db push --db-url "${{ secrets.STAGING_DATABASE_URL }}"

      # 5. 部署 Edge Functions
      - name: Deploy Edge Functions
        run: |
          supabase functions deploy --project-ref ${{ secrets.STAGING_PROJECT_ID }}

      # 6. 驗證部署結果
      - name: Verify deployment
        run: |
          supabase projects list
          echo "Deployment completed successfully!"

設定 GitHub Secrets

5.1 GitHub Secrets？

GitHub Secrets 是一個安全的方式來儲存敏感資訊，例如：

• API 金鑰
• 資料庫連線字串
• 第三方服務的認證資訊

這些資訊會被加密儲存，只有 GitHub Actions 可以存取。

5.2 設定必要的 Secrets

前往您的 GitHub 專案頁面：

1. 點擊「Settings」標籤
2. 在左側選單選擇「Secrets and variables」→「Actions」
3. 點擊「New repository secret」

需要設定的 Secrets：

SUPABASE_ACCESS_TOKEN
# 步驟 2.2 取得的 Access Token

STAGING_PROJECT_ID
# Supabase 專案 Reference ID

STAGING_DATABASE_URL
# 格式：postgresql://postgres:[password]@db.[project-ref].supabase.co:5432/postgres
# 可在 Supabase Dashboard > Database > Settings > Database password

測試部署流程

6.1 提交程式碼

在本地修改程式碼後，提交到遠端 dev 分支，並建立 Pull Request 到 main 分支。

6.2 檢查 GitHub Actions

前往 GitHub 專案頁面，點擊「Actions」標籤，查看 CI/CD 工作流程的執行情況。確保所有步驟都成功完成

6.3 驗證部署結果

在 Supabase Dashboard 中檢查：

• 資料庫結構：確保所有遷移都已應用
• Edge Functions：確保所有函數都已部署並可正常運行

搭配 Zeabur 部署前端專案

Zeabur 是一個簡單易用的雲端部署平台，可以快速將 Supabase 專案或前後端專案，部署到雲端。

7.1 建立 Zeabur 帳號

1. 前往 Zeabur 官網
2. 註冊並登入帳號

7.2 建立新專案

1. 點擊「New Project」
2. 選擇「Connect GitHub Repository」
3. 選擇您的 Supabase 專案儲存庫

7.3 設定環境變數

在 Zeabur 專案設定中，新增以下環境變數：

• SUPABASE_URL：您的 Supabase 專案 URL
• SUPABASE_ANON_KEY：您的 Supabase anon key
• RESEND_API_KEY：您的 Resend API Key

7.4 部署專案

1. 點擊「Deploy」按鈕
2. 部署完成後，需要設定網域名稱（可使用 Zeabur 提供的免費子網域）

7.5 訪問應用程式

可以透過 Zeabur 提供的網址訪問應用程式，例如：https://queuingpenguins.zeabur.app/

小結

現在已經完成部署流程的設定可以透過 GitHub Actions 自動化部署到雲端 Supabase 專案。每次提交程式碼後，系統都會自動測試並部署最新版本。

... to be continued

有任何想討論歡迎留言，或需要指正的地方請鞭大力一點，歡迎訂閱、按讚加分享，分享給想要提升開發效率的朋友