アプリが完成しました。自分のPCでは完璧に動きます。友人に自慢しようとアドレスバーのlocalhost:3000をコピーして送ったところ、「開けないんだけど？」と返ってきました。思い切ってデプロイしてみると、今度は自分のPCで問題なく動いていたアプリが、インターネット上ではエラーを吐きます。
Vibe codingで多くの人が挫折するのが、まさにここ、デプロイです。今回は、デプロイが実際に何をするものなのか、そして「ローカルでは動くのにデプロイすると動かない」問題の主な原因3つを解説します。
localhostは「自分のPC」という意味です
localhostは特別なアドレスではなく、**「このPC」**を指す代名詞です。開発中にAIが「localhost:3000で確認してください」と言うのは、自分のPC上で一時的に動いているアプリを、自分のPCのブラウザで見てくださいという意味です。
そのため、友人にlocalhost:3000を送ると、友人のブラウザは友人のPCの中からアプリを探します。当然、見つかりません。自分のアプリはまだPCの外へ出たことがないからです。しかも、開発プログラムを終了したりノートPCを閉じたりした瞬間、自分のPC上のアプリも停止します。他の人が使えるサービスにするには、24時間稼働するPCと、誰でも見つけられるアドレスが必要です。
デプロイは引っ越しです
この2つを解決する作業がデプロイです。ひと言で言えば、デプロイとは自分のPCにあるアプリをサーバーへ引っ越しさせることです。サーバーというと大げさに聞こえますが、単に「24時間稼働し、インターネットに接続された他人のPC」です。
Vibe codingでよく使うVercelやNetlifyなどのサービスが、この引っ越しを代行してくれます。これらが行うことは3つです。
- サーバーのレンタル：データセンターのPCを貸し出します。
- ビルド：開発用コードをサービス用に変換・圧縮します。荷造りにあたります。
- アドレスの発行：
내앱.vercel.appのような、世界中の誰でもアクセスできるアドレスを与えます。
ここでビルドという言葉は覚えておく価値があります。開発モードは寛容で、多少の問題には目をつぶります。一方、ビルドは厳しい検査官なので、開発中は静かだった問題をデプロイ直前にまとめて指摘します。「ローカルでは動くのにデプロイに失敗する」問題の多くは、このビルド段階で発生します。
ローカルでは動くのにデプロイすると動かない3大原因
デプロイには成功したのにアプリの動作がおかしいなら、原因はほぼ次の3つのどれかです。
**第1位：環境変数を登録していない。第2回ではAPIキーを.envファイルに入れ、そのファイルを.gitignoreにしてGitが追跡しないようにしました。その結果、.envは荷物に含まれません。**サーバーに到着したアプリにはキーがないため、AI呼び出しもDB接続もすべて失敗します。デプロイサービスのダッシュボードにある「Environment Variables」メニューへ.envの内容を登録し、もう一度デプロイすれば解決します。ローカルでは動くのにデプロイ後は動かないとき、最初に確認する場所です。
第2位：ビルド検査で止まった。デプロイ自体に失敗し、赤いログが表示されるケースです。慌てず、デプロイサービスが表示するビルドログを丸ごとコピーしてAIに貼り付けます。「このビルドログを出して失敗した。直して」。
**第3位：DBが新しい訪問者を認識しない。**DBサービスによっては、「どこからの接続を許可するか」を設定します。これまでは自分のPCからだけ接続していましたが、今はサーバーが接続するため、許可リストや接続先アドレスの設定を変更する必要がある場合があります。これも症状（ログ）をAIに渡せば、すぐに原因を絞り込めます。
ドメイン：アドレスを自分の名前にする
デプロイが終わると、내앱.vercel.appのようなアドレスができます。そのまま使っても構いませんが、myapp.comのような自分のドメインを設定することもできます。ドメインは販売サイトから年単位で借り、接続作業は「この名前を探してきたら、あのサーバーへ案内する」という電話帳（DNS）の登録です。デプロイサービスのダッシュボードが手順を案内してくれます。登録後、世界中の電話帳に反映されるまで数分から1日ほどかかることがあります。接続直後に開けなくても、慌てる必要はありません。
デプロイ後3分チェックルーティン
デプロイボタンを押したら終わり、ではありません。毎回この3つだけ確認すれば、事故の大半を事前に防げます。
- デプロイしたアドレスへ直接アクセスします。開発中のlocalhostではなく、実際のアドレスを使います。
- 主要機能を一度ずつ押します。会員登録、保存、AI呼び出しなど、バックエンドと環境変数が絡む機能を中心に確認します。
- おかしければ、デプロイサービスのダッシュボードにある**ログ（Logs）**メニューを開き、赤い行をAIにコピーします。第1回で触れた「サーバーの悲鳴」は、まさにここに出ます。
まとめ
localhostは「自分のPC」という意味なので、他人に送っても開きません。- デプロイとは、アプリを24時間稼働するサーバーへ引っ越しさせ、公開アドレスを取得することです。Vercelなどのサービスが代行してくれます。
- ローカルとデプロイの違い3大要因：環境変数の未登録（第1位）、ビルド検査の失敗、DB接続設定です。特に
.envは荷物に含まれないことだけ覚えておけば、半分は解決します。 - ドメイン接続は電話帳（DNS）への登録なので、反映に時間がかかることがあります。
- デプロイ後は、実際のアドレスへアクセス → 主要機能をクリック → ログを確認、という3分ルーティンを行います。
次回はエラーメッセージです。赤い文字を怖がらずに読む方法、AIにエラーを正しく伝える方法、そしてAIが同じバグを直せず堂々巡りするときの抜け出し方を扱います。