← inaro.devAI駆動開発 学習ツール

Vercelにデプロイする

なぜ学ぶか: Next.jsを作った会社が運営するVercelは、「GitHubにpushしたら勝手にデプロイされる」体験を提供します。個人開発ならほぼ無料。AIが作ったアプリを世界に出す最短ルートで、プレビュー(本番前の確認環境)も自動でついてきます。

Vercel=Next.jsの本家ホスティング

Next.jsの開発元が運営していて、設定ほぼゼロで全機能が動きます。個人利用は無料枠で十分始められます。

GitHub連携が基本

リポジトリをVercelにつなぐと、pushのたびに自動でデプロイ。最初に学んだGitが、ここで「公開の起点」になります。

mainへpush=本番更新

本番ブランチへのpushが本番デプロイに直結します。「mainは常にデプロイできる状態に」という規律が自然に生まれます。

プレビュー=本番前のお試し環境

別ブランチをpushすると、専用URLの確認環境が自動で生えます。本番に影響なく「AIの変更を実環境で確認」できます。

失敗したらダッシュボードのログを見る

デプロイのたびにVercelの画面に記録が残ります。失敗したら赤い表示のログを開き、そのままAIに貼れば原因を特定できます。

デプロイの流れ

Vercel デプロイの流れ(初回)

1. GitHub にリポジトリを push
2. vercel.com → Add New → Project
3. GitHub リポジトリを選んで Import
4. Deploy を押す → 数分で https://your-app.vercel.app が誕生

以後の運用:
- main に push       → 本番が自動更新
- 別ブランチに push  → プレビュー環境が自動で生える

「pushしたら公開される」— つまりGitの操作がそのまま公開の操作になります。mainにpushする前にdiffを確認する習慣が、ここで実利になります。

ステップ 1 / 2

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。