/setup-vercel

description: "Lesson command"
duration: "約10分"
prerequisites: ["Node.js 18以上がインストールされている", "ブラウザが使える"]
level: "beginner"
tags: ["setup", "vercel", "deploy", "hosting"]
nonInteractiveMode: incompatible

Vercel CLI セットアップ

Step 0: セットアップ進捗の確認

**AIが自動実行する内容:** 1. `uv run python tools/setup_progress.py show --current setup-vercel` を実行して進捗を表示 2. 既存のインストール状態を自動検出:

• `vercel --version` を実行してCLIがインストール済みか確認
• `vercel whoami` を実行してログイン済みか確認
• 両方成功した場合、Step 4（テスト）へスキップ

3. **このセットアップは任意です。** Vercel CLIはLesson 15-5（LP制作 - Vercelデプロイ）で使用します。すぐに必要でなければスキップしても構いません。

このセッションでやること

| 項目 | 内容 | |------|------| | ゴール | Vercel CLIをインストールし、ログインしてWebサイトのデプロイ・公開ができる状態にする | | 所要時間 | 約10分 | | 前提条件 | Node.js 18以上がインストールされていること、ブラウザが使えること | | 操作レベル | CLIコマンド入力あり（インストールはAIが自動実行 + ブラウザ認証） | | 料金 | 無料プラン（Hobby）で個人プロジェクト無制限。研修では無料枠で十分 |

**このセッションの流れ:** 1. Vercelアカウントを作成する（ブラウザでサインアップ） 2. Vercel CLIをインストールする（AIが自動実行） 3. Vercelにログインする（ブラウザ認証またはトークン認証） 4. 動作テスト（AIが自動実行）

> **ヒント**: AIの応答が途中で止まった場合は「続きを表示して」「止まってるよ」と入力すると再開します。

---

準備チェック

**AskQuestionの設定:**

{
  "title": "セッション開始前の確認",
  "questions": [{
    "id": "readiness",
    "prompt": "準備はできていますか？（このセットアップは任意です。Lesson 15-5 で使用します）",
    "options": [
      {"id": "ready", "label": "準備OK！始めましょう"},
      {"id": "chrome", "label": "/chrome でブラウザ操作を自動化する"},
      {"id": "check_prereq", "label": "前提条件を確認したい"},
      {"id": "skip", "label": "今は必要ないのでスキップする"},
      {"id": "different_lesson", "label": "別のレッスンに移動したい"}
    ]
  }]
}

(ready → Step 1へ) (chrome → Step 1 でブラウザを開いた後、「Chrome 統合で自動化する場合」セクションの手順で自動実行する) (check_prereq → 「Node.js 18以上が必要です。`node --version` で確認できます」と案内) (skip → 「スキップしました。必要になったら `/setup-vercel` で再度セットアップできます」と案内して終了) (different_lesson → モジュール一覧を表示)

---

Step 1: Vercel アカウント作成

**AIが実行すること:** 1. OSを自動判定する（Mac / Windows / Linux） 2. 以下のコマンドを実行してブラウザを自動起動する:

# Mac:
open https://vercel.com/signup
# Windows:
start https://vercel.com/signup
# Linux:
xdg-open https://vercel.com/signup

**ブラウザが開いたら、以下のAskQuestionを表示:**

{
  "title": "Step 1: Vercel アカウント作成",
  "questions": [{
    "id": "account_status",
    "prompt": "ブラウザが開きましたか？以下の手順でアカウントを作成してください:\n\n1. 「Continue with GitHub」をクリック（推奨）\n   - GitHubアカウントでそのままサインアップできます\n   - または「Continue with GitLab」「Continue with Email」も選択可能\n2. 認証・メール確認を済ませる\n3. アカウント作成が完了する\n\nアカウントの状態を教えてください:",
    "options": [
      {"id": "created", "label": "アカウント作成しました！"},
      {"id": "already_have", "label": "既にアカウントを持っている"},
      {"id": "no_github", "label": "GitHubアカウントがない"},
      {"id": "browser_not_open", "label": "ブラウザが開かない"}
    ]
  }]
}

(created → Step 2へ) (already_have → Step 2へ) (no_github → 「Emailでもサインアップできます。サインアップページで『Continue with Email』を選択してください。または先に `/setup-github` でGitHubアカウントを作成することもおすすめです」と案内) (browser_not_open → 「ブラウザで直接このURLを開いてください: https://vercel.com/signup」と案内)

---

Chrome 統合で自動化する場合（`/chrome` モード）

**前提条件:** Chrome に「Claude in Chrome」拡張機能（v1.0.36+）がインストール済みで、`claude --chrome` で起動しているか、セッション内で `/chrome` を実行済みであること。

**AIが Chrome 統合で自動実行する内容:** 1. ブラウザで https://vercel.com/signup を開く 2. Chrome 統合を使って以下の操作を実行する:

• 「Continue with GitHub」をクリック
• GitHub の認証画面が表示されたら、ユーザーに承認を促す

3. サインアップ完了を確認したら、Step 2 に進む

Chrome 統合が利用できない場合は、Step 1 の手順を手動で実行してください。

---

Step 2: Vercel CLI インストール

**AIが自動で実行すること:** 1. Node.jsのバージョンを確認する:

   node --version

• Node.js 18未満の場合: 「Node.js 18以上が必要です。 `/start-0-1` でセットアップしてください」と案内して中断

2. Vercel CLIをインストールする:

   npm i -g vercel

• 権限エラー（`EACCES`）の場合: `sudo npm i -g vercel` を案内

3. インストール確認:

   vercel --version

**インストール成功時:**

Vercel CLI がインストールされました！（バージョン: XX.X.X）
次はVercelアカウントにログインします。

**インストール失敗時のAskQuestion:**

{
  "title": "インストールでエラーが発生しました",
  "questions": [{
    "id": "install_error",
    "prompt": "Vercel CLIのインストールでエラーが発生しました。",
    "options": [
      {"id": "retry", "label": "もう一度試す"},
      {"id": "sudo", "label": "管理者権限で試す（sudo）"},
      {"id": "show_error", "label": "エラーの詳細を見たい"},
      {"id": "skip", "label": "スキップして後で試す"}
    ]
  }]
}

(retry → `npm i -g vercel` を再実行) (sudo → `sudo npm i -g vercel` を実行) (show_error → エラーメッセージを表示して原因と解決方法を案内) (skip → 「スキップしました。後で `/setup-vercel` で再度セットアップできます」と案内)

---

Step 3: Vercel ログイン

**方法A（対話環境・推奨）と方法B（非対話環境・トークン認証）の2つがあることを案内する。**

**AIが実行すること:** 1. まず方法Aを試みる: `vercel login` を実行 2. ブラウザが自動で開き、Vercelアカウントで認証する 3. ターミナルに「Congratulations!」と表示されればログイン完了

**ユーザーに案内するメッセージ:**

Vercelへのログインを行います。

┌─────────────────────────────────────────────────────────────┐
│ 方法A（推奨）: ブラウザ認証                                │
│                                                             │
│ `vercel login` を実行するとブラウザが開きます。             │
│ Vercelアカウントで認証すれば完了です。                       │
│                                                             │
│ 方法B（非対話環境）: トークン認証                           │
│                                                             │
│ CI/CD環境やブラウザが使えない場合:                          │
│ 1. https://vercel.com/account/tokens でトークンを作成       │
│ 2. 別ターミナルで以下を実行:                                │
│    uv run python tools/credential_manager.py store VERCEL_TOKEN    │
│ 3. デプロイ時に --token オプションで使用                    │
└─────────────────────────────────────────────────────────────┘

**AskQuestionの設定:**

{
  "title": "Step 3: Vercel ログイン",
  "questions": [{
    "id": "login_status",
    "prompt": "`vercel login` を実行しました。結果を教えてください:",
    "options": [
      {"id": "done", "label": "ログインできた（Congratulations! が表示された）"},
      {"id": "browser_not_open", "label": "ブラウザが開かない"},
      {"id": "non_interactive", "label": "非対話環境を使っている（トークン認証したい）"}
    ]
  }]
}

(done → Step 4へ) (browser_not_open → 「ブラウザが開かない場合は、ターミナルに表示されたURLを手動でブラウザにコピー＆ペーストしてください。それでも解決しない場合は、方法B（トークン認証）をお試しください」と案内) (non_interactive → 以下のトークン認証フローを案内)

方法B: トークン認証（非対話環境用）

**AIが実行すること:** 1. ブラウザでトークン発行ページを開く:

   # Mac:
   open https://vercel.com/account/tokens
   # Windows: