インポートガイドLovable をインポート

Lovable.devプロジェクトをZeaburでウェブに展開する方法

このガイドは、Lovable.devで生成されたコードを取得して、友人や顧客と共有できる実際のライブウェブサイトに変えるための最も簡単な方法です。

概要

Lovable.devはアプリのデザインと機能を作成するのに素晴らしいですが、それをオンラインに置くには「ホスティング」が必要です。私たちはZeaburを強くお勧めします。技術的な負担の大部分を処理してくれるからです。コードを取得してわずか数クリックでライブURLに配置します。

ワークフロー:

  • 作成: Lovable.devでアプリを生成します。
  • 改善: コードをコンピュータに保存し、Cursorでチェックします。
  • 展開: Zeaburでライブホストします。

📝 重要な注記: このガイドはウェブサイトをオンラインに置くことに焦点を当てています（フロントエンド）。アプリがユーザーデータやログインを保存する必要がある場合、それはデータベースが必要です。別の追加チュートリアルでデータベースを追加する方法についてカバーします!

前提条件

  • GitHubアカウント。
  • Cursorがコンピュータにインストールされています。
  • Zeaburアカウント。
  • Node.jsがローカルにインストールされている（バージョン18+推奨）。

マイグレーション概要

このプランは、愛されているAIアシスタンスを保ちながら、「ノーコード」環境から「プロコード」環境に移動します。

  • ソース: Lovable（React + Vite + Tailwind）。
  • エディター: Cursor / Windsurf / Antigravity
  • ホスト: Zeabur

ステップ1: LovableをGitHubと同期する

手動エクスポートの代わりに、Lovableはリポジトリを自動で作成する直接の双方向同期統合を備えています。

  1. GitHub統合を探す:

    • Lovableエディターでプロジェクトを開きます。
    • 右上のヘッダーを見ます（「アップグレード」と「公開」ボタンの左）。
    • GitHubアイコン（猫のシルエット）をクリックします。

    Lovableでプロジェクトを同期

  2. 接続を開始します:

    • 「GitHub」というタイトルのドロップダウンが表示されます。
    • **「Connect GitHub」**というラベルの黒いボタンをクリックします。

    githubに接続をクリック

  3. プロジェクトをリンクします:

    • 「Project Settings」または「Integrations」というタイトルの設定モーダルが開きます。
    • 「Project」セクション（_Not connected_と表示されている場所）の下の**「Connect Project」**ボタンをクリックします。
    • 注: Lovableを通じてGitHubにログインしたことがない場合、最初にアカウントの認可を求められることがあります。

    githubでプロジェクトを接続

  4. リポジトリURLを取得します:

    • 同期が完了すると、右下に緑の通知が表示されます: 「A GitHub Repository is now under your account…」
    • 画面の中央に**「Clone」**というタイトルのモーダルが表示されます。
    • ボックスに表示されているURLをコピーします（https://github.com/yourusername/project-name.gitのようになります）。

    新しいgithubリポジトリを正常に作成

Lovableはもう完了です。 Cursorにコードを持ち込むために必要なURLを取得しました。

ステップ2: ローカル環境をセットアップする（Cursor）

コードがGitHubに置かれたので、依存関係を確認し、本番環境の調整を行うためにローカルでセットアップします。

  1. リポジリをクローン: Cursorを開き、コマンドパレット（Cmd+Shift+PまたはCtrl+Shift+P）を開き、> Git: Cloneと入力します。新しいリポジトリURLをペーストします。

    代わりに、ターミナル経由:

    git clone <https://github.com/your-username/your-repo-name.git>
cd your-repo-name

  2. 依存関係をインストール: Lovableプロジェクトは通常、パッケージマネージャーを自動的に検出します。ロックファイル（pnpm-lock.yaml、package-lock.json、またはyarn.lock）をチェックします。

    # npmを使用している場合
npm install
 
# pnpmを使用している場合（Lovableで一般的）
pnpm install

  3. 環境セットアップ:

    • .env.exampleファイルを探す（存在する場合）し、複製して.envファイルを作成します。
    • 重要: Lovableアプリが（OpenAI、Supabaseなど）APIキーを使用していた場合、これらのキーをローカル.envファイルに手動で追加する必要があります。Lovableはセキュリティ上の理由からシークレットをGitHubにエクスポートしません。

  4. ローカルテスト: 開発サーバーを実行して、アプリがLovableサンドボックスの外で動作することを確認します。

    npm run dev

ステップ3: ローカルエディターで開き、Zeabur拡張機能をインストール

ファイルを解凍し、VS CodeやCursorなどのローカルコードエディターでプロジェクトフォルダを開きます。デプロイを非常に簡単にするために、Zeabur拡張機能を使用します。

  1. エディター内の拡張機能マーケットプレイスに移動します。
  2. 「Zeabur」を検索してInstallをクリックします。

Zeabur拡張機能をダウンロード.png

ステップ4: ワンクリックでデプロイ

さあ、魔法の時間です。拡張機能がインストールされると、プロジェクトをデプロイするのは数回クリックするだけです。

  1. 左側のアクティビティバーの新しいZeabur アイコンをクリックします。
  2. **「Deploy」**ボタンをクリックします。

エディターは、ブラウザでリンクを開く許可を求めます。**「Open」**をクリックします。

デプロイをクリックして開く.png

ステップ5: Zeabur AIエージェントに残りの処理をさせる

Zeaburにリダイレクトされると、プラットフォームのAIエージェントが引き継ぎます。コードを分析して、プロジェクトの構造、依存関係、ビルド要件を理解します。

Zeaburエージェントは以下を行います:

  • 完全なスタックアプリケーション（例えば、ReactフロントエンドとExpressバックエンド）があることを認識します。
  • ビルドとスタートコマンドを自動的に構成します。
  • すべての必要なサービスをプロビジョニングします。

Zeaburaエージェントが残りを処理.png

プロジェクトとデプロイ領域を選択するよう求められます。その後、Zeaburが他のすべてを処理します。

サービスがビルドされ、完全に操作可能になる様子をリアルタイムで見ることができます。Zeaburは、デプロイが成功するとすぐにライブドメインを提供します。

ステップ6: ドメインとネットワーク

  1. Zeaburでサービスをクリックします。
  2. Networkingタブに移動します。
  3. Generate Domainをクリック（.zeabur.appドメインを取得するため）またはCustom Domainをクリックして自分のドメインを接続します。
  4. URLにアクセスします。Lovableアプリケーションは、完全にデプロイされた本番アプリになりました。

ステップ7: データベースを接続（Supabase）

Lovableアプリがユーザーのログイン、アカウント作成、またはデータ保存を許可している場合、データベース（通常Supabase）が必要です。

現在、フロントエンド（ビジュアルインターフェース）を正常にデプロイしました。データと認証機能を機能させるには、ZeaburのVariable設定にAPIキーを追加してバックエンドを接続する必要があります。

Supabaseキーを取得してZeaburに追加する方法をガイドする専用ガイドがあります:

👉 Zeabur で Supabase を作成および接続するためのステップバイステップガイドに従ってください。

これですべてです!プロトタイプからLovable.devのライブで本番対応のアプリケーションにZeaburに正常にプロジェクトを移動しました。設定コードの1行も書かずに。このシームレスなワークフローにより、最も重要なことに焦点を当てることができます:素晴らしいソフトウェアを構築すること。

Replit をインポートBolt をインポート