Vercel ワンクリックデプロイ

学習後、できること

Claude にプロジェクトを Vercel にデプロイさせることが一言で可能。手動設定不要
アクセス可能なプレビューリンクと所有権譲渡リンクを取得
プロジェクトのフレームワークを自動認識（Next.js、React、Vue、Svelte など 40 以上）
静的 HTML ウェブサイトを処理し、単一ファイルのリネームをサポート

現在の課題

プロジェクトを他人と共有したいとき、毎回以下が必要です：

手動で Vercel ウェブサイトにログイン
新規プロジェクトを作成
Git リポジトリを接続
ビルド完了を待機
長い URL を記憶して他人に共有

単に demo やプロトタイプを迅速に表示したいだけの場合、これらの手順は非常に面倒です。

使用タイミング

以下のシナリオに適しています：

🚀 チーム内で迅速にプロジェクトプレビューを作成して共有
📦 demo を顧客や友人に表示
🔄 CI/CD で自動的にプレビューデプロイを生成
🌐 静的 HTML ページまたは単一ページアプリケーションのデプロイ

コアコンセプト

Vercel Deploy スキルのワークフローは非常にシンプルです：

あなたの発言 → Claude がキーワードを検出 → デプロイスキルを有効化
    ↓
          フレームワークタイプを検出（package.json から）
    ↓
          プロジェクトをパッケージ化（node_modules と .git を除外）
    ↓
          Vercel API にアップロード
    ↓
          2 つのリンクを返却（プレビュー + 所有権譲渡）

なぜ 2 つのリンクが必要？

Preview URL: 即座にアクセス可能なプレビューアドレス
Claim URL: このデプロイをあなたの Vercel アカウントに転送

この設計のメリット：デプロイ担当者（Agent）はあなたのアカウント権限を必要とせず、その後に Claim URL で所有権を取得できます。

🎒 開始前の準備

前提条件の確認

✅ Agent Skills のインストールを完了済み
✅ プロジェクトディレクトリ構造が完全（package.json があるか、または静的 HTML プロジェクト）
✅ Claude.ai ネットワーク権限が設定済み（claude.ai を使用する場合）

ネットワーク権限の注意

claude.ai（オンライン版）を使用する場合、*.vercel.com ドメインへのアクセスを許可する必要があります：

https://claude.ai/settings/capabilities に移動
ホワイトリストに *.vercel.com を追加
設定を保存して再試行

デプロイが失敗し、ネットワークエラーが表示される場合、この設定を確認してください。

と一緒にやる

ステップ 1：プロジェクトディレクトリに移動

bash

# プロジェクトディレクトリに移動
cd /path/to/your/project

理由デプロイスクリプトはプロジェクトの package.json とソースファイルを見つける必要があり、ディレクトリの位置決定が重要です。

ステップ 2：Claude にデプロイを指示

Claude の会話で以下を入力します：

Deploy my app to Vercel

以下のトリガーワードも試せます：

"Deploy this to production"
"Deploy and give me link"
"Push this live"
"Create a preview deployment"

ステップ 3：デプロイプロセスを観察

以下のような出力が表示されます：

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=...

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

同時に、Claude は JSON フォーマット（スクリプト解析用）も出力します：

json

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

表示されるもの：

デプロイ成功の通知 ✓
2 つの URL（preview と claim）
コードプロジェクトの場合、検出されたフレームワーク名も表示

ステップ 4：プレビューリンクにアクセス

Preview URL をクリックすると、ウェブサイトがリアルタイムでオンラインになります！

これが demo や一時的な展示の場合、タスクは完了です。

ステップ 5：（オプション）所有権を転送

長期的にこのデプロイを管理したい場合：

Claim URL をクリック
Vercel アカウントにログイン
転送を確認
デプロイがあなたのアカウントに属し、編集と管理が可能に

表示されるもの：

デプロイがあなたの Vercel アカウントに表示
Vercel Dashboard でログ、再デプロイなどを確認可能

チェックポイント ✅

デプロイ完了後、以下を確認してください：

[ ] Preview URL がブラウザでアクセス可能
[ ] ページが正常に表示（404 やビルドエラーなし）
[ ] コードプロジェクトの場合、フレームワーク検出が正確（Next.js、Vite など）
[ ] 長期的に管理する場合、Claim URL で所有権を転送済み

サポート対象のフレームワーク

Vercel Deploy スキルは 40 以上のフレームワークを自動的に検出できます：

カテゴリ	フレームワーク（一部例）
React	Next.js, Gatsby, Create React App, Remix
Vue	Nuxt, Vitepress, Vuepress
Svelte	SvelteKit, Svelte
Angular	Angular, Ionic Angular
Node.js バックエンド	Express, Hono, Fastify, NestJS
ビルドツール	Vite, Parcel
その他	Astro, Solid Start, Ember, Astro, Hexo, Eleventy

フレームワーク検出の仕組み

スクリプトは package.json を読み込み、dependencies と devDependencies 内のパッケージ名をチェックします。

複数の一致がある場合、スクリプトは優先順位に基づいて最も具体的なフレームワークを選択します（例えば Next.js は汎用の React より優先）。

静的 HTML プロジェクト

プロジェクトに package.json がない（純粋な静的ウェブサイト）場合、デプロイスキルはインテリジェントに処理します：

自動検出：ルートディレクトリの .html ファイルを認識
リネーム：単一の .html ファイルのみで index.html でない場合、自動的に index.html にリネーム
直接デプロイ：静的サイトとして Vercel にホスティング

シナリオの例：

bash

my-static-site/
└── demo.html  # 自動的に index.html にリネーム

デプロイ後、プレビューリンクにアクセスすると demo.html の内容が表示されます。

注意点

問題 1：デプロイ失敗、ネットワークエラー表示

現象：

Error: Network Egress Error

原因：claude.ai はデフォルトで外部ドメインへのアクセスを制限。

解決策：

https://claude.ai/settings/capabilities に移動
*.vercel.com をホワイトリストに追加
再デプロイ

問題 2：フレームワーク検出が不正確

現象：

Detected framework: vite
# 期待していたのは nextjs

原因：スクリプトは依存関係の優先順位でマッチし、vite を検出した時点で停止した可能性がある。

解決策：

package.json 内の依存関係の順序をチェック
デプロイに影響しない場合、無視可能（Vercel が自動的にビルド）
プロジェクトは正常にデプロイ可能、ただしデフォルトの Vite 設定を使用

問題 3：静的ウェブサイトで 404

現象：単一の .html ファイルをデプロイしたが、アクセスすると 404。

解決策： HTML ファイルがプロジェクトのルートディレクトリにあることを確認。ファイルがサブディレクトリにある場合、Vercel はデフォルトでルートパスにルーティングしません。

正しい構造：

project/
└── my-site.html  # ルートディレクトリの単一ファイル、自動的に index.html にリネーム

間違った構造：

project/
└── dist/
    └── my-site.html  # 自動的にリネームされず、アクセスで 404

問題 4：デプロイ成功だがページでエラー

現象：デプロイ成功だが、ページアクセス時にビルドエラーまたは実行時エラー表示。

解決策：

ローカルで npm run build を実行し、パスするか確認
デプロイログを確認（すでに自分の Vercel アカウントに転送済みの場合）
環境変数を確認（プロジェクトが .env に依存する場合）

自動除外ファイル

デプロイスクリプトは以下を自動除外：

node_modules/（依存関係のアップロードを回避）
.git/（バージョン履歴のアップロードを回避）

プロジェクトが他のファイル（.env など）を除外する必要がある場合、手動パッケージ化時に処理することをお勧めします。

高度な使用方法

デプロイパスを指定

他のディレクトリのデプロイも指定可能：

Deploy project at ./my-app

Claude はそのパスを使用してデプロイします。

既存の tarball からデプロイ

すでにパッケージ化された .tgz ファイルがある場合：

Deploy /path/to/project.tgz to Vercel

スクリプトは既存の圧縮ファイルを直接アップロードし、パッケージ化ステップをスキップします。

この授業のまとめ

Vercel Deploy スキルにより、デプロイがかつてないほど簡単になります：

コアバリュー：

✅ 一言でデプロイ完了、手動設定不要
✅ フレームワークを自動検出、40 以上の技術スタックに対応
✅ 認証不要のデプロイ、セキュリティが高い
✅ プレビューリンク + 所有権譲渡リンクを返却

適用シナリオ：

🚀 demo やプロトタイプを迅速に共有
📦 チーム内でのプレビュー
🔄 自動化された CI/CD プロセス
🌐 静的ウェブサイトのホスティング

次のステップ：スキルの仕組みを深く理解したい場合、React パフォーマンス最適化ベストプラクティスを確認するか、カスタムスキルの開発を学習できます。

次の授業の予告

次の授業では React/Next.js パフォーマンス最適化ベストプラクティス を学びます。
学べること：
57 の React パフォーマンス最適化ルール
ウォーターフォールの排除、バンドルサイズの最適化方法
AI がコードを自動的にチェックし、修復提案を行う方法

付録：ソースコード参照

クリックしてソースコードの場所を表示

更新日時：2026-01-25

機能	ファイルパス	行番号
デプロイスクリプトエントリ	`skills/claude.ai/vercel-deploy-claimable/scripts/deploy.sh`	1-250
フレームワーク検出ロジック	`deploy.sh`	12-156
パッケージ化と API へのアップロード	`deploy.sh`	208-222
静的 HTML リネーム	`deploy.sh`	192-205
スキル定義ドキュメント	`skills/claude.ai/vercel-deploy-claimable/SKILL.md`	1-113
ネットワークエラーのトラブルシューティング	`SKILL.md`	102-112

重要な定数：

DEPLOY_ENDPOINT = "https://claude-skills-deploy.vercel.com/api/deploy"：Vercel デプロイ API エンドポイント

重要な関数：

detect_framework()：package.json から 40 以上のフレームワークを検出

サポート対象のフレームワーク検出（優先順位順）：

React 系：Next.js, Gatsby, Remix, React Router
Vue 系：Nuxt, Vitepress, Vuepress
Svelte 系：SvelteKit, Svelte
その他：Astro, Angular, Express, Hono, Vite, Parcel など

Vercel ワンクリックデプロイ ​

学習後、できること ​

現在の課題 ​

使用タイミング ​

コアコンセプト ​

🎒 開始前の準備 ​

と一緒にやる ​

ステップ 1：プロジェクトディレクトリに移動 ​

ステップ 2：Claude にデプロイを指示 ​

ステップ 3：デプロイプロセスを観察 ​

ステップ 4：プレビューリンクにアクセス ​

ステップ 5：（オプション）所有権を転送 ​

チェックポイント ✅ ​

サポート対象のフレームワーク ​

静的 HTML プロジェクト ​

注意点 ​

問題 1：デプロイ失敗、ネットワークエラー表示 ​

問題 2：フレームワーク検出が不正確 ​

問題 3：静的ウェブサイトで 404 ​

問題 4：デプロイ成功だがページでエラー ​

高度な使用方法 ​

デプロイパスを指定 ​

既存の tarball からデプロイ ​

この授業のまとめ ​

次の授業の予告 ​

付録：ソースコード参照 ​

Vercel ワンクリックデプロイ

学習後、できること

現在の課題

使用タイミング

コアコンセプト

🎒 開始前の準備

と一緒にやる

ステップ 1：プロジェクトディレクトリに移動

ステップ 2：Claude にデプロイを指示

ステップ 3：デプロイプロセスを観察

ステップ 4：プレビューリンクにアクセス

ステップ 5：（オプション）所有権を転送

チェックポイント ✅

サポート対象のフレームワーク

静的 HTML プロジェクト

注意点

問題 1：デプロイ失敗、ネットワークエラー表示

問題 2：フレームワーク検出が不正確

問題 3：静的ウェブサイトで 404

問題 4：デプロイ成功だがページでエラー

高度な使用方法

デプロイパスを指定

既存の tarball からデプロイ

この授業のまとめ

次の授業の予告

付録：ソースコード参照