# 在 Zeabur 上使用 Supabase 重新部署您的 Lovable 專案：完整教學

> 在 Zeabur（您的 AI 代理工程師）上，使用 Supabase 後端部署並持續更新您的 AI 協作應用程式的全面演練。

# 從 AI 生成的想法到幾分鐘內上線：在 Zeabur 上使用 Supabase 重新部署您的 Lovable 專案

**在 Zeabur（您的 AI 代理工程師）上，使用 Supabase 後端部署並持續更新您的 AI 協作應用程式的全面演練。**

這篇技術文章將為開發人員提供一個結構化指南，說明如何將使用 AI 驅動的應用程式建構器 Lovable 及其整合的 Supabase 後端所建立的 Web 應用程式，部署到 Zeabur 平台上。重點將放在建立持續部署管線，以實現無縫更新和重新部署。

### 現代開發三劍客：Lovable、Supabase 與 Zeabur

本指南圍繞著三種簡化開發流程的強大技術：

- **Lovable：** 一位由 AI 驅動的軟體工程師，可以在幾秒鐘內將您的想法變成上線的應用程式。它在生成前端並將其與後端服務連接方面尤其強大。
- **Supabase：** 一個受歡迎的 Firebase 開源替代方案。它提供了一套工具，包括 Postgres 資料庫、身份驗證、API 和檔案儲存，使其成為一個穩健的後端解決方案。
- **Zeabur：** 一個旨在消除部署摩擦的雲端平台。它會自動分析您的程式碼以確定語言和框架，然後零配置地建置和部署它。

透過結合這些工具，您可以在幾分鐘內從一個簡單的提示，變成一個功能齊全、已部署並具備 CI/CD 管線的 Web 應用程式。

### 先決條件：您需要什麼

在開始之前，請確保您擁有以下項目：

- **一個帶有 Supabase 的 Lovable 專案：** 您需要在 Lovable.dev 上建立一個與 Supabase 專案整合的專案。Lovable 的 AI 可以幫助您建立一個具有使用者身份驗證和資料庫的全端應用程式。
- **一個 GitHub 帳戶：** 這對於版本控制至關重要，並將作為 Lovable 和 Zeabur 之間的橋樑。
- **一個 Zeabur 帳戶：** 您需要在 Zeabur 上擁有一個帳戶來部署您的應用程式。您可以使用您的 GitHub 帳戶進行註冊。
- **一個 IDE：** 您需要在本地機器上安裝一個整合開發環境（IDE）或程式碼編輯器（例如 VS Code、WebStorm 或 Sublime Text），以便在本地`git clone`和使用儲存庫。

### 步驟 1：將您的 Lovable 專案連接到 GitHub

第一步是將您的 Lovable 專案程式碼放入 GitHub 儲存庫中。Lovable 具有內建的整合功能，使此過程變得簡單。

1.  **啟動連接：** 在您的 Lovable 專案編輯器中，找到通常位於右上角的 GitHub 圖示，然後點擊「Connect to GitHub」。
2.  **授權 Lovable：** 您將被重定向到 GitHub 以授權 Lovable 應用程式。您可以授予對所有儲存庫的存取權限，或選擇特定的儲存庫。
3.  **建立儲存庫：** 授權後，返回 Lovable 並點擊「Create Repository」。Lovable 將在您的 GitHub 帳戶中建立一個新的儲存庫，並將初始專案程式碼推送到其中。

這種雙向同步意味著您在 Lovable 中所做的任何更改都將被推送到 GitHub，而您推送到 GitHub 的任何更改也將反映在 Lovable 中。

### 步驟 2：設定 Supabase 整合

要讓您在 Zeabur 上的前端應用程式與您的 Supabase 後端進行通訊，您需要正確設定 Supabase 整合和環境變數。

1.  **部署 Supabase 範本：** 在您的 Zeabur 專案儀表板中，點擊「Add Service」按鈕，然後從可用選項中選擇 Supabase 範本。
2.  **設定 Kong 閘道：** 導航至 Kong 服務面板。您將在此處找到 Supabase 使用者名稱和 Supabase 密碼。接下來，前往側邊的 Domains 區塊並存取其中提供的網址。使用 Kong 面板中的 Supabase 使用者名稱和密碼來登入 Supabase。

   ![kong.png](https://cdn.zeabur.com/supabase%20migration/kong1.png)

3.**找到您的 Supabase API 金鑰：** 在您的 Supabase 專案儀表板中，導航至 Settings → API，找到您的專案 URL 和 `anon` 公開金鑰（也稱為 `SUPABASE_PUBLISHABLE_KEY`）。確保您的 `.env` 檔案中的環境變數名稱與您程式碼庫中使用的變數名稱完全匹配。

    1. **點擊 `connect` 按鈕**

      ![Supabase 連接設定](https://cdn.zeabur.com/supabase%20migration/supabase%20panel1.png)

    2. **找到您專案的正確鍵值對**

      ![Supabase API 金鑰](https://cdn.zeabur.com/supabase%20migration/supabase%20credentials1.png)

### 步驟 3：將您的 Lovable 專案克隆到您的本地 IDE

1.將儲存庫克隆到您的本地機器，以便使用您偏好的 IDE 進行持續開發、存取進階除錯工具以及離線工作：

    ```bash
    git clone [your-repository-url]
    ```

    1. 導航至專案目錄：

        ```bash
        cd [your-project-name]
        ```

    2. 安裝依賴項：

        ```bash
        npm install
        ```

    3. 在您的專案根目錄中建立一個 `.env` 檔案，並添加步驟 2.3 中的憑證：

        ```env
        VITE_SUPABASE_URL=[your-url-from-step-2]
        VITE_SUPABASE_ANON_KEY=[your-anon-key-from-step-2]
        ```

    4. 在本地運行開發伺服器：

        ```bash
        npm run dev
        ```

2. **同步資料庫結構：** 在您的終端機中執行以下命令，將您的資料庫結構推送到 Supabase（請確保您已先在本地克隆了儲存庫）：

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

    ![PostgreSQL 連接字串](https://cdn.zeabur.com/supabase%20migration/Postgresql%20Connection%20String1.png)

    1.您可以從專案儀表板中的 Zeabur PostgreSQL 服務面板獲取 PostgreSQL 連接字串。

        ![Zeabur PostgreSQL 面板](https://cdn.zeabur.com/supabase%20migration/supabase%20cli%20connect1.png)

    2.然後插入連接字串到上面的命令中。

> **Hint:** Please make sure the credentials file such as `.env` is listed in your `.gitignore` file.

### 步驟 4：在 Zeabur 上設定您的專案

現在您的程式碼已在 GitHub 上，您可以使用 Zeabur 進行部署。

1.  **建立新專案：** 在您 Zeabur 儀表板中現有的 supabase 專案中，點擊左上角面板中的 `Add Services`。
2.  **從 GitHub 部署：** 選擇從 GitHub 儲存庫部署新服務。
3.  **選擇您的儲存庫：** Zeabur 將顯示您的 GitHub 儲存庫列表。選擇您剛用 Lovable 建立的那個。
4.  點擊 Configurable 並將那些 supabase 憑證貼到 **Environment Variables** 中，然後點擊 `next` 和 `Deploy`。
5.  新增一個想要的域名：在 Networking 公開部分，點擊 `Generate Domain`，然後輸入您喜歡的域名。

### 步驟 5：部署您的應用程式

連接您的儲存庫並設定環境變數後，點擊部署按鈕。Zeabur 將自動建置和部署您的應用程式。監控部署日誌以跟踪進度。完成後，Zeabur 會提供一個公開的 URL，您的應用程式就在該處上線。

### 步驟 6：使用 CI/CD 進行持續更新

建立部署管線後，更新變得毫不費力：

1.  **在 Lovable 中進行更改：** 返回您的 Lovable 專案，並使用 AI 驅動的編輯器對您的應用程式進行任何所需的更改。
2.  **推送到 GitHub：** 當您在 Lovable 中保存更改時，它們會自動提交並推送到您連接的 GitHub 儲存庫。
3.  **自動重新部署：** Zeabur 將檢測到您儲存庫主分支上的新提交，並自動觸發新的建置和部署。
4.  **驗證您的更改：** 部署完成後，您更新的應用程式將在同一個 Zeabur URL 上線。

這個工作流程可以實現快速迭代和即時部署改進。

### 總結

Lovable、Supabase 和 Zeabur 的這種整合創造了一個高效的開發工作流程。您可以快速建置由 AI 驅動的應用程式，並以最少的配置進行部署，讓您專注於創造功能，而不是管理基礎設施。