ReactをVercelにデプロイする方法

ReactアプリをVercelへデプロイする方法は、今のフロントエンド開発ではかなり相性が良い。特にViteで作ったReactアプリは、ビルドが軽く、静的ファイルとして配信しやすく、Git連携を使えば push だけで自動デプロイまでつなげやすい。重要なのは、単に公開するだけではなく、「どの方法でデプロイするか」「環境変数をどう管理するか」「SPAのルーティングをどう扱うか」「本番反映をどう切り分けるか」を先に整理しておくこと。この記事では、Vite + React を前提に、ローカル準備からVercel公開、よくあるエラーまでを順番にまとめる。

最初に理解しておくこと

ReactをVercelにデプロイする方法は大きく2つある。
・VercelにGitHubなどのリポジトリを接続してデプロイする方法
・Vercel CLIを使ってローカルから直接デプロイする方法
初心者にはGit連携の方が運用しやすいことが多い。
理由は、
・コード変更の履歴が残る
・pushごとに自動デプロイできる
・プレビュー環境を作りやすい
から。
一方、CLIデプロイは「まず今のアプリを手早く公開したい」ときに向いている。

前提になる開発環境を確認する

Vercelへ上げる前に、ローカルでReactアプリが正常に動いていることが前提になる。最低限、次を確認しておく。
・Node.js が入っている
・npm または yarn / pnpm が使える
・npm run dev で開発サーバーが起動する
・npm run build が通る
特に重要なのは build が通ること。開発サーバーは動いていても、本番ビルドで失敗するケースは非常に多い。

Vite + React プロジェクトの基本確認

Viteで作ったReactアプリなら、まず package.json の scripts を確認する。
一般的には次のような形になっている。

{
“scripts”: {
“dev”: “vite”,
“build”: “vite build”,
“preview”: “vite preview”
}
}

この build がVercel上でも実行されることが多いため、ローカルで失敗する状態のままデプロイに進まない方がよい。

ローカルで本番ビルドを確認する

Vercelに上げる前に、まずはローカルで本番ビルドが成功するか確認する。

npm run build

成功すると、通常は dist ディレクトリが生成される。
さらにローカル確認までしたいなら次を実行する。

npm run preview

ここで起こりやすいエラー条件は次の通り。
・importパスが間違っている
・使っていないと思っていたコードがbuild時に落ちる
・環境変数が定義されていない
・TypeScriptやLintエラーが本番ビルドで顕在化する
「開発中は動いていたのにVercelだけ失敗する」を減らすには、この事前確認がかなり重要になる。

Vercelにデプロイする前のファイル整理

公開前に最低限チェックしておくとよいのは次の点。
・不要な .env.local をGitへ上げていない
・node_modules はコミットしていない
・.gitignore が適切
・本番に不要なconsoleやデバッグコードが残っていない
・ルーティングやAPI接続先が本番前提で整理されている
特に環境変数は重要で、ローカル用API URLを直接コードに書いたままだと、Vercel上でそのまま失敗しやすい。

GitHub連携でデプロイする方法

最も分かりやすいのは、GitHubへコードをpushしてVercelへ接続する流れ。
大まかな手順は次の通り。
・ReactプロジェクトをGitHubへpushする
・Vercelへログインする
・「New Project」から対象リポジトリを選ぶ
・Framework Preset や Build設定を確認してデプロイする
Viteプロジェクトであれば、Vercel側でフレームワークを認識しやすい。
最初のデプロイさえ成功すれば、その後は push ごとの自動デプロイに乗せやすい。

GitHubへ初回pushする手順

まだGit管理していない場合は、最初にローカルプロジェクトをリポジトリ化してpushする。

git init
git add .
git commit -m “first commit”

GitHub上で空リポジトリを作ったあと、次のようにpushする。

git remote add origin https://github.com/your-name/your-repo.git
git branch -M main
git push -u origin main

ここで起きやすいエラー条件は、
・node_modules までaddしてしまう
・認証エラーでpushできない
・mainブランチ名が合っていない
・既存リポジトリと履歴が衝突する
といったもの。

Vercelダッシュボードからインポートする

GitHubへpushできたら、Vercelのダッシュボードからリポジトリをインポートする。
初回は次の点を見ておくと安全。
・Project Name
・Framework Preset
・Build Command
・Output Directory
・Root Directory
Vite + Reactで一般的な構成なら、Build Command は npm run build、Output Directory は dist になることが多い。
モノレポやサブディレクトリ構成なら、Root Directory を適切に設定しないとビルド失敗しやすい。

Vercel CLIでデプロイする方法

Git連携を使わず、CLIから直接デプロイする方法もある。
まずはCLIをインストールする。

npm i -g vercel

その後、プロジェクトディレクトリで次を実行する。

vercel

対話形式でいくつか質問されるので、プロジェクト名やスコープを確認して進める。
本番へ反映したい場合は次を使う。

vercel –prod

CLIデプロイは、今すぐ確認用URLを作りたいときや、Git連携前に試したいときに便利。
ただし、継続運用はGit連携の方が管理しやすいことが多い。

環境変数の設定方法

ReactアプリでAPIのURLや外部キーを使うなら、Vercel上で環境変数を設定する必要がある。
Viteではクライアント側で使う変数名に VITE_ プレフィックスが必要になることが多い。
たとえば次のような形。

VITE_API_BASE_URL=https://api.example.com

アプリ側ではこう参照する。

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;

ローカルでは .env.local、Vercelではダッシュボードの Environment Variables で管理する。
発生しやすいエラー条件は、
・VITE_ を付けていない
・ローカルでは読めるのにVercel側へ設定していない
・Preview用とProduction用で値を分けていない
というもの。

SPAのルーティングで404を防ぐ

React Routerなどを使ったSPAでは、/about や /users/1 のようなURL直打ちで404になることがある。
これはサーバー側がそのパスに対応する静的ファイルを見つけられないため。
Vercelでは、SPA向けに index.html へ書き戻す設定を入れておくと安定しやすい。

プロジェクトルートに vercel.json を作る。

{
“$schema”: “https://openapi.vercel.sh/vercel.json”,
“rewrites”: [
{
“source”: “/(.*)”,
“destination”: “/index.html”
}
]
}

これで深いURLでも index.html に流し、React Router側で画面を解決しやすくなる。
React Routerを使ったSPAでは非常に重要な設定になる。

API接続先の切り替えを整理する

ローカルと本番でAPI接続先が違う場合、コード直書きではなく環境変数に寄せる方が安全。
悪い例は次のようなもの。

const apiBaseUrl = ‘http://localhost:3000’;

改善例は次の通り。

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;

この形にしておくと、
・ローカルでは .env.local
・Vercel Preview では Preview用設定
・本番では Production用設定
という分離がしやすい。
接続先の固定は、Vercelデプロイ後の「動くけどAPIだけ失敗する」原因として非常に多い。

Preview Deployment と Production Deployment の使い分け

Vercelでは、ブランチごとにPreview Deploymentを作りやすい。
そのため、実務では次のような分け方が扱いやすい。
・featureブランチ → Preview
・main へのマージ → Production
この運用にしておくと、
・本番前にUI確認しやすい
・レビューしやすい
・いきなり本番を壊しにくい
というメリットがある。
特にReactの見た目修正やルーティング変更では、Preview URLがあるだけで確認がかなり楽になる。

デプロイ後に確認するべきポイント

デプロイが成功したら、すぐに次を確認する。
・トップページが表示されるか
・主要ルートが直打ちで開けるか
・API通信が成功するか
・環境変数が反映されているか
・画像やCSSが壊れていないか
・スマホ表示でも崩れていないか
「デプロイ成功」と「アプリが正しく使える」は別問題なので、公開後の確認を省かない方がよい。

よくあるエラーと発生条件

ReactをVercelへ上げるときによくある問題は次の通り。
・Build Failed
→ npm run build がローカルでも通っていない、依存不足、設定ミス
・ページ直打ちで404
→ SPAの rewrite 設定が無い
・APIだけ動かない
→ 環境変数未設定、接続先がローカルのまま、CORS問題
・画像やアセットが壊れる
→ パスの書き方、base設定、ビルド時の参照ミス
・CLIでは上がるがGit連携で失敗
→ Root DirectoryやBuild設定が合っていない
・本番だけ値が違う
→ Preview / Production の環境変数を分けていない
デプロイ周りの不具合は「Reactの問題」というより、「ビルド」「環境変数」「ルーティング」のどれかに集約されることが多い。

初心者向けの最短手順まとめ

最短でReactをVercelへ公開する流れは次の通り。
・ViteでReactアプリを作る
・npm install
・npm run build で本番ビルド確認
・GitHubへpush
・VercelでリポジトリをImport
・必要な環境変数を設定
・SPAなら vercel.json を追加
・デプロイ後に主要画面とAPI接続を確認
CLIで試すなら次の流れ。

npm i -g vercel
vercel
vercel –prod

まとめ

ReactをVercelにデプロイする方法は、Viteとの相性が良く、Git連携でもCLIでも比較的進めやすい。
安定して運用するには、
・ローカルで npm run build を通す
・Git連携かCLIかを決める
・環境変数を整理する
・SPAの404対策を入れる
・PreviewとProductionを分ける
という流れを押さえるのが大事になる。
単に公開するだけなら簡単だが、実際に「壊れず運用できる状態」にするには、ビルド、ルーティング、環境変数の3点を最初から整えておく方が後で楽になる。