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

   

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
      

2. 同步数据库模式： 在您的终端中执行以下命令，将您的数据库模式推送到 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 驱动的应用程序，并以最少的配置进行部署，让您专注于创造功能，而不是管理基础设施。