作ったWebアプリをインターネットに公開して独自ドメインで運用できるようになる
- Vercel に Web アプリをデプロイしてインターネットに公開できる
- 環境変数を Vercel ダッシュボードで安全に管理できる
- 独自ドメインを取得して Vercel に接続し、本番 URL で運用できる
- デプロイ履歴を確認してロールバックや障害対応ができる
- より高度なデプロイ環境（Google Cloud Run）が必要な場合の判断基準を理解できる
Phase 1: Vercel アカウント作成と GitHub 連携
STEP 1-1: Vercel アカウントのサインアップ
Vercel はフロントエンドの Web アプリを無料で公開できるサービスです。GitHub と連携すると、コードを push するだけで自動的に最新版が公開される仕組みになります。
【Windows 版】
- ブラウザで https://vercel.com を開く
- 右上の「Sign Up」をクリック
- 「Continue with GitHub」を選択（GitHub アカウントと連携するのが最もスムーズ）
- GitHub の認証画面が表示されたら「Authorize Vercel」をクリック
- プランは「Hobby（無料）」を選択して続行
- 名前・用途を入力してアカウント作成を完了する
【Mac 版】
手順は Windows 版と同一。ブラウザは Safari でも動作しますが、Chrome または Firefox を推奨します。
「Add New... → Project」からリポジトリをインポート
▲ Vercel のダッシュボード初期画面。GitHub 連携後にリポジトリをインポートする
⚠️ エラーが出た場合
GitHub との連携が失敗する場合
- GitHub にログインした状態で Vercel のサインアップを行っているか確認する
- ブラウザのポップアップブロックが有効になっている場合は無効にする
- 別のブラウザで試す
- 失敗する場合は「Continue with Email」でサインアップし、後から GitHub を連携する（アカウント設定 → Integrations → GitHub）
STEP 1-2: GitHub リポジトリへのアクセス権限設定
Vercel が GitHub のリポジトリにアクセスできるよう権限を設定します。「全部許可」よりも「必要なリポジトリだけ許可」のほうが安全です。
【Windows 版】
- Vercel ダッシュボードに入ったら「Add New... → Project」をクリック
- 「Import Git Repository」セクションで GitHub アイコンをクリック
- 「Adjust GitHub App Permissions」から権限設定画面を開く
- 推奨: 「Only select repositories」で対象のリポジトリのみ選択する
- 「Save」をクリックして設定を保存
【Mac 版】
手順は Windows 版と同一。
⚠️ エラーが出た場合
リポジトリが一覧に表示されない場合
- GitHub の組織（Organization）配下のリポジトリの場合、組織の Vercel アプリ承認が必要
- GitHub の「Settings → Applications → Authorized OAuth Apps」で Vercel が存在するか確認
- Vercel 側で「Configure GitHub App」を再クリックして権限を再設定する
Phase 2: デプロイ方法の選択
STEP 2-1: 方法A — ドラッグ＆ドロップでデプロイ（GitHub なしの場合）
GitHub リポジトリがない場合、またはシンプルに試したい場合はこの方法でデプロイします。手動更新になるため、コードを修正するたびに再度ビルドとアップロードが必要です。
【Windows 版】
- ローカルでアプリのビルドを実行する：
npm run build distフォルダが作成されたことをエクスプローラーで確認する- Vercel ダッシュボードで「Add New... → Project」をクリック
- 「Deploy without a Git repository」エリアを探す
- エクスプローラーで
distフォルダを選択し、Vercel のアップロードエリアにドラッグ＆ドロップ - デプロイが完了すると公開 URL が表示される
【Mac 版】
- ターミナルで
npm run buildを実行 - Finder で
distフォルダを見つけてドラッグ＆ドロップ
⚠️ エラーが出た場合
npm run build が失敗する場合
package.jsonにbuildスクリプトが存在するか確認するnode_modulesが存在しない場合はnpm installを先に実行する- エラーメッセージをコピーして Cursor または Claude.ai に貼り付けて修正を依頼する
STEP 2-2: 方法B — GitHub リポジトリ連携（自動デプロイ）
GitHub にリポジトリがある場合はこの方法を使います。一度設定すると、git push するだけで自動的に Vercel にデプロイされます。これが「継続的デプロイ（CD）」と呼ばれる仕組みです。
【Windows 版】
- Vercel ダッシュボードで「Add New... → Project」をクリック
- 権限設定したリポジトリが一覧に表示される
- 対象リポジトリの「Import」をクリック
- プロジェクト設定画面を確認（次の STEP 2-3 で詳細確認）
- 「Deploy」をクリック
- ビルドログが流れ、完了すると公開 URL が表示される
- 以降は
git push origin mainするだけで自動デプロイされる
【Mac 版】
手順は Windows 版と同一。
▲ Vercel のプロジェクトダッシュボード。「Ready」が表示されれば公開成功
⚠️ エラーが出た場合
デプロイが自動で始まらない場合
- Vercel と GitHub の連携が正しく設定されているか確認（STEP 1-2）
- Vercel ダッシュボードのプロジェクト設定「Git」タブで連携リポジトリと対象ブランチを確認
- デフォルトは
mainブランチ。masterを使っている場合は設定を変更する
STEP 2-3: Vercel のビルド設定確認
Vite で作成したプロジェクトのビルド設定を確認します。Vercel は多くの場合 Vite プロジェクトを自動検出しますが、念のため確認してください。
Vercel のプロジェクト設定（Settings → General → Build & Development Settings）で以下を確認：
| 項目 | 設定値 |
|---|---|
| Framework Preset | Vite |
| Build Command | npm run build |
| Output Directory | dist |
| Install Command | npm install（デフォルトのまま） |
dist フォルダとはdist は Vite のビルドで生成される出力フォルダ名です。React の create-react-app では build という名前ですが、Vite では dist がデフォルトです。
⚠️ エラーが出た場合
ビルドは成功するがページが真っ白になる場合
- Output Directory が
distに設定されているか確認する vite.config.jsにbaseオプションが設定されている場合は/になっているか確認する- React Router を使っている場合は
vercel.jsonが必要な場合がある（STEP 5-2 参照）
Phase 3: 環境変数の設定
STEP 3-1: ダッシュボードでの環境変数設定手順
API キーなどの秘密情報はコードに直接書かずに「環境変数」として管理します。Vite のアプリでフロントエンドから使う環境変数は VITE_ というプレフィックスが必要です。
【Windows 版 / Mac 版 共通】
- Vercel ダッシュボードでプロジェクトを選択
- 「Settings」タブ → 「Environment Variables」をクリック
- 環境変数を追加する：
- Key: 変数名（例:
VITE_API_KEY） - Value: 実際の値（例: API キーの文字列）
- Environments: Production / Preview / Development から選択
- Key: 変数名（例:
- 「Save」をクリック
- 必ず再デプロイを行う（STEP 3-2 参照）
コード内では import.meta.env.VITE_API_KEY で参照できます。process.env.変数名 は Vite では動作しません（Next.js の書き方）。
⚠️ エラーが出た場合
環境変数が undefined になる場合
- 変数名が
VITE_で始まっているか確認する（Vite の仕様） - 設定後に再デプロイしているか確認する（環境変数はデプロイ時に読み込まれる）
- コード内の参照が
import.meta.env.VITE_変数名になっているか確認する
STEP 3-2: 設定後に必ず再デプロイが必要な理由と手順
環境変数を追加・変更しても、既存のデプロイには反映されません。環境変数はビルド時（コンパイル時）に埋め込まれるため、変数を変えたら必ずビルドをやり直す必要があります。
方法1: Vercel ダッシュボードから再デプロイ
- Vercel ダッシュボードでプロジェクトを選択
- 「Deployments」タブを開く
- 最新のデプロイの右側「...」メニューをクリック
- 「Redeploy」を選択
- 「Use existing Build Cache」のチェックを外して「Redeploy」をクリック
方法2: 空のコミットを push（方法 B の場合）
git commit --allow-empty -m "redeploy: update environment variables" git push origin main
⚠️ エラーが出た場合
再デプロイ後も環境変数が反映されない場合は、ブラウザのキャッシュをクリアして（Ctrl+Shift+R / Cmd+Shift+R）再度確認してください。
STEP 3-3: Production / Preview / Development の使い分け
Vercel では環境変数を3つのスコープに分けて管理できます。最初のうちはすべての環境に同じ値を設定して問題ありません。
| スコープ | 対応するデプロイ | 用途の例 |
|---|---|---|
| Production | main ブランチのデプロイ | 本番の API キー |
| Preview | PR やその他ブランチのデプロイ | テスト用 API キー・テスト用 DB |
| Development | vercel dev コマンド実行時 | ローカル開発用 |
⚠️ エラーが出た場合
本番環境でのみ API キーが動かない場合、環境変数の「Environments」設定で「Production」にチェックが入っているか確認してください。
Phase 4: 独自ドメインの接続（オプション）
*.vercel.app の URL で十分な場合はスキップできます。独自ドメインは年間 1,000〜3,000 円程度の費用が発生します。
STEP 4-1: ドメイン取得先の選び方
ドメインは「インターネット上の住所」です。yourapp.vercel.app の代わりに yourapp.com のような自分だけの URL が持てます。
| サービス | 特徴 | URL |
|---|---|---|
| お名前.com | 国内最大手・日本語サポート充実 | onamae.com |
| Xserver ドメイン | 管理画面わかりやすい | xdomain.ne.jp |
| Cloudflare Registrar | 最安値水準・DNS 設定が強力 | cloudflare.com |
.com/.jp/.netなどの一般的な TLD を選ぶ- ドメイン名は短く覚えやすいもの
- 更新料金も確認する（初年度が安くても更新が高いサービスがある）
⚠️ エラーが出た場合
ドメイン取得自体はサービスの指示に従って進めてください。購入後は STEP 4-2 の DNS 設定に進んでください。
STEP 4-2: A レコードと CNAME の設定方法
ドメインを取得したら、Vercel のサーバーに DNS で接続します。A レコードは IP アドレスを指定するもの、CNAME は別のドメイン名を指定するものです。
【Vercel 側の作業】
- Vercel ダッシュボード → プロジェクト → 「Settings」→「Domains」
- 「Add」ボタンをクリックしてドメイン名を入力（例:
yourapp.com） - Vercel が表示する DNS 設定値を確認する
【お名前.com での DNS 設定】
- お名前.com にログイン → 「ドメイン設定」→「DNS レコード設定」
- 以下のレコードを追加する：
| タイプ | ホスト名 | 値 |
|---|---|---|
| A | @（または空欄） | 76.76.21.21（Vercel が指定する値） |
| CNAME | www | cname.vercel-dns.com |
⚠️ エラーが出た場合
DNS レコードを設定したが Vercel に反映されない場合
- DNS 反映には最大 72 時間かかる場合がある（通常は 1〜2 時間）
- お名前.com では「ネームサーバーの変更」と「DNS レコード設定」を混同しないよう注意（ネームサーバーは変更不要）
STEP 4-3: DNS 反映の確認（whatsmydns.net の使い方）
【Windows 版 / Mac 版 共通】
- ブラウザで https://www.whatsmydns.net を開く
- 設定したドメイン（例:
yourapp.com）を入力 - タイプを「A」に設定して「Search」をクリック
- 大部分が
76.76.21.21（Vercel のアドレス）になっていれば反映完了
DNS の反映は「世界中の DNS サーバーに情報が広まるのを待つ」作業です。全世界で緑（一致）になっていれば安心です。
⚠️ エラーが出た場合
ほとんどの地域で緑（一致）になっているのに一部が赤い場合は、まだ伝播が進んでいる途中です。数時間待ってから再確認してください。
STEP 4-4: www あり/なしの統一設定
yourapp.com と www.yourapp.com 両方にアクセスできるようにして、片方にリダイレクトします。
【Windows 版 / Mac 版 共通】
- Vercel ダッシュボード → 「Settings」→「Domains」
yourapp.comとwww.yourapp.comの両方を追加する- どちらかを「Primary」（主ドメイン）に設定する
- Vercel が自動的にリダイレクト設定を行う
一般的には www なし（yourapp.com）をプライマリにすることが多いです。
⚠️ エラーが出た場合
www なしでアクセスするとエラーになる場合
A レコードにルートドメイン（@）のレコードが設定されているか確認してください。一部の DNS サービスはルートドメインに CNAME を設定できないため、A レコードを使用します。
Phase 5: 運用管理の基本
STEP 5-1: デプロイ履歴の確認とロールバック方法
問題が発生したときに以前の状態に戻せるよう、ロールバック方法を覚えておきましょう。ロールバックはコードを変更せずに Vercel 側の「どのビルドを公開するか」を切り替えるだけです。
【Windows 版 / Mac 版 共通】
- Vercel ダッシュボード → プロジェクトを選択
- 「Deployments」タブをクリック
- 過去のデプロイ一覧が表示される（日時・ブランチ・ステータスが確認できる）
- 戻したいデプロイを見つけてクリック
- 「Promote to Production」でそのデプロイを現在の本番環境に昇格させる
▲ Vercel のデプロイ履歴。旧バージョンに「Promote to Production」でロールバックできる
⚠️ エラーが出た場合
「Promote to Production」ボタンが表示されない場合
- 無料プラン（Hobby）でも利用可能
- 既に本番に設定されているデプロイには表示されない
- ページをリロードしてから再試行する
STEP 5-2: ビルドログの見方（エラーが出たときにどこを見るか）
ビルドログは下に行くほど新しい情報です。エラーは一番最後のほうに表示されることが多いので、まず最下部を確認しましょう。
【Windows 版 / Mac 版 共通】
- Vercel ダッシュボード → 「Deployments」タブ
- 失敗したデプロイ（赤い「Error」表示）をクリック
- 「Build Logs」タブをクリック
- ログを下にスクロールして
Error:またはnpm ERR!が含まれる行を探す - エラーメッセージをコピーして Cursor または Claude.ai に貼り付けて修正を依頼する
| エラーメッセージの特徴 | 原因 |
|---|---|
Module not found | パッケージがインストールされていない |
npm ERR! code ENOENT | package.json が見つからない |
Type error: | TypeScript の型エラー |
'変数名' is not defined | 環境変数が設定されていない |
⚠️ エラーが出た場合
ビルドログが長すぎる場合は、Error または Failed という文字を含む行前後 20 行程度をコピーして AI に貼り付けてください。
STEP 5-3: Spend Management の設定（Proプラン・有料）
Hobby プランは無料のためこの設定は不要です。将来 Pro プランにアップグレードした際に確認してください。
Vercel Pro プランを使用している場合、意図しない高額請求を防ぐために月間の上限金額を設定できます。
- Vercel ダッシュボード → 「Settings」→「Billing」→「Spend Management」
- 月間の上限金額を設定する
- 上限に達した場合の動作（停止 or 通知のみ）を選択する
- メール通知先を確認する
⚠️ エラーが出た場合
Hobby プランでは「Spend Management」の設定項目が表示されません。表示されない場合は無料プランのままなので問題ありません。
Phase 6: より高度なデプロイ環境（Google Cloud Run）の判断基準
STEP 6-1: Vercel では対応できないケースと Cloud Run の使い分け
Vercel は静的サイトおよびサーバーレス関数のホスティングに特化しています。以下のケースでは Vercel だけでは対応が難しい場合があります。
| ケース | Vercel | Cloud Run |
|---|---|---|
| 静的サイト・SPA（React/Vite） | ✅ 最適 | 可能だが過剰 |
| サーバーレス関数（短時間処理） | ✅ 最適 | 可能 |
| 常時起動の API サーバー | ❌ 不向き | ✅ 最適 |
| API キーをサーバーで完全秘匿 | △ 限定的 | ✅ 最適 |
| Docker コンテナのデプロイ | ❌ 非対応 | ✅ 最適 |
| Node.js Express / FastAPI | △ 制限あり | ✅ 最適 |
| 費用（低トラフィック時） | ✅ 無料 | ✅ ほぼ無料 |
- バックエンド API サーバー（Express.js, FastAPI など）を本番で動かしたい
- API キーをフロントエンドのコードに一切含めたくない
- Dockerfile や Docker イメージを使いたい
- 既存の Docker コンテナを本番にデプロイしたい
上記に1つも当てはまらない場合は Vercel で十分です。
Cloud Run への移行の詳細手順は 講座06応用編（Cloud Run） を参照してください。
⚠️ どちらを選ぶか迷った場合
迷ったらまず Vercel でデプロイしてください。Cloud Run は中〜上級者向けの内容です。Vercel で対応できる場合は、まず Vercel での運用を続けることを推奨します。