# Supabaseを利用したLovableプロジェクトをZeaburに再デプロイする：ステップバイステップガイド

> AI共同制作アプリケーションをSupabaseバックエンドと共にZeabur（あなたのAIエージェントエンジニア）にデプロイし、継続的に更新するための包括的なウォークスルー。

# AIが生成したアイデアから数分で本番環境へ：LovableプロジェクトをSupabaseと共にZeaburに再デプロイする

**AI共同制作アプリケーションをSupabaseバックエンドと共にZeabur（あなたのAIエージェントエンジニア）にデプロイし、継続的に更新するための包括的なウォークスルー。**

この記事では、AI搭載アプリビルダーであるLovableで作成したWebアプリケーションと、それに統合されたSupabaseバックエンドをZeaburにデプロイする方法について、開発者向けに体系的なガイドを提供します。継続的デプロイメントパイプラインを確立し、シームレスな更新と再デプロイを可能にすることに焦点を当てます。

### 現代の開発トリオ：Lovable、Supabase、そしてZeabur

このガイドは、開発プロセスを効率化する3つの強力なテクノロジーを中心に展開します。

- **Lovable:** あなたのアイデアを数秒でライブアプリケーションに変えることができるAI搭載のソフトウェアエンジニア。特にフロントエンドを生成し、バックエンドサービスと接続するのに強力です。
- **Supabase:** Firebaseの人気のオープンソース代替品。Postgresデータベース、認証、API、ファイルストレージなどのツール一式を提供し、堅牢なバックエンドソリューションとなります。
- **Zeabur:** デプロイの手間をなくすために設計されたクラウドプラットフォーム。コードを自動的に分析して言語とフレームワークを特定し、ゼロコンフィギュレーションでビルドしてデプロイします。

これらのツールを組み合わせることで、簡単なプロンプトから、CI/CDパイプラインを備えた完全に機能するデプロイ済みのWebアプリケーションに、数分で到達できます。

### 前提条件：必要なもの

始める前に、以下のものがあることを確認してください。

- **Supabaseと連携したLovableプロジェクト:** Supabaseプロジェクトと統合されたLovable.devで作成したプロジェクトが必要です。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を承認する:** Lovableアプリケーションを承認するためにGitHubにリダイレクトされます。すべてのリポジトリへのアクセスを許可するか、特定のリポジトリを選択できます。
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セクションに移動し、そこに提供されているURLにアクセスします。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. PostgreSQL接続文字列は、プロジェクトダッシュボードのZeabur 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搭載のアプリケーションを迅速に構築し、最小限の構成でデプロイできるため、インフラストラクチャの管理ではなく、機能の作成に集中できます。