「アプリを作る」のは簡単になった。だが「アプリを公開する」段階で、多くの人が止まる。デプロイ——作ったアプリを誰でもアクセスできる状態にする工程。ここがバイブコーディングで最も挫折率が高いポイントだった。
バイブコーディングで作ったアプリのデプロイ方法、結論から言うとVercelかNetlifyを使えば5分で完了する。ただし「5分で終わる」のは正しい手順を知っている場合の話。知らないと半日ハマる。
僕の講座では全受講者がデプロイまで完走するが、独学の場合はここで7割が脱落するとも言われている。その差は、知識の有無ではなく手順の把握。
- デプロイとは何か——アプリを公開するまでの全体像
- Vercel・Netlify・Firebase Hostingの比較と選び方
- バイブコーディングで作ったアプリをVercelにデプロイする手順
- 環境変数・ドメイン設定など、デプロイ時に必要な追加作業
- デプロイでよくあるエラーと対処法
デプロイとは何か——アプリ公開の全体像
デプロイを一言で説明すると「自分のパソコンにあるアプリを、インターネット上のサーバーに置く」こと。これにより、URLを共有すれば誰でもアプリにアクセスできる状態になる。
バイブコーディングで作ったアプリは、開発中はローカル環境（自分のPC）で動いている。Bolt.newの場合はブラウザ上のプレビューで確認できるが、そのプレビューURLは自分以外からはアクセスできない。公開するにはデプロイが必須。
Bolt.newには「Deploy」ボタンが内蔵されており、Netlifyへのデプロイがワンクリックで完了する。最も手軽な公開方法。ただしCursorやClaude Codeで開発した場合は、別途デプロイ先を設定する必要がある。
デプロイ先の比較——Vercel・Netlify・Firebase Hosting
バイブコーディングで作ったアプリのデプロイ先として、主要な3つのサービスを比較する。
| サービス | 無料枠 | 適したフレームワーク | デプロイの手軽さ |
|---|---|---|---|
| Vercel | 月100GBの帯域幅 | Next.js（公式サポート） | ◎ |
| Netlify | 月100GBの帯域幅 | React、Vue、静的サイト全般 | ◎ |
| Firebase Hosting | 10GB/月の転送量 | SPA、Firebaseと連携するアプリ | ○ |
Next.jsで作ったアプリならVercel一択。Next.jsの開発元であるVercelが運営しているため、互換性の問題がほぼ発生しない。React単体やViteで作ったアプリならNetlifyが手軽。Firebase Hostingは、Firestoreなどと連携する場合に選ぶ。
Vercelにデプロイする具体的な手順
最も利用頻度が高いVercelへのデプロイ手順を、ステップごとに説明する。前提として、GitHubアカウントが必要。
Cursorやローカルで開発したコードを、GitHubのリポジトリにプッシュする。Cursorのターミナルからgit init→git add .→git commit→git pushの流れ。Git操作が分からなければ、AIに「このプロジェクトをGitHubにプッシュするコマンドを教えて」と聞けば手順が返ってくる。
vercel.comにGitHubアカウントでログインし、「New Project」をクリック。先ほどプッシュしたリポジトリを選択する。フレームワークの検出は自動。
.envファイルに書いていたAPIキーやデータベースのURLを、Vercelの管理画面で設定する。「Settings > Environment Variables」から追加。ローカルの.envの内容をそのままコピーすれば完了。
「Deploy」ボタンをクリック。ビルドが走り、1〜3分で完了する。成功するとhttps://プロジェクト名.vercel.appというURLが発行される。このURLでアプリに世界中からアクセス可能。
.gitignoreに.envが含まれていることを必ず確認する。APIキーやデータベースの接続情報がGitHubに公開されると、不正利用の被害を受ける。僕の受講者でも過去にこの失敗で高額なAPI利用料が発生したケースがあった。
デプロイ後に必要な追加作業
デプロイして終わりではない。公開後に行うべき作業が2つある。
1つ目はカスタムドメインの設定。Vercelが発行する.vercel.appのURLでも使えるが、独自ドメインを設定すると信頼性が上がる。ドメインはお名前.comやCloudflareで年間1,000〜3,000円程度で取得可能。Vercelの管理画面からDNS設定を行えば、30分程度で独自ドメインが反映された。
2つ目はSSL証明書の確認。Vercel・Netlifyは自動でHTTPS化される。追加作業は不要だが、カスタムドメイン設定後にHTTPSが有効になっているか確認しておくべき。
デプロイでよくあるエラーと対処法
受講者がデプロイ時につまずくパターンを3つ紹介する。
ローカルでは動くのにVercelでビルドが失敗するケースだ。原因の大半は、ローカルにはインストール済みだがpackage.jsonに記載されていないパッケージにある。Vercelのビルドログからエラーメッセージを確認し、AIに渡して修正を依頼するのが最速の対処法だった。
ローカルの.envに書いていた値をVercelに設定し忘れるパターンだ。アプリは表示されるが、APIとの通信が全て失敗する。デプロイ後に機能が動かない場合は、まず環境変数の設定漏れを疑うべきだ。
ローカルとVercelのNode.jsバージョンが異なり、一部のパッケージが動かない場合だ。Vercelの「Settings > General」からNode.jsのバージョンを指定できる。ローカルと同じバージョンに揃えるのが確実な対処法だった。
- デプロイは「ローカルのアプリをインターネット上のサーバーに置く」工程
- Next.jsならVercel、React単体ならNetlify、Firebase連携ならFirebase Hostingが最適
- Vercelへのデプロイ手順は「GitHubプッシュ→リポジトリ接続→環境変数設定→Deploy」の4ステップ
- Bolt.newならNetlifyへワンクリックデプロイが可能。最も手軽な公開方法
- .envファイルのGitHub公開は厳禁。APIキー漏洩の最大原因
- ビルドエラー・環境変数未設定・Node.jsバージョン不整合がデプロイ時の三大トラブル
作ったアプリは、公開して初めて価値を持つ。デプロイのハードルは、正しい手順を知っていれば高くない。まずはVercelで最初の1つを公開してみてほしい。
