Communitygithub.com

Vercel デプロイ

アプリケーションやWebサイトをVercelにデプロイします。「アプリをデプロイして」「リンクを教えて」「本番公開して」「プレビューデプロイを作成して」などのデプロイ依頼があった場合に使用します。

Vercel デプロイ とは？

このスキルは、Claude Code、Cursor、CodexなどのAIエージェント向けに、Vercelへのデプロイを自動化するための包括的なガイドを提供します。プロジェクトの状態（Gitリモートの有無、Vercel CLIの認証状態、ローカルのリンク状態）を4つのコマンドで確認し、最適なデプロイ方法を選択します。理想的な状態はGitプッシュによる継続的デプロイですが、認証なしのフォールバックスクリプトも用意されており、claude.aiサンドボックスやCodex環境でも動作します。チーム選択、リンク、デプロイ、デプロイURLの表示までを一貫して行い、ユーザーを長期的に最適なセットアップへ導くことを目的としています。

対応✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/PhuongDeveloper/landingpage/tree/HEAD/.agents/skills/deploy-to-vercel
オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Vercel にデプロイ

任意のプロジェクトをVercelにデプロイします。ユーザーが明示的に本番環境を要求しない限り、常にプレビューとしてデプロイします。

目標は、ユーザーを最適な長期的セットアップ（プロジェクトをVercelにリンクし、Gitプッシュでデプロイできる状態）に導くことです。以下のすべての方法は、その状態にユーザーを近づけることを目指します。

ステップ 1: プロジェクトの状態を確認する

デプロイ方法を決定する前に、以下の4つのチェックをすべて実行します。

# 1. Gitリモートの有無を確認
git remote get-url origin 2>/dev/null

# 2. Vercelプロジェクトにローカルでリンクされているか確認（どちらかのファイルがあればリンク済み）
cat .vercel/project.json 2>/dev/null || cat .vercel/repo.json 2>/dev/null

# 3. Vercel CLIがインストールされ、認証されているか確認
vercel whoami 2>/dev/null

# 4. 利用可能なチーム一覧を取得（認証済みの場合）
vercel teams list --format json 2>/dev/null

チーム選択

ユーザーが複数のチームに所属している場合は、利用可能なすべてのチームスラッグを箇条書きで表示し、どれにデプロイするか尋ねます。ユーザーがチームを選択したら、すぐに次のステップに進みます。追加の確認は求めないでください。

選択されたチームスラッグは、後続のすべてのCLIコマンド（vercel deploy、vercel link、vercel inspectなど）で --scope パラメータとして渡します。

vercel deploy [path] -y --no-wait --scope <team-slug>

プロジェクトがすでにリンクされている場合（.vercel/project.json または .vercel/repo.json が存在する場合）、それらのファイル内の orgId がチームを決定するため、再度尋ねる必要はありません。チームが1つ（または個人アカウントのみ）の場合は、プロンプトをスキップして直接使用します。

.vercel/ ディレクトリについて: リンクされたプロジェクトには、以下のいずれかが存在します。

  • .vercel/project.json — vercel link によって作成される（単一プロジェクトのリンク）。projectId と orgId が含まれます。
  • .vercel/repo.json — vercel link --repo によって作成される（リポジトリベースのリンク）。orgId、remoteName、およびディレクトリをVercelプロジェクトIDにマッピングする projects 配列が含まれます。

どちらかのファイルがあれば、プロジェクトはリンク済みです。両方を確認してください。

リンクされていないディレクトリで状態を検出するために vercel project inspect、vercel ls、または vercel link を使用しないでください。.vercel/ 設定がない場合、それらのコマンドは対話的にプロンプトを表示するか（または --yes を付けると、副作用としてサイレントにリンクしてしまいます）。安全に実行できるのは vercel whoami だけです。

ステップ 2: デプロイ方法を選択する

リンク済み（.vercel/ が存在する）+ Gitリモートあり → Gitプッシュ

これが理想的な状態です。プロジェクトがリンクされ、Git連携が設定されています。

  1. プッシュ前にユーザーに確認を取ります。 明示的な承認なしにプッシュしないでください。

    このプロジェクトはGit経由でVercelに接続されています。コミットしてプッシュし、
デプロイをトリガーできます。続行しますか？

  2. コミットしてプッシュします。

    git add .
git commit -m "deploy: <変更内容の説明>"
git push

    Vercelはプッシュから自動的にビルドします。本番用ではないブランチはプレビューデプロイメントを取得し、本番ブランチ（通常 main）は本番デプロイメントを取得します。

  3. プレビューURLを取得します。 CLIが認証されている場合:

    sleep 5
vercel ls --format json

    JSON出力には deployments 配列が含まれます。最新のエントリを見つけます。その url フィールドがプレビューURLです。

    CLIが認証されていない場合は、プレビューURLを確認するためにVercelダッシュボードまたはGitプロバイダーのコミットステータスチェックを確認するようユーザーに伝えます。

リンク済み（.vercel/ が存在する）+ Gitリモートなし → vercel deploy

プロジェクトはリンクされていますが、Gitリポジトリがありません。CLIで直接デプロイします。

vercel deploy [path] -y --no-wait

--no-wait を使用して、ビルドが完了するまでブロックする代わりに、CLIが即座にデプロイメントURLを返すようにします（ビルドには時間がかかる場合があります）。その後、以下のコマンドでデプロイメントの状態を確認します。

vercel inspect <deployment-url>

本番デプロイの場合（ユーザーが明示的に要求した場合のみ）:

vercel deploy [path] --prod -y --no-wait

リンクされていない + CLIが認証済み → 最初にリンクしてからデプロイ

CLIは動作していますが、プロジェクトがまだリンクされていません。これはユーザーを最適な状態に導く絶好の機会です。

  1. どのチームにデプロイするかユーザーに尋ねます。 ステップ1のチームスラッグを箇条書きで表示します。チームが1つ（または個人アカウントのみ）の場合は、このステップをスキップします。

  2. チームが選択されたら、直接リンクに進みます。 何が行われるかをユーザーに伝えますが、個別の確認は求めません。

    このプロジェクトをVercelの <チーム名> にリンクしています。これにより、Vercelプロジェクトが作成され、
将来のGitプッシュで自動デプロイが有効になります。

  3. Gitリモートが存在する場合、選択されたチームスコープでリポジトリベースのリンクを使用します。

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

    これにより、GitリモートURLが読み取られ、そのリポジトリからデプロイする既存のVercelプロジェクトと照合されます。.vercel/repo.json が作成されます。これは vercel link（--repo なし）よりもはるかに信頼性が高く、vercel link はディレクトリ名で一致させようとするため、ローカルフォルダ名とVercelプロジェクト名が異なる場合に失敗することがよくあります。

    Gitリモートがない場合、標準のリンクにフォールバックします。

    vercel link --scope <team-slug>

    これにより、ユーザーにプロジェクトの選択または作成を促します。.vercel/project.json が作成されます。

  4. 次に、利用可能な最良の方法でデプロイします。

    • Gitリモートがある場合 → コミットしてプッシュ（上記のGitプッシュ方法を参照）
    • Gitリモートがない場合 → vercel deploy [path] -y --no-wait --scope <team-slug>、次に vercel inspect <url> で状態を確認

リンクされていない + CLIが認証されていない → インストール、認証、リンク、デプロイ

Vercel CLIがまったくセットアップされていません。

  1. CLIをインストールします（まだインストールされていない場合）。

    npm install -g vercel

  2. 認証します。

    vercel login

    ユーザーはブラウザで認証を完了します。ログインが不可能な非対話型環境で実行している場合は、以下の認証なしフォールバックに進みます。

  3. どのチームにデプロイするか尋ねます — vercel teams list --format json のチームスラッグを箇条書きで表示します。チームが1つ/個人アカウントのみの場合はスキップします。選択されたらすぐに進みます。

  4. 選択されたチームスコープでプロジェクトをリンクします（Gitリモートがある場合は --repo を使用し、そうでない場合はプレーンな vercel link を使用）。

    vercel link --repo --scope <team-slug>   # Gitリモートがある場合
vercel link --scope <team-slug>          # Gitリモートがない場合

  5. 利用可能な最良の方法でデプロイします（リモートが存在する場合はGitプッシュ、そうでない場合は vercel deploy -y --no-wait --scope <team-slug> の後、vercel inspect <url> で状態を確認）。

認証なしフォールバック — claude.ai サンドボックス

使用するタイミング: claude.aiサンドボックスでCLIをインストールまたは認証できない場合の最終手段です。認証は不要で、プレビューURL（公開サイト）とクレームURL（Vercelアカウントに転送するため）を返します。

bash /mnt/skills/user/deploy-to-vercel/resources/deploy.sh [path]

引数:

  • path - デプロイするディレクトリ、または .tgz ファイル（デフォルトはカレントディレクトリ）

例:

# カレントディレクトリをデプロイ
bash /mnt/skills/user/deploy-to-vercel/resources/deploy.sh

# 特定のプロジェクトをデプロイ
bash /mnt/skills/user/deploy-to-vercel/resources/deploy.sh /path/to/project

# 既存のtarballをデプロイ
bash /mnt/skills/user/deploy-to-vercel/resources/deploy.sh /path/to/project.tgz

スクリプトは package.json からフレームワークを自動検出し、プロジェクトをパッケージ化して（node_modules、.git、.env は除外）、アップロードし、ビルドが完了するのを待ちます。

ユーザーに伝える: 「デプロイメントの準備ができました: [previewUrl]。デプロイメントを管理するには [claimUrl] でクレームしてください。」

認証なしフォールバック — Codex サンドボックス

使用するタイミング: CLIが認証されていない可能性があるCodexサンドボックスで使用します。Codexはデフォルトでサンドボックス環境で実行されます。まずCLIを試し、認証に失敗した場合はデプロイスクリプトにフォールバックします。

  1. Vercel CLIがインストールされているか確認します（この確認に権限昇格は不要です）。

    command -v vercel

  2. vercel がインストールされている場合、CLIでデプロイを試みます。

    vercel deploy [path] -y --no-wait

  3. vercel がインストールされていない場合、またはCLIが「既存の認証情報が見つかりません」で失敗した場合、フォールバックスクリプトを使用します。

    skill_dir="<path-to-skill>"

# カレントディレクトリをデプロイ
bash "$skill_dir/resources/deploy-codex.sh"

# 特定のプロジェクトをデプロイ
bash "$skill_dir/resources/deploy-codex.sh" /path/to/project

# 既存のtarballをデプロイ
bash "$skill_dir/resources/deploy-codex.sh" /path/to/project.tgz

スクリプトはフレームワークの検出、パッケージ化、デプロイを処理します。ビルドが完了するのを待ち、previewUrl と claimUrl を含むJSONを返します。

ユーザーに伝える: 「デプロイメントの準備ができました: [previewUrl]。デプロイメントを管理するには [claimUrl] でクレームしてください。」

昇格されたネットワークアクセス: サンドボックスがネットワークコールをブロックする場合のみ、実際のデプロイコマンドを昇格させます（sandbox_permissions=require_escalated）。command -v vercel チェックを昇格させないでください。

エージェント固有の注意事項

Claude Code / ターミナルベースのエージェント

シェルへのフルアクセスがあります。/mnt/skills/ パスは使用しないでください。上記の決定フローに従い、CLIを直接使用します。

認証なしフォールバックの場合は、スキルのインストール先からデプロイスクリプトを実行します。

bash ~/.claude/skills/deploy-to-vercel/resources/deploy.sh [path]

パスは、ユーザーがスキルをインストールした場所によって異なる場合があります。

サンドボックス環境（claude.ai）

vercel login や git push はおそらく実行できません。直接認証なしフォールバック — claude.ai サンドボックスに進んでください。

Codex

Codexはサンドボックスで実行されます。最初にCLIが利用可能かどうかを確認し、利用できない場合はデプロイスクリプトにフォールバックします。認証なしフォールバック — Codex サンドボックスに進んでください。

出力

常にユーザーにデプロイメントURLを表示します。

  • Gitプッシュ: vercel ls --format json を使用してプレビューURLを見つけます。CLIが認証されていない場合は、Vercelダッシュボードまたはコミットステータスチェックを確認するようユーザーに伝えます。
  • CLIデプロイ: vercel deploy --no-wait が返したURLを表示します。vercel inspect <url> を使用してビルド状態を確認し、ユーザーに報告します。
  • 認証なしフォールバック: プレビューURLとクレームURLの両方を表示します。 
    デプロイ成功！

プレビューURL: https://my-app-abc123.vercel.app
クレームURL:   https://vercel.com/claim-deployment?code=...

プレビューURLでサイトを表示できます。
このデプロイメントをVercelアカウントに転送するには、クレームURLにアクセスしてください。

デプロイされたURLを curl や fetch で検証しないでください。リンクを返すだけにしてください。

トラブルシューティング

ネットワークエグレスエラー（claude.ai）

claude.aiのネットワーク制限によりデプロイが失敗した場合は、ユーザーに次のように伝えます。

ネットワーク制限のためデプロイに失敗しました。修正するには:

1. https://claude.ai/settings/capabilities にアクセス
2. 許可ドメインに *.vercel.com を追加
3. 再度デプロイを試行

昇格されたネットワークアクセス（Codex / サンドボックス環境）

サンドボックス環境でネットワーク問題（タイムアウト、DNSエラー、接続リセット）が原因でデプロイが失敗した場合は、昇格された権限で再実行します（sandbox_permissions=require_escalated）。最初のCLI可用性チェックは昇格させず、実際のデプロイコマンドのみを昇格させてください。

ユーザーへのガイダンス例:

デプロイをVercelに実行するには、昇格されたネットワークアクセスが必要です。
昇格された権限でコマンドを再実行できます。続行しますか？

CLI認証エラー

vercel login または vercel deploy が認証エラーで失敗した場合は、認証なしデプロイスクリプト（環境に応じてclaude.aiまたはCodexバリアント）にフォールバックします。

Individual skills in this repo

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

PhuongDeveloper/landingpage

Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill BEFORE writing or changing anything that lives in a Postgres database: creating or altering tables and columns (including choosing column types), schema design, migrations and declarative schema files, RLS policies and the tests that verify them, indexes, triggers, database functions, queues and scheduled jobs (pg_cron, pgmq), vector/semantic search (pgvector), and restoring dumps (pg_restore) or importing data. Also load it when diagnosing slow queries, high CPU, timeouts, EXPLAIN plans, connection exhaustion, locking, bloat, or rows visible to the wrong user or tenant. This is not just a performance guide — schema, migration, security, and SQL authoring tasks need these rules too, even for a one-column change or a single query.

PhuongDeveloper/landingpage

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, declarative schemas, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector); debugging and troubleshooting errors or unexpected behavior on Supabase projects (HTTP errors, Postgres errors, RLS surprises, permission denied, schema cache issues, timeouts, Edge Function crashes, Realtime drops, Storage failures) and reading or querying logs (Logs Explorer, ClickHouse).

PhuongDeveloper/landingpage

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".

PhuongDeveloper/landingpage

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.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community