logo

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

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

Kyle ChungKyle Chung

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のパスワードが表示されます。ドメイン設定にアクセスし、これらの資格情報を入力して接続を確立します。

kong.png

  1. Supabase APIキーを見つける: Supabaseプロジェクトのダッシュボードで、Settings → APIに移動して、プロジェクトURLとanon公開キー（SUPABASE_PUBLISHABLE_KEYとも呼ばれます）を見つけます。.envファイル内の環境変数名が、コードベースで使用されている変数名と完全に一致していることを確認してください。

  2. connectボタンをクリックします

    Supabase接続設定

  3. プロジェクトの正しいキーと値のペアを見つけます

    Supabase APIキー

ステップ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

    PostgreSQL接続文字列

    1. PostgreSQL接続文字列は、プロジェクトダッシュボードのZeabur PostgreSQLサービスパネルから取得できます。

      Zeabur 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搭載のアプリケーションを迅速に構築し、最小限の構成でデプロイできるため、インフラストラクチャの管理ではなく、機能の作成に集中できます。

return Blogs