プロンプトから本番環境へ：AI生成のNext.jsアプリをデプロイする方法
プレビューリンクは、AI製アプリの多くが息絶える場所です。アプリは動き、プレビューURLを友人2人に共有し、3週間後にはプロジェクトが放置されている——プレビューは最初からプロダクトではなかったからです。プロダクトとは本番環境のことです。自分のURL、実際のユーザー、そしてあなたがブラウザのタブを開きっぱなしにしなくても動き続けるインフラ。
朗報があります。ビルダーが標準的な Next.js プロジェクトを生成しているなら、本番への道は短く、よく舗装されています。この手順は Massvai のフローを使いますが、本物のコードをくれるビルダーであれば、どれでも同じ形が当てはまります。
デプロイの前に：10分間の点検
プレビューが良さそうに見えた瞬間にデプロイしたくなる衝動は抑えてください。先に4つ確認しましょう。
1. 見知らぬ人がたどるすべての経路をクリックすること。 あなたが30回テストしたハッピーパスではなく、変な経路です。空のフォームを送信する。存在しないものの詳細ページを開く。認証があるなら、ログアウト状態でページを開いてみる。壊れたものがあればエージェントに伝えてください。ローンチ前の修正はイテレーション1回で済みますが、ローンチ後の修正はユーザーを失います。
2. シークレットを棚卸しすること。 アプリが通信する外部サービス——データベース、認証プロバイダー、決済サービス、メール——をすべてリストアップしてください。それぞれにキーがあり、そのキーは環境変数に置くべきで、コードに書いてはいけません。Massvai はプロジェクトの環境変数を明示的に管理し、デプロイに注入します。どのプラットフォームを使うにせよ、生成されたコードが値をハードコードせず process.env から読んでいることを確認してください。
3. テストデータと本番データを分けること。 テスト用データベースや Stripe のテストキーで開発していたなら、本番には本番用の値が必要です。これはローンチ当日のバグとして最も多いものです。実ユーザーに使わせてはいけないテスト認証情報で、アプリが完璧に動いてしまうのです。
4. チェックポイントを作ること。 出荷しようとしているまさにそのバージョンのスナップショットを取ってください。来週イテレーションを続けたとき、比較対象——あるいはロールバック先——として、確実に動く状態が欲しくなります。
ステップ1：コードを自分の GitHub に置く
ビルダーが直接デプロイできる場合でも、まずリポジトリを自分の GitHub アカウントに同期してください。これが重要な理由は3つあります。あなたのバックアップになること、開発者が参加したときの引き継ぎ経路になること、そして Vercel の Git ベースのデプロイパイプラインにつながること——以後のすべてのプッシュが自動でデプロイされます。
Massvai ではこれが組み込みのフローです。GitHub アカウントを接続し、リポジトリ名を選んで、プッシュ。結果を確認するには、リポジトリを開いて普通の Next.js プロジェクトが見えるかチェックしてください——app/ ディレクトリ、package.json、TypeScript ファイル。それがあなたの資産です。
ステップ2：Vercel にデプロイする
Next.js のホスティングとして Vercel がデフォルトの答えになっているのは、地味で実用的な理由からです。あらゆる Next.js 機能（サーバーコンポーネント、APIルート、画像最適化）へのゼロ設定対応、グローバルCDN、自動HTTPS。無料の Hobby プランでも小規模な本番アプリなら余裕で動きます。
Massvai のガイド付きフローは、Vercel アカウントを接続し、プロジェクトを作成し、環境変数を引き継ぎ、ビルドを開始します。手動でやる場合もほとんど手間は変わりません。Vercel のダッシュボードで GitHub リポジトリをインポートし、環境変数を貼り付けて、デプロイをクリックするだけです。
いずれにせよ、最初のビルドが正念場です。プレビューでクリーンにビルドできる生成プロジェクトは、Vercel でもほぼ確実にクリーンにビルドできます——もし失敗したら、ログを読んでください。原因はたいてい環境変数の不足で、ログにその名前が書いてあります。
ステップ3：独自ドメインを設定する
your-app.vercel.app でも動きますが、本物のドメインはプロダクトの受け取られ方を変えます。そして、非開発者が最もつまずきやすい部分でもあるので、手順をすべて書いておきます。
- 任意のレジストラでドメインを購入します（
.comなら年間およそ10〜15ドル）。 - プロジェクトに追加します（Massvai のドメイン設定、または Vercel のダッシュボードで）。
- プラットフォームが追加すべきDNSレコードを1〜2件表示します——通常は
AレコードかCNAMEです。レジストラのDNS管理画面に貼り付けてください。 - 反映を待ちます——数分から数時間です。レコードが解決されると、HTTPS証明書は自動的に発行されます。
以上です。サーバー管理はどの段階でも一切登場しません。
ステップ4：本番での最初の1週間
ローンチはスタートラインです。1週目の習慣を3つ。
- 実際の行動を観察すること。 軽量なアナリティクスツールを入れて、人々が実際にどこへ行くのかを見てください——予想通りだったためしはありません。これがあなたのイテレーションのロードマップになります。
- 小さく出荷し続けること。 GitHub と Vercel がつながっていれば、同期されたすべての変更が自動でデプロイされます。「ユーザーが報告した」から「本番で直った」までのギャップは1時間以内にできます。このスピードこそ、既存の競合に対するあなたの最大の武器です。
- 恥じずにロールバックすること。 デプロイが失敗した？ Vercel は過去のすべてのデプロイをワンクリックで戻せる状態で保持していますし、ビルダーのチェックポイントはコードレベルで同じセーフティネットを提供します。ミスのコストは数分です。だから、思い切って振っていきましょう。
本当に大事なこと
これらのステップにはもう、エンジニアリングスキルは必要ありません——それがAIアプリビルダーがもたらした変化です。しかし、AIにはできないことがあります。作ったものを人々の前に届けるのは、あなたの仕事です。プレビュータブの中のアプリは、誰か他の人が使うまで、価値ゼロです。今週中にデプロイしましょう。