Vercelとは何か？30秒で理解する
Vercelは、フロントエンドアプリケーションのデプロイに特化したクラウドプラットフォームです。Next.jsの開発元が運営しており、GitHubにプッシュするだけで自動的にビルド・デプロイが走る仕組みを提供しています。
個人開発から商用プロダクトまで幅広く使われており、Hobbyプラン（無料）でも独自ドメインの設定やHTTPS対応、CDN配信が利用できます。Netlifyなど他のホスティングサービスと比較されることが多いですが、Next.jsとの親和性の高さがVercel最大の強みです。
Vercelアカウント作成の手順
サインアップ方法を選ぶ
Vercelの公式サイトにアクセスし、右上の「Sign Up」をクリックします。サインアップには以下の方法が用意されています。
| サインアップ方法 | 特徴 |
|---|---|
| GitHub | リポジトリ連携がそのままできるため最も推奨 |
| GitLab | GitLabメインの開発者向け |
| Bitbucket | Bitbucketメインの開発者向け |
| メールアドレス | Gitプラットフォームを使わない場合の選択肢 |
GitHubアカウントでのサインアップが圧倒的におすすめです。理由は単純で、後述するプロジェクトのインポートやデプロイの自動化がGitHub連携前提で設計されているためです。メールアドレスでアカウントを作成した場合でも後からGitHub連携は可能ですが、最初からGitHubで始めたほうが手順が少なく済みます。
GitHubアカウントでのサインアップ手順
GitHubを選択すると、GitHubの認証画面にリダイレクトされます。ここでVercelがGitHubアカウントに対してリクエストする権限の確認が表示されます。
許可する内容は主に「リポジトリの読み取り」「Webhookの作成」などで、Vercelがコードの変更を検知して自動デプロイするために必要な権限です。問題なければ「Authorize Vercel」をクリックしてください。
認証が完了すると、Vercelのダッシュボードに遷移します。初回はチーム名やアカウント種別（Hobby / Pro）の選択画面が表示される場合がありますが、個人利用であれば「Hobby」を選択すれば無料で始められます。
電話番号の入力を求められた場合の対処法
サインアップやログインの過程で、Vercelが電話番号の入力を求めてくることがあります。これは全ユーザーに発生するわけではなく、特定の条件下で表示されるものです。
電話番号を求められる理由
Vercelが電話番号認証を要求するケースには、いくつかのパターンがあります。
新しいデバイスやIPアドレスからのログイン時に、本人確認の追加ステップとして求められることが最も多いケースです。VPNを使用している場合や、海外IPからのアクセス時にも発生しやすくなります。
また、Vercel側でアカウントにセキュリティリスクがあると判断された場合にも表示されます。短時間に複数回のログイン試行があった場合や、不正利用の疑いがある場合などが該当します。
スパムや不正アカウントの防止を目的として、新規サインアップ時に一律で求められるケースもあります。
以下の図は、電話番号を求められた際の判断フローです。
電話番号を入力する場合
信頼できる状況であれば、電話番号を入力してSMS認証を完了させるのが最も手軽な方法です。Vercelのプライバシーポリシーでは、入力された電話番号は認証目的以外には使用しないと明記されています。
認証コードがSMSで届くので、画面に入力すればそのまま手続きが進みます。
電話番号を入力したくない場合
電話番号を入力せずに進めたい場合は、以下の方法を試してください。
別のGitプラットフォームで試す： GitHubで求められた場合、GitLabやBitbucketのアカウントでサインアップを試みると、電話番号認証が表示されないことがあります。これはアカウントやIPアドレスの組み合わせで判定されているため、別ルートで回避できる可能性があります。
VPNをオフにする： VPN経由のアクセスは不正利用と判定されやすいため、VPNを切った状態で再度試すと電話番号認証を回避できることがあります。
Vercel Supportに問い合わせる： 上記を試しても解決しない場合は、Vercelのサポートに問い合わせて代替の認証方法がないか確認してください。英語でのやり取りになりますが、サポートの対応は比較的早いです。
GitHubリポジトリとの連携
新規プロジェクトのインポート
アカウント作成が完了したら、ダッシュボードから「Add New…」→「Project」を選択します。GitHubアカウントでサインアップしている場合、自分のリポジトリ一覧が表示されます。
デプロイしたいリポジトリの「Import」ボタンをクリックすると、プロジェクト設定画面に移ります。ここで設定できる主な項目は以下の通りです。
| 設定項目 | 説明 | デフォルト値 |
|---|---|---|
| Project Name | Vercel上でのプロジェクト名 | リポジトリ名がそのまま入る |
| Framework Preset | 使用フレームワークの指定 | 自動検出される |
| Root Directory | ビルド対象のディレクトリ | ./（リポジトリルート） |
| Build Command | ビルドコマンド | フレームワークに応じて自動設定 |
| Output Directory | ビルド出力先 | フレームワークに応じて自動設定 |
| Environment Variables | 環境変数の設定 | なし |
Next.js、Vite、Create React Appなど主要なフレームワークは自動検出されるため、特別な設定をしなくても「Deploy」ボタンを押すだけでデプロイが始まります。
環境変数の設定
APIキーやデータベースの接続文字列など、コードに含めたくない値は「Environment Variables」のセクションで設定します。Key-Value形式で入力でき、Production / Preview / Developmentの各環境ごとに異なる値を設定することも可能です。
.env.localに書いているような値はここに移すことになります。ただし、NEXT_PUBLIC_プレフィックスが付いた変数はクライアントサイドに公開される点は、ローカル開発時と同じなので注意してください。
初回デプロイの流れ
デプロイの実行
プロジェクト設定が完了したら「Deploy」をクリックします。Vercelがリポジトリからコードを取得し、ビルドプロセスが実行されます。ビルドの進行状況はリアルタイムでログとして表示されるため、エラーが発生した場合はここで原因を確認できます。
デプロイが成功すると、https://プロジェクト名.vercel.appという形式のURLが自動的に発行されます。このURLは即座にアクセス可能で、世界中のCDNエッジから配信されます。
以下は、GitHubへのプッシュからVercelが自動デプロイを行うまでの流れです。
プレビューデプロイの活用
Vercelの便利な機能のひとつが、プレビューデプロイです。mainブランチ以外のブランチにプッシュすると、そのブランチ専用のプレビューURLが自動的に生成されます。
Pull Requestを作成すると、VercelのボットがPRにプレビューURLをコメントとして投稿してくれます。レビュアーがコードを読むだけでなく、実際に動いている画面を確認できるため、チーム開発でのレビュー効率が大幅に向上します。
よくあるビルドエラーと対処法
初回デプロイ時にビルドが失敗するケースは珍しくありません。よくある原因と対処法を押さえておくと、つまずきを減らせます。
Node.jsバージョンの不一致
ローカルではNode.js 20で動いていたのに、Vercel側のデフォルトが18だったというケースです。プロジェクト設定の「General」→「Node.js Version」から変更できます。package.jsonにenginesフィールドを指定しておくと、Vercel側も自動的にそのバージョンを使用します。
{
"engines": {
"node": "20.x"
}
}
環境変数の未設定
ローカルで.env.localに定義していた環境変数を、Vercelのダッシュボードに設定し忘れるケースです。ビルドログにundefinedやmissing API keyのようなエラーが出ていたら、まず環境変数を確認してください。
大文字・小文字の区別
ローカルのmacOSはファイル名の大文字・小文字を区別しませんが、Vercelのビルド環境（Linux）は区別します。import Header from './header'と書いているのにファイル名がHeader.tsxだった場合、ローカルでは動くのにVercelではエラーになります。
独自ドメインの設定
ドメインの追加
Vercelのダッシュボードからプロジェクトを選択し、「Settings」→「Domains」に進みます。取得済みのドメインを入力して「Add」をクリックすると、必要なDNS設定が表示されます。
設定方法はドメインのDNS管理をどこで行っているかによって異なりますが、基本的には以下のいずれかを設定します。
| レコードタイプ | 用途 | 設定値の例 |
|---|---|---|
| A レコード | ルートドメイン（example.com） | 76.76.21.21 |
| CNAME レコード | サブドメイン（www.example.com） | cname.vercel-dns.com |
DNS設定の反映には数分〜数時間かかることがあります。Vercelのダッシュボード上でドメインのステータスが「Valid Configuration」になれば設定完了です。SSL証明書はVercelが自動的に発行・更新するため、手動での設定は不要です。
Vercelを使いこなすためのヒント
アカウント作成とデプロイができたら、以下のポイントを押さえておくとVercelをさらに活用できます。
Vercel CLIを導入する： npm i -g vercelでCLIをインストールすると、ターミナルから直接デプロイやプレビューが可能になります。vercel devコマンドを使えば、Vercelの環境変数やサーバーレス関数をローカルで再現しながら開発できます。
Speed Insightsを有効にする： Vercelのダッシュボードから有効化できるパフォーマンス計測ツールです。Core Web Vitalsのスコアを実際のユーザーデータに基づいて確認でき、パフォーマンス改善の指針になります。
チーム開発に移行する場合： Hobbyプランは個人利用のみが対象です。商用プロジェクトやチームでの利用にはProプラン（月額$20/メンバー）への移行が必要になります。プランの違いはVercelの料金ページで確認してください。
v0を試してみる： Vercelが提供するAIコード生成ツール「v0」を使うと、プロンプトからUIコンポーネントを生成し、そのままVercelにデプロイできます。プロトタイピングの速度が格段に上がるので、興味があればv0の解説記事も参考にしてください。
