# 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），以便在本地克隆和使用存储库。

### 步骤 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 驱动的应用程序，并以最少的配置进行部署，让您专注于创造功能，而不是管理基础设施。