從 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。

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

1. 點擊 connect 按鈕

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

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

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

git clone [your-repository-url]

1. 導航至專案目錄：

   cd [your-project-name]
   

2. 安裝依賴項：

   npm install
   

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

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

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

   npm run dev
   

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

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

   

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

   

   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 驅動的應用程式，並以最少的配置進行部署，讓您專注於創造功能，而不是管理基礎設施。