Tools
Vercelは、作ったWebサイトやWebアプリをインターネット上に公開するためのサービスです。
AIを使ってNext.jsなどのWebアプリを作る場合、GitHubとVercelを組み合わせることで、かなり簡単にサイトを公開できます。
AIでコードを作る
↓
GitHubへ保存
↓
Vercelと接続
↓
Webサイト公開GitHubがコードを保存・管理する場所なら、VercelはそのコードをWebサイトとして公開する場所と考えると分かりやすいです。
Vercelとは？
Vercelは、WebサイトやWebアプリをDeploy（デプロイ）するためのクラウドサービスです。
特にNext.jsとの相性がよく、GitHubのRepositoryを接続しておけば、コードをPushするだけで新しいバージョンを自動的に公開できます。
POINT
Deployとは、開発したWebサイトやアプリを、実際にインターネットからアクセスできる状態にすることです。
GitHubとVercelの関係
AI開発では、GitHubとVercelをセットで使うケースが多くあります。
自分のパソコン
↓
GitHub
↓
Vercel
↓
ユーザーがアクセスするWebサイトコードそのものはGitHubで管理し、VercelがGitHubのコードを読み取ってWebサイトとして公開します。
VercelでWebサイトを公開する流れ
基本的な流れはとてもシンプルです。
1. GitHubへコードを保存する
まず、公開したいプロジェクトをGitHubのRepositoryへPushします。
git add .
git commit -m "Prepare deployment"
git push2. Vercelへログインする
Vercelへログインし、新しいProjectを作成します。
3. GitHub Repositoryを選択する
VercelからGitHubを連携し、公開したいRepositoryを選びます。
4. Deployする
設定内容を確認してDeployすると、Vercelが自動的にBuildを実行し、Webサイトを公開します。
GitHub Repository
↓
Build
↓
Deploy
↓
公開URL発行Buildとは？
Buildは、開発中のコードを実際にWeb上で動かせる形へ変換する処理です。
Next.jsのプロジェクトであれば、たとえば次のようなBuildコマンドが使われます。
npm run buildBuildに失敗すると、Vercel上でもDeployは完了しません。
Productionとは？
Productionは、実際にユーザーが利用する本番環境です。
多くのプロジェクトでは、GitHubの main BranchをProductionとして扱います。
main
↓
Vercel
↓
Production
↓
本番サイトPreviewとは？
Previewは、本番へ反映する前に変更内容を確認するための環境です。
たとえば新しい機能を feature/learn Branchで開発している場合、そのBranch専用のPreview URLを作ることができます。
feature/learn
↓
Preview
main
↓
Production
POINT
AIに新機能を作らせる場合も、いきなりProductionへ反映するのではなく、Previewで確認してから本番へ反映する方が安全です。
Environment Variablesとは？
Environment Variables（環境変数）は、APIキーやデータベース接続情報などをコード本体とは別に管理するための仕組みです。
たとえば次のような情報です。
OPENAI_API_KEY=...
DATABASE_URL=...
NEXTAUTH_SECRET=...こうした秘密情報をGitHubへ直接Pushするのではなく、Vercel側のEnvironment Variablesへ登録します。
WARNING
APIキーやデータベース接続情報をGitHubの公開Repositoryへ直接保存しないでください。秘密情報はEnvironment Variablesなどで管理します。
独自ドメインも設定できる
Vercelが最初に発行するURLだけでなく、自分で取得した独自ドメインを設定することもできます。
たとえば、
my-project.vercel.appから、
example.comのような独自ドメインへ変更できます。
Deployに失敗したらどうする？
VercelでDeployが失敗した場合は、まずBuild Logsを確認します。
AI開発では、そのエラー内容をChatGPTやClaude Codeへ渡して原因を調べる方法も有効です。
VercelでBuild失敗
↓
Logsを確認
↓
エラー内容をAIへ渡す
↓
修正
↓
GitHubへPush
↓
再DeployコードをPushすると自動Deployされる
GitHubとの連携が完了していれば、コードを変更してPushするたびにVercelが自動でDeployを実行できます。
コードを変更
↓
git commit
↓
git push
↓
Vercelが自動Build
↓
新しいサイトをDeployこれにより、毎回ファイルをFTPでアップロードするような作業を減らすことができます。
AI開発でおすすめの流れ
AIとVercelを組み合わせる場合は、次の流れを基本にすると安全です。
① mainを最新化
↓
② feature Branch作成
↓
③ AIに開発してもらう
↓
④ ローカル確認
↓
⑤ GitHubへPush
↓
⑥ Vercel Preview確認
↓
⑦ mainへMerge
↓
⑧ Productionへ反映
TRY IT
GitHubにテスト用Repositoryがある場合は、Vercelへ接続して1つサイトをDeployしてみましょう。最初はシンプルなHTMLやNext.jsのサンプルでも十分です。
Vercelで最低限覚えておきたい言葉
- Project：Vercel上の1つのWebプロジェクト
- Deploy：Webサイトを公開すること
- Build：公開可能な状態へコードを変換すること
- Production：本番環境
- Preview：確認用環境
- Environment Variables：秘密情報や環境設定を管理する仕組み
- Domain：WebサイトのURL
GitHubとVercelを理解すれば公開まで進める
AIでコードを書けるようになっても、インターネットへ公開できなければサービスとして使うことはできません。
まずは次の流れを理解しましょう。
AIで作る
↓
GitHubへ保存
↓
Vercelで公開ここまでできれば、AIを使って作ったWebサイトを自分で公開する基本的な流れが完成します。
次に学ぶ
次は、Webアプリにユーザー情報や投稿データなどを保存するためのデータベースを学びます。
GitHub
↓
Vercel
↓
Neon
↓
データを保存できるWebアプリ