mcpField
V
vercel-deploy

vercel-deploy

github.com/jst-well-danクラウド・DevOps1036 回インストール31 週間前に更新
リポジトリ

vercel-deploy について

vercel-deploy は、認証なしでプロジェクトを Vercel にデプロイするコマンドラインスキルです。プロジェクトをパッケージ化してフレームワークを判別・アップロードし、プレビュー URL とクレーム URL を返します。

主な機能

  1. 01node_modules と .git を除いてパッケージ化
  2. 02package.json からフレームワークを判別
  3. 03プロジェクトをアップロードしてデプロイ
  4. 04プレビュー URL とクレーム URL の出力
  5. 05ディレクトリと .tgz ファイルに対応
  6. 06JSON 出力

活用シーン

  1. 01現在のディレクトリや指定プロジェクトのデプロイ
  2. 02既存の .tgz プロジェクトアーカイブのデプロイ
  3. 03プレビュー URL でデプロイ結果を確認
  4. 04デプロイを Vercel アカウントへ移行

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/jst-well-dan/skill-box --skill vercel-deploy

インストール後、Claude Code で/vercel-deployを入力して読み込まれたか確認します。

同梱ファイルscripts/deploy.sh

詳細

Vercel Deploy

認証なしで、あらゆるプロジェクトを即座に Vercel にデプロイします。

仕組み

  1. プロジェクトを tarball にパッケージ化します（node_modules と .git は除外されます）
  2. package.json からフレームワークを自動検出します
  3. デプロイサービスにアップロードします
  4. Preview URL（公開中のサイト）と Claim URL（ご自身の Vercel アカウントへの移管用）を返します

使い方

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

引数:

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

例:

# Deploy current directory
bash /mnt/skills/user/vercel-deploy/scripts/deploy.sh

# Deploy specific project
bash /mnt/skills/user/vercel-deploy/scripts/deploy.sh /path/to/project

# Deploy existing tarball
bash /mnt/skills/user/vercel-deploy/scripts/deploy.sh /path/to/project.tgz

出力

Preparing deployment...
Detected framework: nextjs
Creating deployment package...
Deploying...
✓ Deployment successful!

Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL:   https://vercel.com/claim-deployment?code=...

スクリプトはプログラムから利用できるように、標準出力に JSON も出力します:

{
  "previewUrl": "https://skill-deploy-abc123.vercel.app",
  "claimUrl": "https://vercel.com/claim-deployment?code=...",
  "deploymentId": "dpl_...",
  "projectId": "prj_..."
}

フレームワーク検出

スクリプトは package.json からフレームワークを自動検出します。対応しているフレームワークは以下のとおりです:

  • React: Next.js, Gatsby, Create React App, Remix, React Router
  • Vue: Nuxt, Vitepress, Vuepress, Gridsome
  • Svelte: SvelteKit, Svelte, Sapper
  • その他のフロントエンド: Astro, Solid Start, Angular, Ember, Preact, Docusaurus
  • バックエンド: Express, Hono, Fastify, NestJS, Elysia, h3, Nitro
  • ビルドツール: Vite, Parcel
  • その他: Blitz, Hydrogen, RedwoodJS, Storybook, Sanity など

静的な HTML プロジェクト（package.json がないもの）の場合、フレームワークは null に設定されます。

静的 HTML プロジェクト

package.json がないプロジェクトの場合:

  • index.html という名前ではない .html ファイルが 1 つだけあれば、自動的に名前が変更されます
  • これにより、ページがルート URL（/）で配信されるようになります

結果をユーザーに提示する

必ず両方の URL を表示してください:

✓ Deployment successful!

Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL:   https://vercel.com/claim-deployment?code=...

View your site at the Preview URL.
To transfer this deployment to your Vercel account, visit the Claim URL.

トラブルシューティング

ネットワーク送信エラー

ネットワーク制限（claude.ai で多く発生します）によりデプロイが失敗した場合は、ユーザーに以下を伝えてください:

Deployment failed due to network restrictions. To fix this:

1. Go to https://claude.ai/admin-settings/capabilities
2. Add *.vercel.com to the allowed domains
3. Try deploying again

コメント

Markdown 対応