6-3 Claude Code で作った Web アプリを Vercel に公開

このレッスンで身につくこと

6-1 で作った LP と 6-2 で作った 社内ツール を、いよいよ インターネット上に公開 します。「ローカルで動くもの」と「世界の誰でも触れるもの」の壁を 5 分 で越えるのが Vercel です。

所要時間 — 約 30 分　難易度 — ★★☆☆☆

肝は 「自分のドメインで Web に出す」 を 1 回最後までやり切ること。1 回でも本番デプロイを経験すると、その後の作業速度が体感 3 倍に上がります。

デプロイとは — 5 分の地図

デプロイ とは、ローカルで動いている Web ページを 世界中からアクセスできるサーバー に配置すること。「ホスティング」「ローンチ」「公開」も同じ意味です。

> デプロイとは何か、30 秒で読める説明を書いて。
> 無料で使えるサービスも 3 つ紹介して。

2024 年以降、個人プロジェクトや社内ツールなら 費用ゼロ で本番公開できる時代になりました。GitHub にコードを置けば自動で公開 される、というのが今の標準です。

なぜ Vercel か — 4 軸の比較

Netlify / Cloudflare Pages / GitHub Pages との違いを整理します。

Vercel を最初に薦める 3 つの理由

1. Next.js の生みの親が運営 — Next.js / React Router / Astro / Vite どれもフレームワーク自動検知
2. プレビューデプロイがデフォルト — ブランチごとに自動で URL 発行、レビューが激速になる
3. ダッシュボードの分かりやすさ — 環境変数・ドメイン・ビルドログが 1 画面完結

事前準備 — アカウントと GitHub 連携

実機作業に入ります。所要 5 分。

Step 1 — https://github.com/signup から GitHub に無料登録（既にあればスキップ）。GitHub はコードの保管庫、Vercel はそこを 自動で見張ってデプロイ する仕組み。

Step 2 — https://vercel.com/signup で 「Continue with GitHub」 をクリック。メール認証も不要で即ログイン。Hobby プラン（個人完全無料、商用は要注意）を選ぶ。Pro は月 $20。

Step 3 — LP のフォルダを GitHub にアップ。

> このフォルダ（index.html を含む）を GitHub の新規リポジトリ「my-lp」に
> アップしたい。git init → .gitignore（node_modules, .env を除外）→
> README → commit → gh でリポジトリ作成 → push まで実行して。

gh コマンド が無ければ brew install gh。Claude Code に頼めば 1 分で済みます。

最初のデプロイ — 静的 HTML（最速 3 分）

Vercel ダッシュボード → 「Add New… → Project」 → GitHub リポジトリを選択。Vercel が「Framework Preset」を自動検出（素の HTML なら「Other」）。何もいじらず「Deploy」 を押すだけ。

✓ Cloning github.com/your-name/my-lp...
✓ Building...
✓ Deploying...
🎉 Production: https://my-lp-xxxxxxxx.vercel.app

3 分以内に URL が発行。ブラウザで開けば世界からアクセス可能。

フレームワーク別の自動検出

==package.json があるだけで== 自動ビルド。手動設定は基本不要。vercel.json はリダイレクトやヘッダーが必要な時だけ書きます。

> Next.js 15（App Router）のプロジェクトを Vercel にデプロイしたい。
> 設定ファイルと、環境変数登録も含めた最短手順を教えて。

カスタムドメインの設定

==xxxx.vercel.app の URL は便利ですが、本番運用では 独自ドメイン== を当てたいところ。

Step 1 — ドメイン取得

Cloudflare Registrar が事実上の最適解。「初年度安く、更新で 2 倍」のような罠がない。

Step 2 — Vercel でドメイン追加

Vercel → Settings → Domains → example.com を Add。必要な DNS レコードが表示されます。

Type: A     Name: @    Value: 76.76.21.21
Type: CNAME Name: www  Value: cname.vercel-dns.com

Step 3 — レジストラ側で DNS 設定

Cloudflare 等の DNS 管理画面で A レコード と CNAME レコード を追加。反映には数分〜数時間（DNS 伝播）。

> example.com を Vercel に向けたい。レジストラは Cloudflare Registrar。
> A / CNAME / TXT の設定値と、www あり / なし両対応の手順を教えて。

SSL は Let's Encrypt で自動発行。手動更新は不要。DNS が通れば https://example.com で即アクセス可能。

環境変数の管理 — API キーを守る

フォーム送信 / Stripe 決済 / OpenAI API / DB 接続など、外部サービスを使う瞬間から 環境変数 の世界に入ります。

環境変数 とは コードに直接書きたくない秘密の値（API キー / DB パスワード / Webhook シークレット）。コードに書いて GitHub にコミットすれば、世界中の bot がスキャンしに来る と思ってください。

# ❌ 絶対 NG
const apiKey = "sk-proj-xxxxxxxxxxxxxxxx";

# ✅ 正しい
const apiKey = process.env.OPENAI_API_KEY;

Vercel → Settings → Environment Variables で登録。Key は 大文字スネーク（OPENAI_API_KEY）、Environment は Production / Preview / Development 全部にチェック。ローカルでは ==.env.local に同じ値、ただし .gitignore 必須==。

# .gitignore
.env
.env.local
.env.*.local

> Next.js に OpenAI API を組み込む。OPENAI_API_KEY を Vercel と .env.local
> の両方に登録、サーバー側のみで使う構造、.gitignore 追加、未設定時の
> 起動時エラーガードまで含めた最短手順を教えて。

プレビューデプロイの活用

Vercel の真骨頂。main 以外のブランチに push すれば自動で URL 発行。

git checkout -b feature/new-hero
git push origin feature/new-hero

✓ Preview: https://my-lp-git-feature-new-hero-xxx.vercel.app

main マージ前に本番と同じ環境でレビュー できます。さらに プレビュー URL を 5 個並列で作れる ので、Meta / Google 広告のリンク先を hero-a / hero-b / hero-c の 3 種類に振り分け、CVR が勝った hero を main にマージ — Vercel × LP の最強運用パターン。

GitHub PR を作れば Vercel bot がプレビュー URL を自動でコメント。クライアントに「このリンクから確認お願いします」だけで済む。

失敗パターン

実戦で詰まる代表的な 6 つ。先に知っておくと夜中まで戻れなくなる事態を避けられます。

失敗 1 — ビルドエラー（ローカルで動くのに本番で死ぬ） 最頻発の悲劇。原因は Node バージョン違い（ローカル 22 / Vercel 20）/ ファイル名の大文字小文字（Mac は無視、Vercel の Linux は区別）/ TypeScript 型エラーを無視 など。ビルドログを丸ごと Claude Code に投げる のが最速の解決法。

失敗 2 — 環境変数漏れ .env.local を ==.gitignore に入れずに push==。GitHub Secret Scanning が即検知。コミット履歴からの完全削除には git filter-repo か bfg-repo-cleaner、消したつもりでもキャッシュに残るので API キーは必ずローテーション。

失敗 3 — API キー公開 ==NEXT_PUBLIC_xxx で秘密キー公開==、<script> 直書き、フロント fetch URL に key=xxx 付与など。秘密の値は必ずサーバーサイド（API Route / Edge Function）で使う。

失敗 4 — DNS 反映待ちで焦る DNS 変更は 数分〜最大 48 時間。焦って何度も設定を変えると逆に伝播が遅くなる。dig example.com で進捗確認しつつ 1 時間は黙って待つ。

失敗 5 — 無料枠超過で課金 Hobby プランは 商用利用禁止。会社の業務 LP は規約違反で 突然停止 されることも。ビジネス用途は Pro（$20/月） にしましょう。

失敗 6 — index.html がルートに無い サブフォルダにあると Vercel が見つけられず 404。Output Directory を明示する。

コスト管理 — 無料枠の境目

Vercel Hobby（無料）の主な上限は次のとおり（2026 年時点目安）。

まとめ — 5 分デプロイの体験を必ず 1 回する

このレッスンで押さえてほしいポイントを 7 つ並べます。

1. デプロイのコストは 5 分・無料 になった — レンタルサーバー時代は終わった
2. Vercel が初手のデフォルト。Next.js / Astro / React Router v7 すべて自動検出
3. GitHub に push すれば公開 される。FTP も SSL 取得も不要
4. カスタムドメイン は Cloudflare Registrar で取得、DNS は A / CNAME を 2 行追加するだけ
5. 環境変数 は Vercel ダッシュボードと .env.local の両方に登録、NEXT_PUBLIC_ に秘密の値は絶対付けない
6. プレビューデプロイ を A/B テストの基地として使うと、LP の改善サイクルが激速になる
7. Hobby は個人用・Pro は商用・Cloudflare Pages は大規模 — 用途で使い分ける

<Quiz question="Vercel でカスタムドメインを設定するとき、最初に必要な DNS レコードの組み合わせは？" options={["A レコード（@ → 76.76.21.21）と CNAME レコード（www → cname.vercel-dns.com）","MX レコードと TXT レコードのみ","Vercel 側で全部やってくれるので DNS 設定は不要"]} answer={0} />

<Quiz question="Next.js で API キーなど秘密の値を環境変数にするとき、絶対やってはいけないことは？" options={["変数名に NEXT_PUBLIC_ プレフィックスを付ける（ブラウザに公開される）","Vercel のダッシュボードに登録する",".env.local に書いてローカルで読み込む"]} answer={0} />

<Quiz question="Vercel の Hobby プラン（無料）で禁止されているのはどれ？" options={["商用利用（顧客向けサービス、ビジネス用 LP の本番公開）","GitHub と連携すること","プレビューデプロイを使うこと"]} answer={0} />

<Checklist id="intro-ch4-6" items={["業務自動化（レポート、Excel、メール）を試した","CLAUDE.md を作成してプロンプトスキルを磨いた","Web アプリを作成して公開した"]} />

次の第 7 章では、データ分析とダッシュボード作成 を学びます。「作る」「公開する」の次は「データで判断する」。Claude Code に CSV / SQL / グラフ生成を任せて、経営判断レベルの分析を 5 分で出せるようになります。

次のステップ

• 7-1: 競合調査を自動化｜市場リサーチ — 第 7 章の入口。Claude Code でデータを取りに行く実践に進みます
• 4-1: 営業レポートを自動生成する手順 — 業務自動化の発想を、作った Web アプリと組み合わせるヒントになります
• 8-1: MCP とは — Vercel と直結する次の段階、外部ツール連携を仕込みたい方はこちらへ