Vercel

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するだけで新しいバージョンを自動的に公開できます。

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 push

2. 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 build

Buildに失敗すると、Vercel上でもDeployは完了しません。

Productionとは？

Productionは、実際にユーザーが利用する本番環境です。

多くのプロジェクトでは、GitHubの main BranchをProductionとして扱います。

main
↓
Vercel
↓
Production
↓
本番サイト

Previewとは？

Previewは、本番へ反映する前に変更内容を確認するための環境です。

たとえば新しい機能を feature/learn Branchで開発している場合、そのBranch専用のPreview URLを作ることができます。

feature/learn
↓
Preview

main
↓
Production

Environment Variablesとは？

Environment Variables（環境変数）は、APIキーやデータベース接続情報などをコード本体とは別に管理するための仕組みです。

たとえば次のような情報です。

OPENAI_API_KEY=...
DATABASE_URL=...
NEXTAUTH_SECRET=...

こうした秘密情報をGitHubへ直接Pushするのではなく、Vercel側の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へ反映

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アプリ

Neonとは？AI開発初心者向けにデータベースの基本を学ぶ →