/start-13-5
Lesson command
$ npx -y skills add minicoohei/ai-agent-camp --agent claude-codeHow it fires
How this command gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/start-13-5
Context preview
What this command does when you run it.
Lesson command
Command definition
start-13-5.mddescription: "Lesson command"
chapter: "courses/aiagent/lesson03-core/module13-lp/chapter.yaml"
prerequisites: ["start-13-4"]
duration: "約15分"
level: "intermediate"
tags: ["lp", "vercel", "deploy", "hosting"]
nonInteractiveMode: incompatible
🎓 Lesson 13-5: Vercelデプロイ
📍 このセッションでやること
**Lesson 13-5: Vercelデプロイ** へようこそ！
| 項目 | 内容 | |------|------| | ゴール | 作成したLP/HPをVercelにデプロイし、公開URLを取得する | | 所要時間 | 約15分 | | 使うスキル | lp-designer, Vercel CLI | | 前提条件 | Lesson 13-4 完了（`output/lp-project/` が存在すること）。未完了の場合はフォールバックでサンプルプロジェクトを生成します | | 教材ページ | [Module 13: LP/HP制作](https://ai-agent.camp/ja/course/module-13) を並行参照 |
> **⚠️ 非対話環境（Codex, CI等）での注意**: `vercel login` はブラウザ認証が必要なため、非対話環境では実行できません。その場合は `VERCEL_TOKEN` 環境変数によるトークン認証を使用するか、デプロイステップをスキップしてください。
**このセッションの流れ:** 1. プロジェクト存在チェック（なければサンプル生成） 2. Vercel CLI のインストール・認証 3. プレビューデプロイ 4. ブラウザで確認 5. 本番デプロイ
セッション終了時には、LPが世界中からアクセス可能なURLで公開されています。
> **💡 ヒント**: AIの応答が途中で止まった場合は「続きを表示して」「止まってるよ」と入力すると再開します。ツールによって応答が途中で止まることがありますが、故障ではありません。
---
🎯 準備チェック
まずは準備が整っているか確認しましょう。
**AskQuestionの設定:**
{
"title": "🎯 セッション開始前の確認",
"questions": [{
"id": "readiness",
"prompt": "準備はできていますか？",
"options": [
{"id": "ready", "label": "準備OK！始めましょう"},
{"id": "check_prereq", "label": "前提条件を確認したい"},
{"id": "view_html", "label": "先に教材ページを見たい"},
{"id": "different_lesson", "label": "別のレッスンに移動したい"}
]
}]
}(ready → Step 0へ) (check_prereq → Node.js, npm の存在確認 + Lesson 13-4 完了確認) (view_html → 教材ページのパスを案内) (different_lesson → モジュール一覧を表示)
---
🔍 Step 0: プロジェクト存在チェック
13-4 の成果物（`output/lp-project/`）が存在するか確認します。
**確認手順:**
# output/lp-project ディレクトリの存在チェック
ls output/lp-project/index.html 2>/dev/null && echo "OK: プロジェクトが存在します" || echo "NOT FOUND: プロジェクトが見つかりません"
**プロジェクトが存在しない場合のフォールバック:**
`output/lp-project/` が存在しない場合は、13-4 を先に実施するか、以下の最小限サンプルプロジェクトで代替できます。
# サンプルプロジェクトを生成
mkdir -p output/lp-project
cat > output/lp-project/index.html << 'HTMLEOF'
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルLP - Vercelデプロイ練習用</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<header class="bg-blue-600 text-white py-16 text-center">
<h1 class="text-4xl font-bold mb-4">サンプルLP</h1>
<p class="text-xl">Vercelデプロイの練習用ページです</p>
</header>
<main class="max-w-3xl mx-auto py-12 px-4">
<section class="bg-white rounded-lg shadow p-8 mb-8">
<h2 class="text-2xl font-bold mb-4">このページについて</h2>
<p class="text-gray-700">13-5 のVercelデプロイ練習用に自動生成されたサンプルページです。13-4 を完了すると、実際に作成したLPをデプロイできます。</p>
</section>
</main>
<footer class="bg-gray-800 text-gray-400 py-6 text-center">
<p>© 2026 AIエージェント研修</p>
</footer>
</body>
</html>
HTMLEOF
echo "サンプルプロジェクトを output/lp-project/ に生成しました"> **推奨**: 本来は 13-4 (`/start-13-4`) で作成したLPを使うのがベストです。サンプルはデプロイ手順の練習用です。
**期待される結果**: `output/lp-project/index.html` が存在する状態になります。
---
🚀 Step 1: Vercel CLI インストール・認証
Vercel CLI をインストールしてログインします。
**AskQuestionの設定例:**
{
"title": "🚀 Step 1: Vercel CLI セットアップ",
"questions": [{
"id": "vercel_status",
"prompt": "Vercel CLI の状態は？",
"options": [
{"id": "not_installed", "label": "まだインストールしていない"},
{"id": "installed", "label": "インストール済み（ログインも済み）"},
{"id": "installed_no_login", "label": "インストール済み（未ログイン）"},
{"id": "no_account", "label": "Vercelアカウントを持っていない"}
]
}]
}**選択後の案内（not_installed の場合）**: 入力内容:
Vercel CLI をインストールしてログインしてください。
手順:
1. インストール
npm i -g vercel
2. バージョン確認
vercel --version
3. ログイン（方法A: ブラウザ認証 ※対話環境のみ）
vercel login
ブラウザが開くので、Vercelアカウントでログインしてください。
アカウントがなければ https://vercel.com/signup で無料作成できます。
4. ログイン確認
vercel whoami
**選択後の案内（installed_no_login の場合）**:
> **⚠️ 非対話環境（Codex, CI, SSH等）の場合**: `vercel login` はブラウザが必要なため実行できません。以下の「方法B: トークン認証」を使ってください。
入力内容:
■ 方法A: ブラウザ認証（ローカル環境）
vercel login
→ ブラウザが開くので認証してください
■ 方法B: トークン認証（非対話環境・CI対応）
1. https://vercel.com/account/tokens にアクセス
2. 「Create Token」でトークンを発行（名前は任意、例: "aiagent-deploy"）
3. 環境変数に設定:
export VERCEL_TOKEN="発行されたトークン"
4. .env に追記して永続化（任意）:
テキストエディタで .env ファイルを直接開き、VERCEL_TOKEN=発行されたトークン を追記してください。
> **セキュリティ注意**: `echo 'VERCEL_TOKEN=...' >> .env` のようにコマンドで追記すると、シェル履歴にトークンが残るリスクがあります。テキストエディタでの直接編集を推奨します。
5. トークン認証でデプロイする場合は以下のように実行:
vercel --token "$VERCEL_TOKEN"
vercel --prod --token "$VERCEL_TOKEN"
■ ログイン確認:
vercel whoami
# トークン認証の場合: vercel whoami --token "$VERCEL_TOKEN"**選択後の案内（no_account の場合）**:
Vercelアカウントを作成してください:
1. https://vercel.com/signup にアクセス
2. GitHubアカウントまたはメールで登録（無料プラン）
3. 登録後、ターミナルで vercel login を実行
（非対話環境の場合は https://vercel.com/account/tokens でトークンを発行）
**期待される結果**: Vercel CLI がインストール・認証されます。
---
🚀 Step 2: プレビューデプロイ
まずプレビュー環境にデプロイして確認します。
**AskQuestionの設定例:**
{
"title": "🚀 Step 2: プレビューデプロイ",
"questions": [{
"id": "step_action",
"prompt": "このステップをどうしますか？",
"options": [
{"id": "practice", "label": "このまま進める"},
{"id": "review", "label": "例だけ確認する"},
{"id": "skip", "label": "スキップする"}
]
}]
}**選択後の案内（例）**: 入力内容:
LP プロジェクトを Vercel にプレビューデプロイしてください。
■ 方法A: 対話形式（ローカル環境）
1. プロジェクトディレクトリに移動
cd output/lp-project
2. Vercel デプロイ実行
vercel
対話形式で以下を設定:
- Set up and deploy? → Y
- Which scope? → 自分のアカウントを選択
- Link to existing project? → N
- Project name? → my-lp（任意の名前）
- In which directory is your code located? → ./
- Override settings? → N
3. デプロイ完了後、プレビューURLが表示されます
例: https://my-lp-xxxxx.vercel.app
■ 方法B: 非対話モード（CI/Codex環境、またはトークン認証の場合）
1. プロジェクトディレクトリに移動
cd output/lp-project
2. --yes フラグで対話をスキップしてデプロイ
vercel --yes --token "$VERCEL_TOKEN"
※ VERCEL_TOKEN が未設定の場合はStep 1のトークン認証手順を参照
3. デプロイ完了後、プレビューURLが表示されます
表示されたプレビューURLを記録してください。
> **⚠️ `~/.vercel` が存在しないエラーが出る場合**: 初回デプロイ時に自動作
Read more
description: "Lesson command" chapter: "courses/aiagent/lesson03-core/module13-lp/chapter.yaml" prerequisites: ["start-13-4"] duration: "約15分" level: "intermediate" tags: ["lp", "vercel", "deploy", "hosting"] nonInteractiveMode: incompatible
🎓 Lesson 13-5: Vercelデプロイ
📍 このセッションでやること
**Lesson 13-5: Vercelデプロイ** へようこそ！
| 項目 | 内容 | |------|------| | ゴール | 作成したLP/HPをVercelにデプロイし、公開URLを取得する | | 所要時間 | 約15分 | | 使うスキル | lp-designer, Vercel CLI | | 前提条件 | Lesson 13-4 完了（`output/lp-project/` が存在すること）。未完了の場合はフォールバックでサンプルプロジェクトを生成します | | 教材ページ | [Module 13: LP/HP制作](https://ai-agent.camp/ja/course/module-13) を並行参照 |
> **⚠️ 非対話環境（Codex, CI等）での注意**: `vercel login` はブラウザ認証が必要なため、非対話環境では実行できません。その場合は `VERCEL_TOKEN` 環境変数によるトークン認証を使用するか、デプロイステップをスキップしてください。
**このセッションの流れ:** 1. プロジェクト存在チェック（なければサンプル生成） 2. Vercel CLI のインストール・認証 3. プレビューデプロイ 4. ブラウザで確認 5. 本番デプロイ
セッション終了時には、LPが世界中からアクセス可能なURLで公開されています。
> **💡 ヒント**: AIの応答が途中で止まった場合は「続きを表示して」「止まってるよ」と入力すると再開します。ツールによって応答が途中で止まることがありますが、故障ではありません。
---
🎯 準備チェック
まずは準備が整っているか確認しましょう。
**AskQuestionの設定:**
{
"title": "🎯 セッション開始前の確認",
"questions": [{
"id": "readiness",
"prompt": "準備はできていますか？",
"options": [
{"id": "ready", "label": "準備OK！始めましょう"},
{"id": "check_prereq", "label": "前提条件を確認したい"},
{"id": "view_html", "label": "先に教材ページを見たい"},
{"id": "different_lesson", "label": "別のレッスンに移動したい"}
]
}]
}(ready → Step 0へ) (check_prereq → Node.js, npm の存在確認 + Lesson 13-4 完了確認) (view_html → 教材ページのパスを案内) (different_lesson → モジュール一覧を表示)
---
🔍 Step 0: プロジェクト存在チェック
13-4 の成果物（`output/lp-project/`）が存在するか確認します。
**確認手順:**
# output/lp-project ディレクトリの存在チェック ls output/lp-project/index.html 2>/dev/null && echo "OK: プロジェクトが存在します" || echo "NOT FOUND: プロジェクトが見つかりません"
**プロジェクトが存在しない場合のフォールバック:**
`output/lp-project/` が存在しない場合は、13-4 を先に実施するか、以下の最小限サンプルプロジェクトで代替できます。
# サンプルプロジェクトを生成
mkdir -p output/lp-project
cat > output/lp-project/index.html << 'HTMLEOF'
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルLP - Vercelデプロイ練習用</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<header class="bg-blue-600 text-white py-16 text-center">
<h1 class="text-4xl font-bold mb-4">サンプルLP</h1>
<p class="text-xl">Vercelデプロイの練習用ページです</p>
</header>
<main class="max-w-3xl mx-auto py-12 px-4">
<section class="bg-white rounded-lg shadow p-8 mb-8">
<h2 class="text-2xl font-bold mb-4">このページについて</h2>
<p class="text-gray-700">13-5 のVercelデプロイ練習用に自動生成されたサンプルページです。13-4 を完了すると、実際に作成したLPをデプロイできます。</p>
</section>
</main>
<footer class="bg-gray-800 text-gray-400 py-6 text-center">
<p>© 2026 AIエージェント研修</p>
</footer>
</body>
</html>
HTMLEOF
echo "サンプルプロジェクトを output/lp-project/ に生成しました"> **推奨**: 本来は 13-4 (`/start-13-4`) で作成したLPを使うのがベストです。サンプルはデプロイ手順の練習用です。
**期待される結果**: `output/lp-project/index.html` が存在する状態になります。
---
🚀 Step 1: Vercel CLI インストール・認証
Vercel CLI をインストールしてログインします。
**AskQuestionの設定例:**
{
"title": "🚀 Step 1: Vercel CLI セットアップ",
"questions": [{
"id": "vercel_status",
"prompt": "Vercel CLI の状態は？",
"options": [
{"id": "not_installed", "label": "まだインストールしていない"},
{"id": "installed", "label": "インストール済み（ログインも済み）"},
{"id": "installed_no_login", "label": "インストール済み（未ログイン）"},
{"id": "no_account", "label": "Vercelアカウントを持っていない"}
]
}]
}**選択後の案内（not_installed の場合）**: 入力内容:
Vercel CLI をインストールしてログインしてください。 手順: 1. インストール npm i -g vercel 2. バージョン確認 vercel --version 3. ログイン（方法A: ブラウザ認証 ※対話環境のみ） vercel login ブラウザが開くので、Vercelアカウントでログインしてください。 アカウントがなければ https://vercel.com/signup で無料作成できます。 4. ログイン確認 vercel whoami
**選択後の案内（installed_no_login の場合）**:
> **⚠️ 非対話環境（Codex, CI, SSH等）の場合**: `vercel login` はブラウザが必要なため実行できません。以下の「方法B: トークン認証」を使ってください。
入力内容:
■ 方法A: ブラウザ認証（ローカル環境）
vercel login
→ ブラウザが開くので認証してください
■ 方法B: トークン認証（非対話環境・CI対応）
1. https://vercel.com/account/tokens にアクセス
2. 「Create Token」でトークンを発行（名前は任意、例: "aiagent-deploy"）
3. 環境変数に設定:
export VERCEL_TOKEN="発行されたトークン"
4. .env に追記して永続化（任意）:
テキストエディタで .env ファイルを直接開き、VERCEL_TOKEN=発行されたトークン を追記してください。
> **セキュリティ注意**: `echo 'VERCEL_TOKEN=...' >> .env` のようにコマンドで追記すると、シェル履歴にトークンが残るリスクがあります。テキストエディタでの直接編集を推奨します。
5. トークン認証でデプロイする場合は以下のように実行:
vercel --token "$VERCEL_TOKEN"
vercel --prod --token "$VERCEL_TOKEN"
■ ログイン確認:
vercel whoami
# トークン認証の場合: vercel whoami --token "$VERCEL_TOKEN"**選択後の案内（no_account の場合）**:
Vercelアカウントを作成してください: 1. https://vercel.com/signup にアクセス 2. GitHubアカウントまたはメールで登録（無料プラン） 3. 登録後、ターミナルで vercel login を実行 （非対話環境の場合は https://vercel.com/account/tokens でトークンを発行）
**期待される結果**: Vercel CLI がインストール・認証されます。
---
🚀 Step 2: プレビューデプロイ
まずプレビュー環境にデプロイして確認します。
**AskQuestionの設定例:**
{
"title": "🚀 Step 2: プレビューデプロイ",
"questions": [{
"id": "step_action",
"prompt": "このステップをどうしますか？",
"options": [
{"id": "practice", "label": "このまま進める"},
{"id": "review", "label": "例だけ確認する"},
{"id": "skip", "label": "スキップする"}
]
}]
}**選択後の案内（例）**: 入力内容:
LP プロジェクトを Vercel にプレビューデプロイしてください。 ■ 方法A: 対話形式（ローカル環境） 1. プロジェクトディレクトリに移動 cd output/lp-project 2. Vercel デプロイ実行 vercel 対話形式で以下を設定: - Set up and deploy? → Y - Which scope? → 自分のアカウントを選択 - Link to existing project? → N - Project name? → my-lp（任意の名前） - In which directory is your code located? → ./ - Override settings? → N 3. デプロイ完了後、プレビューURLが表示されます 例: https://my-lp-xxxxx.vercel.app ■ 方法B: 非対話モード（CI/Codex環境、またはトークン認証の場合） 1. プロジェクトディレクトリに移動 cd output/lp-project 2. --yes フラグで対話をスキップしてデプロイ vercel --yes --token "$VERCEL_TOKEN" ※ VERCEL_TOKEN が未設定の場合はStep 1のトークン認証手順を参照 3. デプロイ完了後、プレビューURLが表示されます 表示されたプレビューURLを記録してください。
> **⚠️ `~/.vercel` が存在しないエラーが出る場合**: 初回デプロイ時に自動作
AI Agent Training for Non-Engineers - Complete Guide to Claude Code / Cursor / Codex ### ⚠️ Before you clone Official repository (maintained by the authors): Running AI agents from this repo grants them shell, file-write, and external-API permissions on your
Other commands on ai-agent-camp.
- /check-setup.en
Top-level alias — see lesson/check-setup.en.md for the full body.
Open command - /check-setup.es
Alias de nivel superior — el cuerpo completo está en lesson/check-setup.es.md.
Open command - /check-setup
Top-level alias — see lesson/check-setup.md for the full body.
Open command - /check-security.en
Lesson command
Open command - /check-security.es
Lesson command
Open command - /check-security
Lesson command
Open command