先に要点
Vercel が便利らしいけど、最初に何をすればいいのか分からない ── 名前は聞くものの、最初のデプロイで止まってしまう人は多いです。実際には、Vercel は サーバーを用意せず、GitHub のリポジトリをつなぐだけで公開できる のが最大の特徴で、入門のハードルは見た目より低いです。
この記事では、Next.js などのフロントエンドアプリを例に、アカウント作成から最初のデプロイ、独自ドメイン接続、環境変数の設定まで を、初めての人が迷わない順番で解説します。Vercel とは何か をまず押さえたい場合は Vercelとは？何ができる？ から読むと流れがつかみやすいです。
最初のデプロイの全体像
Vercel のデプロイは、自分のコードを GitHub に置き、それを Vercel に読み込ませる だけです。サーバーの OS 設定や Web サーバーのインストールは一切ありません。
| ステップ | やること | 所要 |
|---|---|---|
| ① 準備 | GitHub にプロジェクトを push しておく | 数分 |
| ② 連携 | Vercel に GitHub アカウントでサインアップ | 1分 |
| ③ Import | 対象リポジトリを選んで読み込む | 1分 |
| ④ Deploy | Deploy を押すと自動でビルド・公開 | 1〜3分 |
一度連携すれば、以降は GitHub に push するたびに自動でデプロイ されます。手動でアップロードする作業自体がなくなるのが、従来のレンタルサーバーや CDN の手動構築との一番の違いです。
手順: アカウント作成から公開まで
実際の流れをステップで追います。
多くのフレームワークは Build Command や出力先が自動検出 されるため、初回は設定をほとんど触らずに Deploy できます。うまく検出されない場合だけ、手動で Build Command(例: npm run build)や Output ディレクトリを指定します。
デプロイ後にやること
公開できたら、実運用に向けて次の3つを設定します。
環境変数の設定
API キーや接続情報は、コードに直書きせず Settings の Environment Variables に登録する。Production / Preview / Development で値を分けられる。
Preview 環境の確認
ブランチや Pull Request ごとに専用の確認用 URL が自動生成される。本番に出す前にレビューできる仕組み。
特に 環境変数をコードに直書きしないこと は最初に身につけたい習慣です。API キーをそのまま GitHub に push すると、公開リポジトリでは即座に第三者に拾われる事故につながります。
つまずきやすいポイント
最初のデプロイで止まる原因は、ほぼ次のどれかです。
ビルドが失敗する
ローカルでは動くのに Vercel で失敗する場合、Node のバージョン差や依存関係の指定漏れが多い。まず Build Logs を上から読む。
環境変数の入れ忘れ
ローカルの設定ファイルでは動くのに本番で動かないのは、Vercel 側に環境変数を登録していないのが定番の原因。
ルートディレクトリのズレ
モノレポやサブフォルダ構成だと、Root Directory の指定がずれてビルド対象を見つけられないことがある。
出力先の不一致
静的サイトで Output ディレクトリが違うと、デプロイは成功するのに 404 になる。Framework Preset を見直す。
エラーが出たら まず Build Logs を読む のが鉄則です。原因別の詳しい対処は Vercelのデプロイが失敗するときの原因と対処手順 にまとめています。
無料で始めるときの注意
入門時は無料の Hobby プランで十分ですが、商用利用(収益化や業務利用)は Hobby では禁止 されています。個人の学習やポートフォリオなら無料のまま、収益や顧客が絡んだら Pro へ ── という線引きを最初に知っておくと安全です。プランごとの違いと無料枠の範囲は Vercelの料金プランと無料枠 で整理しています。
次に学ぶとよいこと
最初のデプロイができたら、次は次の3つを押さえると運用がスムーズになります。
基礎用語
Project・Deployment・Environment・Function など、Vercel 独自の言葉を [Vercelの基礎用語まとめ](/articles/vercel-basics-terminology-guide-for-beginners) で整理。
相性のよい技術
DB・認証・AI などをどう組み合わせるかは [Vercelと相性のいい技術まとめ](/articles/technologies-that-pair-well-with-vercel) が参考になる。
料金の仕組み
従量課金の軸と高額化の防ぎ方は [Vercelの請求が高くなる原因と対策](/articles/vercel-high-bill-causes-and-prevention) で。
Vercel入門に関するよくある質問
Q. Vercel を使うのにクレジットカードは必要ですか？
A. 無料の Hobby プランで始める場合、クレジットカードの登録は不要です。GitHub アカウントがあればサインアップでき、すぐに最初のデプロイができます。Pro に上げる段階で支払い情報が必要になります。
Q. コマンド操作が苦手でも使えますか？
A. 使えます。GitHub にコードを置けば、あとはブラウザのダッシュボード上の操作だけでデプロイできます。CLI(コマンド)も用意されていますが、入門段階では使わなくても問題ありません。
Q. GitHub を使わずにデプロイできますか？
A. Vercel CLI を使えばローカルから直接デプロイすることも可能です。ただし、自動デプロイや Preview 環境といった Vercel の利点を活かすなら、GitHub などの Git 連携を使うのが基本です。
Q. デプロイにかかる時間はどれくらいですか？
A. 小規模なアプリなら初回でも数分程度です。2回目以降は変更分だけビルドされるため、より速くなります。ビルドが極端に遅い場合は、依存関係の多さやビルド設定を見直します。
Q. 公開された URL は変更できますか？
A. 自動で発行される vercel.app の URL はプロジェクト名に基づきます。独自ドメインを接続すれば、自分のドメインで公開できます。ドメイン接続後も vercel.app の URL は残ります。
Q. 無料プランでも独自ドメインは使えますか？
A. 使えます。Hobby プランでも独自ドメインの接続と SSL 証明書の自動発行に対応しています。ただし商用利用そのものは Hobby では禁止されているため、収益サイトは Pro が前提です。
Q. デプロイがビルドエラーで止まりました。まず何を見ればいいですか？
A. ダッシュボードの Build Logs を上から読むのが最優先です。どのコマンドの、どのファイルで失敗したかがログに出ます。ローカルで動くのに失敗する場合は、Node のバージョンと環境変数の登録漏れを最初に疑います。
参考リンク
- Vercel Docs: Get Started with Vercel
- Vercel Docs: Deployments
- Vercel Docs: Environment Variables
- Vercel Docs: Working with Domains
- Next.js: Deploying