VercelのCLIとは？インストールとデプロイ手順【プロが解説】

モダンWeb開発2026.04.162026.04.16

執筆者編集部

MT Templates 編集部

監修者MT Templates 代表/編集長

大野浩史

この記事のポイント

Vercel CLIはターミナル上でデプロイや環境変数を管理するツールであり、npmによるインストール後、ローカル開発（vercel dev）、プレビュー、本番反映（--prod）、GitHub連携によるデプロイ自動化を実現してフロントエンド開発を効率化します。

「Vercel CLIのインストール方法や基本的な使い方を知り、コマンドラインからデプロイや環境設定を効率化してスムーズな開発環境を構築したい」という悩みはありませんか。

こうした疑問に答えます。

本記事の内容

Vercel CLIのインストールとログイン手順
プレビュー・本番環境へのデプロイ方法
実務で役立つ主要コマンドとエラー対処法

Vercel CLIを活用すれば、ブラウザを開くことなくターミナルから直接デプロイや環境変数の管理が完結します。まずはVercel CLIをinstallして、Vercel CLIにloginすることから始めましょう。

Vercel CLIでlink設定を行えば、GitHubのリポジトリと連携したVercel CLIのGitHub運用もスムーズです。また、Vercel CLIでdevコマンドを実行することで、VercelでのDevelopment環境をローカルで再現できます。Vercelのpublicディレクトリの扱いなど、デプロイ時の詳細な仕様についても解説。手作業によるミスを減らし、自動化されたモダンなフロントエンド開発を実現するために、本ガイドをぜひ役立ててください。

Vercel CLIのインストール手順

Vercel CLIは、vercelとはNext.js開発元が提供するプラットフォームに対し、ターミナルから直接デプロイや環境設定を行うための強力なコマンドラインツールです。ブラウザのダッシュボードを介さず操作できるため、開発プロセスの自動化に役立ちます。

セットアップを進めることで、ローカル環境からVercel Developmentのインフラを自在に制御可能です。効率的なワークフローを構築しましょう。

Node.jsを用意する

Vercel CLIを動作させるには、実行環境としてNode.jsが必要です。

Vercel CLIはJavaScript環境で動くパッケージなので、付属のnpmを使ってインストールを行います。最新の安定版（LTS）を導入して、互換性のトラブルを回避しましょう。

必要項目	詳細	備考
実行環境	Node.js	推奨：LTS（長期サポート版）
パッケージマネージャー	npm	Node.js導入時に自動付随

Node.jsがインストール済みか確認するには、ターミナルでnode -vコマンドを実行してください。

npmでインストールする

Node.jsの準備が整ったら、Vercel CLI本体をシステムへ導入します。

Vercel cli installを実行する際は、グローバルインストールを指定しましょう。どのディレクトリからでもコマンドを呼び出せるようになります。

npmを使用する場合：npm install -g vercel
yarnを使用する場合：yarn global add vercel
pnpmを使用する場合：pnpm add -g vercel

インストール完了後、vercel --versionを実行してバージョンが表示されれば成功です。

Vercelにログインする

CLIを導入した後は、個人のアカウントを操作するための認証作業を行います。

Vercel CLI loginを実行して、ローカル環境とクラウド環境を紐付けましょう。これにより特定のプロジェクトに対するデプロイ権限などを取得できます。

ターミナルでvercel loginと入力
GitHubやEmailなどの認証方法を選択
ブラウザで画面の指示に従い承認
Successの表示を確認

一度ログインすれば認証情報は保持されます。毎回ログインし直す手間はかかりません。

プロジェクトをリンクする

最後に、ローカルの開発ディレクトリとVercel上のプロジェクトを結びつける作業を行います。

Vercel cli linkを実行することで、プロジェクト間の設定が同期されます。環境変数の管理や、コマンド一つでのプレビューデプロイが可能になる重要な手順です。

既存プロジェクトのリンク：プロジェクトのルートでvercel linkを実行
新規プロジェクトの作成：vercel initなどの雛形を活用
GitHub連携の利用：Vercel CLI githubに関連する設定を確認

リンクが完了すると、ディレクトリ内に設定保存用のフォルダが作成されます。これ以降はVercel cli devによるローカル開発環境の起動や、Vercel public設定の反映がスムーズに進みます。

Vercel CLIでのデプロイ手順

Vercel CLIを利用すれば、ブラウザのダッシュボードを通さずコマンドラインから素早くデプロイできます。開発効率を上げるため、ローカル検証からVercel CLI github連携による自動化までの流れを理解しましょう。

① ローカルサーバーを起動する

本番環境へ反映する前に、Vercel Developmentを手元の環境で再現して動作確認を行います。Vercel CLIにはクラウド環境をシミュレートする便利なコマンドが備わっており、VercelとNext.jsの連携を行うプロジェクトにも標準対応しています。

プロジェクトのルートディレクトリで、npm installを実行して依存関係を整理します
vercel devコマンドを入力して、開発用サーバーを立ち上げます

vercel devは環境変数やエッジ関数の挙動も再現します。フレームワーク独自の起動コマンドよりも、実際の公開環境に近い状態でテストできる点が大きなメリットです。

② プレビュー環境にデプロイする

ローカルでの確認が終われば、次は検証専用のURLが発行されるプレビュー環境へデプロイします。基本的なVercelデプロイの手順はGUIでも同様で、Vercel publicな設定を維持しつつ安全に変更内容を確認できるステップです。

vercel linkでプロジェクトを連携済みであることを確認した上で、ターミナルにvercelコマンドを入力してください。プレビュー環境と本番環境の違いは以下のとおりです。

項目	プレビューデプロイ	本番デプロイ
実行コマンド	vercel	vercel --prod
公開範囲	発行される独自のURL	プロジェクトのメインドメイン
主な用途	チーム内での確認や動作確認	最終的なリリース

③ 本番環境にデプロイする

プレビュー環境の内容に問題がなければ、メインドメインに反映する本番デプロイを実施します。Vercel cli デプロイの仕上げとして、以下のオプションを活用しましょう。

実行コマンドはvercel --prodを利用します

このコマンドで実行すると、Vercel側で本番用ビルドが処理されます。CI/CDパイプラインを介さずに、手元のPCから即座に最新コードを本番へ反映したい場合に役立つ手法です。

④ GitHubにプッシュして自動化する

手動の作業だけでなく、Git Pushをきっかけに自動で公開される仕組みを構築しましょう。Vercel CLI install後にVercelとGitHub連携の設定を済ませれば、チーム開発でのミスを防ぎ効率化が進みます。

git pushを実行して、GitHubのリポジトリへコードを送信します
Vercelのプロジェクト設定から、対象のリポジトリを接続してください

メインブランチへのプッシュをトリガーに、ビルドとデプロイが自動で開始されます。詳細な設定はCLIで行い、日常の更新は自動化に任せるのがモダンな開発のベストプラクティスです。

実務で役立つVercel CLIの主要コマンド

Vercel CLIを活用すれば、ターミナルからプロジェクト管理やデプロイを一元的に操作できます。開発効率を向上させるために、主要なコマンドの役割と使い方をマスターしましょう。

CLIの導入にはNode.jsが必要です。以下のコマンドでVercel cli installを実行してください。

インストールコマンド：npm i -g vercel@latest

最新のVercel CLIでは、プレビューと本番のデプロイが明確に区別されています。単にvercelと入力した場合は、プレビュー環境へデプロイされる仕組みです。

アカウントを認証するコマンド

Vercel CLIを使用する最初のステップとして、自身のアカウントを認証します。この操作により、ローカル環境とVercelのクラウドプラットフォームが安全に紐付けられます。

Vercel CLI login：ブラウザベースでログイン認証を実行
vercel whoami：現在ログインしているユーザー名の確認
vercel logout：現在のセッションからログアウト

現在はセキュリティを考慮し、ブラウザを介した認証フローが標準となりました。二要素認証を設定している場合も、この方法でスムーズにログインできます。

プロジェクトをリンクするコマンド

ローカルのディレクトリをVercel上のプロジェクトと紐付けるには、Vercel cli linkを使用します。これにより、どのプロジェクトに設定やデプロイを適用するかCLIが正しく認識します。

Vercel cli link：ローカルディレクトリをVercelプロジェクトに接続
vercel project ls：接続されているプロジェクトの一覧を表示
Vercel CLI github：GitHubリポジトリをVercelに自動で接続

linkコマンドの実行中に、その場で新しいプロジェクトを作成することも可能です。--yesフラグを使用すれば、対話形式の質問をスキップして素早く設定を完了でき、必要に応じてVercelドメイン設定もコマンドラインから操作できます。

ローカルサーバーを起動するコマンド

開発中にコードの変更を即座に確認するため、Vercel cli devによるローカルサーバーの起動が欠かせません。Vercel Development環境を構築することで、クラウドに近い状態で動作確認が行えます。

Vercel cli dev：ローカル開発サーバーを起動（デフォルトはlocalhost:3000）

vercel devはAPIルートや環境変数のエミュレートも同時に行います。本番環境との差異を最小限に抑えつつ、効率的にデプロイ前のテストを実行可能です。

環境変数を設定するコマンド

セキュリティ情報やAPIキーなどの環境変数は、CLIを通じて安全に管理しましょう。複数の開発メンバーがいる場合、CLIを用いた一元管理が非常に便利です。

コマンド	内容
vercel env ls	設定されている環境変数の一覧を表示
vercel env add	新しい環境変数を対話形式で追加
vercel env pull	Vercel上の環境変数をローカルに同期

特にvercel env pullは非常に重要な役割を持ちます。ダッシュボードでのVercel環境変数の設定をローカルへ即座に反映できるため、設定ミスによるエラーを未然に防ぎます。

Vercel CLIでよくあるエラーの対処法

Vercel CLIは、ターミナルから直接デプロイや環境設定を操作できる強力なツールです。設定の不備や環境の不整合により、エラーが発生する場合も少なくありません。

開発効率を維持するため、エラーの根本原因を特定して適切なコマンドで対処しましょう。Vercel CLIの運用で頻出するトラブルと解決策を解説します。

コマンドが認識されない場合の対処法

Vercel CLI導入直後やプロジェクト構成の変更時に、コマンドが動かないことがあります。主な原因は、インストールパスの不備やプロジェクト構造の認識ミスです。

コマンドが認識されない場合や、ビルドに失敗する原因と対処法をまとめました。

現象	原因	対処法
「command not found: vercel」と表示	パス未通または未インストール	`npm install -g vercel` でVercel cli installを再実行
Next.jsプロジェクトと認識されない	フレームワーク検出の失敗	`vercel.json` に framework を明記する
ビルドエラー（Exited with 1）発生	依存関係やキャッシュの不整合	`node_modules` と `.vercel` フォルダを削除する