Emergentをインポート

EmergentからZeaburへの移行方法

このガイドは、Emergentのようなクラウド IDE で構築したコードを取得し、24/7 オンラインのままの本番対応アプリケーションに変換する最も簡単な方法です。

概要

Emergentはプロトタイピングとブラウザでコードをすばやく実行するのに最適です。ただし、「スリープ」インスタンスや帯域幅の制限なしにアプリを世界と共有する準備ができたら、プロフェッショナルホスティングが必要です。

Zeaburはプロトタイプから本番環階への移行を簡素化するため、強くお勧めします。ローカルエディター用の Zeabur 拡張機能を使用すると、複雑な設定ファイルなしにアプリをデプロイできます。

ワークフロー：

エクスポート： Emergentからコードベースをダウンロード。
設定： プロジェクトをVS CodeまたはCursorでローカルに開く。
デプロイ： Zeabur拡張機能を使用してアプリを1クリックでライブに。

📝 重要な注意：このガイドはフルスタックをカバーしています。まずアプリケーションコードをデプロイし、ステップ7では、ユーザーデータを保存する必要があるアプリ用にMongoDBデータベースをプロビジョニングおよび接続する方法を特に説明します。

前提条件

Emergentプロジェクトへのアクセス。
VS CodeまたはCursorをコンピューターにインストール。
Zeaburアカウント。
Node.jsがローカルにインストール（バージョン18+推奨）。

移行概要

このプランは、ブラウザベースのサンドボックスからスケーラブルなクラウドでホストされたプロフェッショナルローカル開発環境に移行します。

ソース： Emergent（Node.js、Python、またはGo）。
エディター： VS Code / Cursor。
ホスト： Zeabur。

ステップ1：コードベースをエクスポート

オプション1：直接ダウンロード方法（シンプルなエクスポートに最適）

エージェントを起動： プロジェクトが非アクティブな場合、「エージェントがスリープ状態に入りました」というメッセージが表示される場合があります。プロジェクトをクリックしてその目覚めるまでを待つ。
コードビューアーにアクセス： **「Code」**ボタン（通常、プロジェクトインターフェースの右上近くにあります）を探します。
認証情報を取得： 「Code」をクリックすると、ポップアップが表示され、2つのものが表示されます：
- VS Code 環境へのリンク。
- パスワード。 最初にパスワードをコピーしてから、リンクをクリックして新しいタブで開きます。
エディターのロックを解除： コピーしたパスワードをプロンプトに貼り付けて、Enter キーを押します。ブラウザーに VS Code の完全なインターフェースが表示されます。
フォルダーをダウンロード：
- 左側のサイドバー（ファイルエクスプローラー）に、プロジェクトフォルダー（通常は frontend、backend、またはプロジェクトルートのみ）が表示されます。
- 保存したいフォルダーを右クリック。
- ダウンロードを選択。
- フォルダーがコンピューターに .zip ファイルとして保存されます。

オプション2：GitHub同期方法（移行に最適ですが、アップグレードが必要）

Zeaburまたは別のホストに移動する予定がある場合、GitHub に直接プッシュすることはzipファイルをダウンロードするより多くの場合、洗練されています。

GitHubを接続： Emergent のメインチャット/ダッシュボードインターフェースで、プロフィール設定の GitHub アイコンまたは「GitHub に接続」ボタンを探します。
認可： プロンプトに従って、GitHub アカウントにアクセスするよう Emergent を認可します。
コードをプッシュ： チャットインターフェースで、次のようなコマンドを入力します：

“このコードを my-app-export という名前の新しい GitHub リポジトリにプッシュ”
確認： GitHub アカウントにアクセスしてリポジトリが作成されたことを確認します。その後、git cloneを使用してこのリポジトリをローカルにクローンできます。

ステップ2：ローカル環境を設定（Cursor）

コードが GitHub にあるので、ローカルに設定して依存関係を確認し、プロダクション調整を行います。

リポジトリをクローン： 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
```
依存関係をインストール： Emergentプロジェクトは通常、パッケージマネージャーを自動的に検出します。ロックファイル（pnpm-lock.yaml、package-lock.json、またはyarn.lock）を確認します。
```
# npmを使用している場合
npm install
# pnpmを使用している場合（Emergentで一般的）
pnpm install
```
環境設定：
- .env.exampleファイルを探し（存在する場合）、複製して.envファイルを作成します。
- 重要： EmergentアプリがAPIキー（OpenAI、Supabaseなど）を使用した場合、これらのキーをローカルの.envファイルに手動で追加する必要があります。Emergentはセキュリティ上の理由から、秘密情報をGitHubにエクスポートしません。
ローカルテスト： Emergentサンドボックス外でアプリが機能することを確認するために、開発サーバーを実行します。
```
npm run dev
```

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

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

エディターの拡張機能マーケットプレイスにアクセス。
「Zeabur」を検索し、インストールをクリック。

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

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

左側のアクティビティバーの新しいZeabur アイコンをクリック。
**「デプロイ」**ボタンをクリック。

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

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

ステップ5：Zeabur AIエージェントが残りを処理

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

Zeabur エージェントは：

フルスタックアプリケーション（Reactフロントエンドとexpressバックエンドなど）があることを認識します。
ビルドおよび開始コマンドを自動的に設定します。
すべての必要なサービスをプロビジョニングします。

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

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

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

ステップ6：ドメインとネットワーキング

Zeabur でサービスをクリック。
ネットワーキングタブに移動。
ドメイン生成をクリック（.zeabur.appドメイン取得用）またはカスタムドメインをクリック（自分のドメイン接続用）。
URLにアクセス。Emergentアプリケーションは完全にデプロイされたプロダクション・アプリになりました。

ステップ7：データベース（MongoDB）を接続

Emergentアプリでユーザーデータを保存する必要がある場合は、MongoDBサービスをプロビジョニングしてアプリに接続します。

MongoDBテンプレートを使ってZeaburにMongoDBをデプロイします： 👉 MongoDBテンプレート
MongoDBサービス画面の Connections タブから接続文字列（URI）をコピーします。
アプリの環境変数（一般的に MONGO_URI）にそのURIを設定します：
- ローカル開発：Public の接続文字列を使用
- Zeabur上にデプロイしたアプリ：Internal/Private の接続文字列を使用（高速で、パブリック帯域を消費しません）

以上です！プロジェクトを Emergent のプロトタイプから Zeabur 上のライブ、生産就緒アプリケーションに正常に移動しました。設定ラインを1つも書かずに。このシームレスなワークフローにより、最も重要なことに集中できます。優れたソフトウェアを構築すること。

Bolt をインポート AI Studio をインポート