Officialコーディング&開発github.com

Vercel CLI with Tokens

トークンベースの認証を使用してVercelでプロジェクトをデプロイ・管理します。インタラクティブなログインではなくアクセストークンを使ってVercel CLIを操作する場合に使用します。

Vercel CLI with Tokens とは?

このスキルは、`vercel login`を使わずにトークンベースの認証でVercel CLIを実行する方法を提供します。開発者は環境変数`VERCEL_TOKEN`を設定するだけで、安全にVercelプロジェクトのデプロイ、管理、環境変数の設定、ドメイン管理などが行えます。トークンはシェルの履歴やプロセス一覧に漏洩しないよう、`--token`フラグではなく環境変数経由で渡すのがベストプラクティスです。また、`VERCEL_ORG_ID`と`VERCEL_PROJECT_ID`を併せて設定することで、`vercel link`なしでプロジェクトを直接指定でき、CI/CDや自動化ワークフローに最適です。プロジェクトが未リンクの場合は、gitリモートを使って自動リンクする`vercel link --repo`が推奨されます。デプロイはデフォルトでプレビュー環境に行い、本番デプロイはユーザーが明示的に要求した場合のみ行います。さらに、Stripe Projectsで管理されているプラン変更にも対応しており、有料プラン変更の前には必ずユーザーの承認を得るよう設計されています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/vercel-cli-with-tokens

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Vercel CLI with Tokens(トークン認証付き)

vercel loginに依存せず、CLIを使ってトークンベースの認証でVercel上のプロジェクトをデプロイ・管理します。

ステップ 1: Vercel トークンを特定する

Vercel CLIコマンドを実行する前に、トークンの取得元を特定します。以下のシナリオを順に確認してください。

A) 環境に VERCEL_TOKEN がすでに設定されている

printenv VERCEL_TOKEN

値が返ってきたら準備完了です。ステップ2に進んでください。

B) トークンが .env ファイル内の VERCEL_TOKEN にある

grep '^VERCEL_TOKEN=' .env 2>/dev/null

見つかった場合はエクスポートします:

export VERCEL_TOKEN=$(grep '^VERCEL_TOKEN=' .env | cut -d= -f2-)

C) トークンが .env ファイル内の別の変数名にある

Vercelトークン(通常 vca_ で始まる)のように見える変数を探します:

grep -i 'vercel' .env 2>/dev/null

出力を確認し、どの変数がトークンを保持しているか特定して、VERCEL_TOKEN としてエクスポートします:

export VERCEL_TOKEN=$(grep '^<VARIABLE_NAME>=' .env | cut -d= -f2-)

D) トークンが見つからない — ユーザーに問い合わせる

上記のいずれでもトークンが得られない場合、ユーザーにトークンの提供を依頼してください。ユーザーは vercel.com/account/tokens でVercelアクセストークンを作成できます。


重要: VERCEL_TOKEN が環境変数としてエクスポートされると、Vercel CLIはそれをネイティブに読み取ります — --token フラグとして渡さないでください。コマンドライン引数にシークレットを配置すると、シェル履歴やプロセス一覧に露出してしまいます。

# 悪い例 — トークンがシェル履歴やプロセス一覧に表示される
vercel deploy --token "vca_abc123"

# 良い例 — CLIが VERCEL_TOKEN を環境から読み取る
export VERCEL_TOKEN="vca_abc123"
vercel deploy

ステップ 2: プロジェクトとチームを特定する

同様に、プロジェクトIDとチームスコープを確認します。これにより、vercel link を必要とせずにCLIが正しいプロジェクトを対象にできます。

# 環境を確認
printenv VERCEL_PROJECT_ID
printenv VERCEL_ORG_ID

# または .env を確認
grep -i 'vercel' .env 2>/dev/null

プロジェクトURLがある場合(例: https://vercel.com/my-team/my-project)、チームスラッグを抽出します:

# 例: "https://vercel.com/my-team/my-project" から "my-team"
echo "$PROJECT_URL" | sed 's|https://vercel.com/||' | cut -d/ -f1

環境に VERCEL_ORG_ID と VERCEL_PROJECT_ID の両方がある場合、それらをエクスポートします — CLIはこれらを自動的に使用し、.vercel/ ディレクトリをスキップします:

export VERCEL_ORG_ID="<org-id>"
export VERCEL_PROJECT_ID="<project-id>"

注: VERCEL_ORG_ID と VERCEL_PROJECT_ID は必ず一緒に設定してください — 片方だけ設定するとエラーになります。

CLI セットアップ

Vercel CLIがインストールされ、最新であることを確認します:

npm install -g vercel
vercel --version

プロジェクトのデプロイ

ユーザーが明示的に本番を要求しない限り、常にプレビューとしてデプロイします。利用可能なものに応じて方法を選択してください。

クイックデプロイ(プロジェクトIDがある場合 — リンク不要)

環境に VERCEL_TOKEN と VERCEL_PROJECT_ID が設定されている場合、直接デプロイします:

vercel deploy -y --no-wait

チームスコープを使用する場合(VERCEL_ORG_ID または --scope 経由):

vercel deploy --scope <team-slug> -y --no-wait

本番(明示的に要求された場合のみ):

vercel deploy --prod --scope <team-slug> -y --no-wait

ステータスを確認:

vercel inspect <deployment-url>

完全なデプロイフロー(プロジェクトIDがない場合 — リンクが必要)

トークンとチームはあるが、既存のプロジェクトIDがない場合に使用します。

最初にプロジェクトの状態を確認

# プロジェクトに git リモートがあるか?
git remote get-url origin 2>/dev/null

# すでにVercelプロジェクトにリンクされているか?
cat .vercel/project.json 2>/dev/null || cat .vercel/repo.json 2>/dev/null

プロジェクトをリンク

git リモートがある場合(推奨):

vercel link --repo --scope <team-slug> -y

git リモートを読み取り、一致するVercelプロジェクトに接続します。.vercel/repo.json を作成します。ディレクトリ名で一致する単純な vercel link より信頼性が高くなります。

git リモートがない場合:

vercel link --scope <team-slug> -y

.vercel/project.json を作成します。

特定のプロジェクト名にリンク:

vercel link --project <project-name> --scope <team-slug> -y

プロジェクトがすでにリンクされている場合、.vercel/project.json または .vercel/repo.json の orgId をチェックして、意図したチームと一致することを確認します。

リンク後にデプロイ

A) Git Push デプロイ — git リモートがある場合(推奨)

Gitプッシュによって自動的にVercelデプロイがトリガーされます。

  1. プッシュ前にユーザーに確認してください。 明示的な承認なしにプッシュしないでください。
  2. コミットしてプッシュ:
    git add .
    git commit -m "deploy: <変更内容の説明>"
    git push
    
  3. Vercelが自動的にビルドします。非本番ブランチはプレビューデプロイメントになります。
  4. デプロイURLを取得:
    sleep 5
    vercel ls --format json --scope <team-slug>
    
    deployments 配列から最新のエントリを見つけます。

B) CLI デプロイ — git リモートがない場合

vercel deploy --scope <team-slug> -y --no-wait

ステータスを確認:

vercel inspect <deployment-url>

リモートリポジトリからのデプロイ(コードがローカルにクローンされていない場合)

  1. リポジトリをクローン:
    git clone <repo-url>
    cd <repo-name>
    
  2. Vercelにリンク:
    vercel link --repo --scope <team-slug> -y
    
  3. git push(プッシュアクセスがある場合)またはCLIデプロイでデプロイします。

.vercel/ ディレクトリについて

リンクされたプロジェクトには次のいずれかがあります:

  • .vercel/project.json — vercel link による。projectId と orgId を含む。
  • .vercel/repo.json — vercel link --repo による。orgId、remoteName、および projects マップを含む。

VERCEL_ORG_ID + VERCEL_PROJECT_ID の両方が環境に設定されている場合は不要です。

リンクされていないディレクトリで vercel project inspect や vercel link を実行して状態を検出しないでください。 インタラクティブにプロンプトが表示されたり、副作用としてリンクが行われたりします。vercel ls は安全です(リンクされていないディレクトリでは、デフォルトでスコープのすべてのデプロイメントが表示されます)。vercel whoami はどこでも安全です。

環境変数の管理

# 全環境に設定
エコー "値" | vercel env add VAR_NAME --scope <team-slug>

# 特定の環境に設定(production、preview、development)
エコー "値" | vercel env add VAR_NAME production --scope <team-slug>

# 環境変数の一覧表示
vercel env ls --scope <team-slug>

# 環境変数をローカルの .env.local ファイルにプル
vercel env pull --scope <team-slug>

# 変数を削除
vercel env rm VAR_NAME --scope <team-slug> -y

デプロイメントの検査

# 最近のデプロイメントを一覧表示
vercel ls --format json --scope <team-slug>

# 特定のデプロイメントを検査
vercel inspect <deployment-url>

# ビルドログを表示(Vercel CLI v35+ が必要)
vercel inspect <deployment-url> --logs

# ランタイムリクエストログを表示(デフォルトでライブフォロー、--no-follow でスナップショット)
vercel logs <deployment-url>

ドメインの管理

# ドメインを一覧表示
vercel domains ls --scope <team-slug>

# プロジェクトにドメインを追加 — リンク済みまたは環境リンク済みディレクトリ(引数1つ)
vercel domains add <domain> --scope <team-slug>

# ドメインを追加 — リンクされていないディレクトリ(<project> 位置引数が必要)
vercel domains add <domain> <project> --scope <team-slug>

Stripe Projects プラン変更

このプロジェクトが Stripe Projects によって管理されている場合。有料または破壊的なプラン変更を実行する前にはユーザーに確認してください — アップグレードでは実際のカードに請求が発生し、ダウングレードではシートが削除されます。

最初に stripe projects status --json を実行して、Vercelリソースのローカル名を確認します。以下の例ではデフォルト(vercel-plan)を想定しています。stripe projects add 時にリネームされている場合は、実際の名前に置き換えてください。

  • Pro にアップグレード: stripe projects add vercel/pro(または stripe projects upgrade vercel-plan pro)
  • Hobby にダウングレード: stripe projects downgrade vercel-plan hobby

Pro で得られるもの

  • 月額 $20 のプラットフォーム料金、月額 $20 の使用クレジット込み。
  • 新規プロジェクトでデフォルトで Turbo ビルドマシン(30 vCPU、60 GB メモリ) — Hobby より大幅に高速なビルド。
  • 1 デプロイシート + 無制限の無料 Viewer シート(読み取り専用コラボレーター、プレビューコメント)。
  • より高い割り当て(月 1 TB の Fast Data Transfer、月 10M Edge Requests)。
  • 有料アドオン利用可能:SAML SSO、HIPAA BAA、Flags Explorer、Observability Plus、Speed Insights、Web Analytics Plus。

詳細: https://vercel.com/docs/plans/pro-plan

作業合意事項

  • VERCEL_TOKEN を --token フラグとして絶対に渡さないでください。 環境変数としてエクスポートし、CLIにネイティブに読み取らせてください。
  • ユーザーに問い合わせる前に、環境内のトークンを確認してください。 最初に現在の環境と .env ファイルを調べてください。
  • デフォルトでプレビューデプロイメントにしてください。 明示的に要求された場合のみ本番にデプロイしてください。
  • git にプッシュする前に確認してください。 ユーザーの承認なしにコミットをプッシュしないでください。
  • .vercel/ ファイルを直接変更しないでください。 CLIがこのディレクトリを管理します。読み取り(例:orgId の確認)は問題ありません。
  • デプロイされたURLを curl/fetch で確認しないでください。 リンクをユーザーに返すだけで構いません。
  • 構造化された出力が後続のステップに役立つ場合、--format json を使用してください。
  • 確認を促すコマンドでは -y を使用して、インタラクティブなブロックを避けてください。

トラブルシューティング

トークンが見つからない

環境と存在する .env ファイルを確認します:

printenv | grep -i vercel
grep -i vercel .env 2>/dev/null

認証エラー

CLIが Authentication required で失敗した場合:

  • トークンが期限切れか無効である可能性があります。
  • 確認: vercel whoami(環境から VERCEL_TOKEN を使用)。
  • ユーザーに新しいトークンを依頼してください。

チームが間違っている

スコープが正しいことを確認します:

vercel whoami --scope <team-slug>

ビルド失敗

ビルドログを確認します:

vercel inspect <deployment-url> --logs

よくある原因:

  • 依存関係が不足している — package.json が完全でコミットされていることを確認してください。
  • 環境変数が不足している — vercel env add で追加してください。
  • フレームワーク設定の誤り — vercel.json を確認してください。Vercelは package.json からフレームワーク(Next.js、Remix、Vite など)を自動検出します。検出が間違っている場合は vercel.json で上書きしてください。

CLI がインストールされていない

npm install -g vercel

Individual skills in this repo

This repo contains 11 individual skills — each has its own dedicated page.

deploy-to-vercel

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".

vercel-composition-patterns

React composition patterns that scale. Use when refactoring components with

vercel-labs/vercel-composition-patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

vercel-labs/vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

vercel-labs/vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

vercel-labs/vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

vercel-optimize

Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel/framework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use

web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to

writing-guidelines

Review docs/prose for Writing Guidelines compliance. Use when asked to

関連スキル