v0 プロジェクトを Zeabur で Web にデプロイする方法

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

概要

v0 はアプリのデザインや機能を作成するのに素晴らしいツールですが、それをオンラインにするには「ホスティング」が必要です。Zeabur は技術的な重労働を代行してくれるため、強くお勧めします。コードを取得し、数クリックでライブ URL に公開します。

ワークフロー:

• 作成 (Create): v0 でアプリを生成します。
• 調整 (Refine): コードをコンピュータに保存し、Cursor で確認します。
• デプロイ (Deploy): Zeabur でライブホストします。

📝 重要な注意: このガイドは Web サイトをオンラインにすること（フロントエンド）に焦点を当てています。アプリがユーザーデータやログインを保存する必要がある場合、データベースが必要です。データベースの追加方法については、別のフォローアップチュートリアルで説明します！

前提条件

• GitHub アカウント。
• コンピュータにインストールされた Cursor。
• Zeabur アカウント。
• ローカルにインストールされた Node.js（バージョン 18 以上推奨）。

ステップ 1: v0 を GitHub に同期する

コードを手動でコピーする代わりに、v0 には GitHub リポジトリを作成する直接的な統合機能があります。

1. GitHub 統合を見つける:

   • v0 エディタでプロジェクトを開きます。
   • 右上のヘッダーを見ます。
   • “Add to Codebase” または GitHub アイコン ボタンをクリックします。

2. GitHub に接続する:

   • メニューが表示されます。“Connect to GitHub” を選択します。
   • 以前に接続していない場合は、承認プロンプトに従います。

3. リポジトリを作成する:

   • “Create New Repository” を選択します。
   • プロジェクトの名前を入力します（例: my-v0-app）。
   • “Create” をクリックします。
   • 完了すると、新しい GitHub リポジトリへのリンクを含む成功メッセージが表示されます。この URL をコピーしてください。

4. GitHub にプッシュする:

   • 作業したいブランチ（通常は main）がアクティブなブランチとして選択されていることを確認します。
   • “Push to GitHub” をクリックしてコードを GitHub にプッシュします。

ステップ 2: ローカル環境のセットアップ (Cursor)

次に、GitHub からローカルコンピュータにコードを取り込み、依存関係を確認して本番環境の調整を行います。

1. リポジトリをクローンする:

   • Cursor を開きます。
   • Cmd + Shift + P (Mac) または Ctrl + Shift + P (Windows) を押してコマンドパレットを開きます。
   • Git: Clone と入力して選択します。
   • コピーした GitHub URL を貼り付け、保存するフォルダを選択します。

2. 依存関係をインストールする:

   • Cursor でターミナルを開きます (Ctrl + ~)。
   • インストールコマンドを実行します（v0 プロジェクトは通常 npm を使用します）:

   npm install

3. 環境設定:

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

4. ローカルテスト:

   • 開発サーバーを実行して、アプリがローカルで動作することを確認します。

   npm run dev

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

デプロイを非常に簡単にするために、Zeabur 拡張機能を使用します。

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

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

プロジェクトフォルダが Cursor で開かれている状態で:

1. 左端のアクティビティバーにある新しい Zeabur アイコン（通常は “Z” のロゴ）をクリックします。
2. “Deploy” ボタンをクリックします。
3. エディタがブラウザでリンクを開く許可を求めます。“Open” をクリックします。

ステップ 5: Zeabur AI エージェントに任せる

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

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

• フルスタックアプリケーション（例: Next.js）であることを認識します。
• ビルドおよび開始コマンドを自動的に構成します。
• 必要なすべてのサービスをプロビジョニングします。

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

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

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

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

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

v0 アプリがユーザーのログイン、アカウント作成、またはデータ保存を許可する場合、データベースが必要です。 現在、フロントエンド（視覚インターフェース）のデプロイに成功しました。データと認証を有効にするには、Supabase データベースを接続し、接続詳細を Zeabur の Variables（環境変数）として追加します。

Supabase のキーを取得し、Zeabur に追加する手順を解説した専用ガイドを用意しました：

👉 このガイド に従って、Zeabur で Supabase を作成して接続してください。

以上です！ v0 上のプロトタイプから Zeabur 上のライブ本番アプリケーションへのプロジェクトの移行が、設定を 1 行も書くことなく完了しました。このシームレスなワークフローにより、最も重要なこと、つまり素晴らしいソフトウェアの構築に集中できます。