Replit プロジェクトを Zeabur でウェブにデプロイする方法

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

概要

Replit はアプリのデザインと機能を作成するのに最適ですが、オンラインに公開するには「ホスティング」が必要です。技術的な重い作業を処理してくれるため、Zeabur を強くお勧めします。コードを取得し、わずか数クリックでライブ URL に配置します。

ワークフロー:

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

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

前提条件

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

ステップ 1: Replit からプロジェクトを完成させてエクスポートする

まず、Replit 環境でアプリケーションの構築を完了します。コードの準備ができたら、ローカル マシンにダウンロードする必要があります。

1. Replit プロジェクトで、「Files」セクションの横にある 3 点メニュー (⋮) をクリックします。
2. ドロップダウン メニューから、「Download as zip」 を選択します。

プロジェクト全体は、ダウンロード フォルダ内の単一の zip ファイルとして保存されます。

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

Cursor で開く前に zip ファイルを抽出する必要があります。そうしないと、デプロイが失敗します。

1. ファイルを解凍してプロジェクトを開く:

   Mac ユーザー向け:

   1. Finder を開き、ダウンロード フォルダに移動します。
   2. Replit からダウンロードした zip ファイルを ダブルクリック します。これにより、プロジェクト名を持つ新しいフォルダが作成されます。
   3. Cursor を開きます。
   4. トップ メニュー バーで、ファイル > 開く… をクリックします (または Cmd + O を押します)。
   5. 新しく解凍されたフォルダ (zip ファイル自体ではない) を選択し、開く をクリックします。

   Windows ユーザー向け:

   1. ファイル エクスプローラー を開き、ダウンロード フォルダに移動します。
   2. zip ファイルを 右クリック して 「すべて抽出…」 を選択します。
   3. 抽出 をクリックします。(zip をダブルクリックして内部を確認するだけではなく、必ず 抽出してください)。
   4. Cursor を開きます。
   5. トップ メニュー バーで、ファイル > フォルダーを開く… をクリックします (または Ctrl + K を押してから Ctrl + O を押します)。
   6. 新しく抽出されたフォルダ を選択し、フォルダーを選択 をクリックします。

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

   # npmを使用している場合
   npm install
    
   # pnpmを使用している場合
   pnpm install
    

3. 環境セットアップ:

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

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

   npm run dev

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

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

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

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

これで、Cursor でプロジェクト フォルダが開かれました:

1. 左側のアクティビティ バーにある新しい Zeabur アイコン (通常は「Z」ロゴ) をクリックします。
2. 「デプロイ」 ボタンをクリックします。
3. エディターがブラウザーでリンクを開く権限を要求します。「開く」 をクリックします。

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

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

Zeabur エージェントは次のことを行います:

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

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

サービスがビルドされて完全に動作可能になるのをリアルタイムで確認できます。Zeabur は、デプロイが成功した直後にライブ ドメインを提供します。

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

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

ステップ 7: データベースに接続 (PostgreSQL が推奨)

Replit アプリがユーザーのログイン、アカウント作成、またはデータ保存を許可する場合、データベースが必要です。Replit のドキュメントでは、ベストプラクティスとして PostgreSQL を推奨しています。

現在、フロントエンド (ビジュアル インターフェース) を正常にデプロイしました。データと認証を有効にするには、PostgreSQL データベースを接続し、接続詳細を Zeabur 変数 として追加します。

Zeabur で PostgreSQL データベースを作成してアプリに接続する方法を示す専用のフォローアップ チュートリアルを公開します。今すぐホストされたオプションが必要な場合は、Supabase (内部は PostgreSQL) を使用することもできます。

👉 Zeabur で PostgreSQL を作成・接続するには、このガイドに従ってください。

以上です! Replit のプロトタイプから Zeabur のライブで本番対応アプリケーションにプロジェクトを正常に移動しました。単一行の構成コードを記述することはありません。このシームレスなワークフローにより、最も重要なことに焦点を当てることができます: 優れたソフトウェアを構築すること。