--- title: "ReactアプリをVercelにデプロイする方法｜Next.js・Vite対応の手順とCLI・CI/CD" url: "https://www.issoh.co.jp/tech/details/3000/" published: 2024-07-09 updated: 2026-10-19 categories: ["Next.js"] publisher: "株式会社一創" --- # ReactアプリをVercelにデプロイする方法｜Next.js・Vite対応の手順とCLI・CI/CD ReactやNext.jsで作ったアプリは、Vercelに接続すればビルドから公開までを自動化できます。方法はGitリポジトリを連携する王道と、手元から直接送るVercel CLIの2通りです。この記事は、フレームワークの自動判別、Vite製React SPAで起きる404の対処、環境変数と`vercel.json`、プレビュー/本番の自動反映、非公開設定までを、実際のコマンドと設定ファイル付きで手順化します。Vercel自体の仕組みや料金は[Vercel（ヴァーセル）とは？サーバー不要の仕組み・料金・できることを解説](/tech/details/2964/)で整理しています。 ## まとめ - 最短はGit連携。GitHub・GitLab・BitbucketのリポジトリをimportするだけでVercelがフレームワークを自動判別し、ビルドコマンドと出力先を設定します。 - Next.jsは設定ファイル不要のゼロ設定。SSRやAPI Routesもそのまま動きます。 - Vite製のReact SPAは出力`dist`が自動判別されますが、`/about`など直リンクで404が出るため`vercel.json`のrewritesで全経路を`index.html`に向けます。 - Git不要で即公開したいときはCLI。`npm i -g vercel`→`vercel`でプレビュー、`vercel --prod`で本番です。 - ブランチにpushするたびPreviewデプロイ、本番ブランチでProductionが動くため、追加設定なしでCI/CDになります。 - 無料のHobbyは非商用の個人利用のみ。商用や独自ドメインの本格運用はProが前提で、[VercelのHobbyプランとProプランの違いを徹底解説：料金体系・機能・対象ユーザーを徹底比較](/tech/details/8792/)で判断してください。 以下でGit連携・CLI・React/Next.jsの差・設定ファイル・公開範囲の順に、具体的な操作を追います。 ## VercelにReact・Next.jsをデプロイする2つの方法 デプロイ手段はGit連携とCLIの2つです。継続開発するアプリはGit連携、動作確認や単発公開はCLIが向きます。両者は排他ではなく、同じプロジェクトをGit連携しつつ手元からCLIで即時デプロイすることもできます。 | 観点 | Git連携 | Vercel CLI | | ------ | ----------------------- | ------------- | | 前提 | GitHub/GitLab/Bitbucket | Node.jsとCLI導入 | | 自動デプロイ | pushで自動 | コマンド実行時のみ | | プレビュー | ブランチ/PRごと | `vercel`実行時 | | 向く場面 | 継続運用・チーム開発 | 検証・単発公開 | Reactフレームワークの位置づけを先に確認したい場合は[Next.js 16とは？ReactベースのWeb開発フレームワーク最新版の概要や主要機能を詳しく紹介](/tech/details/9596/)を参照してください。Node.jsはNext.js 16で20.9以上が必要です。 ## Git連携でデプロイする手順（GitHub・GitLab・Bitbucket） ### リポジトリのimportとフレームワーク自動判別 Vercelのダッシュボードで「Add New… → Project」を選び、連携済みのGitホスティングからリポジトリをimportします。GitHubだけでなくGitLab・Bitbucketにも対応するため、GitLab運用でも同じ流れでデプロイできます。importすると、Vercelはpackage.jsonやロックファイルからNext.js・Vite・Astroなどのフレームワークを判別し、Framework Presetを自動で埋めます。Next.jsなら追加設定は不要です。 ### ビルド設定とデプロイの実行 ビルド設定はプリセット任せで問題ありませんが、モノレポやカスタム構成では次の3項目だけ確認します。Build Command（Next.jsは`next build`、Viteは`vite build`）、Output Directory（Viteは`dist`）、Root Directory（サブディレクトリにアプリがある場合に指定）です。「Deploy」を押すとビルドが走り、数十秒〜数分で`.vercel.app`のURLが払い出されます。環境変数がある場合はこの画面で登録してからデプロイしてください。 ### プレビューと本番の自動反映（CI/CDとしての使い方） 一度連携すれば、以降はGitへのpushがそのままデプロイのトリガーになります。機能ブランチやPull Requestへのpushはブランチ固有URLのPreviewデプロイ、本番ブランチ（既定はmain）へのマージはProductionデプロイになります。ビルド・成果物の配信・キャッシュ無効化までVercelが担うため、GitHub ActionsなどのCIを別途組まなくてもプレビュー付きの継続デリバリーが成立します。手動でやり直したいときはダッシュボードのDeploymentsから「Redeploy」で再デプロイできます。 ## Vercel CLIでデプロイする手順（Git不要） ### CLIのインストールとログイン Gitに載せていないローカルのプロジェクトでも、CLIから直接デプロイできます。まずグローバルにインストールし、アカウントを連携します。 ``` npm i -g vercel vercel login ``` `vercel login`はブラウザ認証に飛び、完了するとCLIがアカウントに紐づきます。初回のみ実行すれば以降は不要です。グローバルに入れたくない場合は、インストールを省いて`npx vercel`と実行すれば同じデプロイが行えます。 ### プレビューと本番の使い分け（vercelとvercel –prod） プロジェクトのルートで`vercel`を実行すると、初回は対話でプロジェクト名やスコープを確認したあとプレビュー環境へデプロイされます。本番ドメインへ反映するときは`--prod`を付けます。 ``` vercel # プレビュー環境へデプロイ vercel --prod # 本番ドメインへデプロイ ``` `--prod`はダッシュボードで設定した本番ドメインに対して公開する指定です。まず`vercel`のプレビューURLで表示と挙動を確認し、問題がなければ`--prod`に切り替える運用にします。 ## React SPA（Vite）とNext.jsのデプロイ手順の違い 「reactアプリをVercelにデプロイ」で詰まりやすいのは、Next.jsと素のReact SPA（Vite）で必要な設定が違うためです。ここを分けて理解すると失敗が減ります。 ### Next.jsのゼロ設定デプロイ Next.jsはVercelが開発するフレームワークで、SSR・ISR・API Routes・画像最適化まで設定ファイルなしで動きます。フレームワークを判別した時点でビルドとルーティングが最適化されるため、`vercel.json`を書く必要は基本的にありません。迷ったらまずデフォルトのままデプロイして問題ないのがNext.jsです。 ### Vite製React SPAのdist出力と404対策 Vite製のReactアプリはビルド出力が`dist`で、Vercelはこれを自動判別します。ここまでは設定不要ですが、`react-router`などクライアントサイドルーティングを使うと、`/about`のような下位パスを直接開いたりリロードした際に404になります。サーバー側に該当ファイルが存在せず、Vercelがindex.htmlへ振り分けないためです。プロジェクトルートに`vercel.json`を置き、全経路を`index.html`へリライトして解決します。 ``` { "rewrites": [ { "source": "/(.*)", "destination": "/index.html" } ] } ``` なお、かつて主流だったCreate React AppはReact公式が新規利用を推奨しなくなっており、素のReact SPAはViteで作るのが現在の標準です。CRA製の場合は出力が`build`になる点だけ読み替えてください。 ## 環境変数とvercel.jsonの設定 ### 環境変数の登録とローカルへの取り込み APIキーや接続先はコードに直接書かず、環境変数として管理します。ダッシュボードのSettings → Environment Variablesで、Production・Preview・Developmentの環境ごとに値を登録できます。CLI運用ならローカルの`.env.local`へまとめて取り込めます。 ``` vercel env pull .env.local ``` フロントエンドから参照する変数は、Next.jsなら`NEXT_PUBLIC_`、Viteなら`VITE_`の接頭辞が必要です。接頭辞のない変数はサーバー側でしか読めません。環境ごとの分け方やCLIでの登録・取り込みの詳細は[Vercelの環境変数の設定手順：Production・Previewの分け方とvercel env pull・Secret型](https://www.issoh.co.jp/tech/details/18580/)で解説しています。 ### vercel.jsonでできること `vercel.json`はプロジェクトの挙動を宣言的に上書きする設定ファイルです。前述のrewrites（経路の内部書き換え）に加え、redirects（URLの転送）、headers（レスポンスヘッダーの付与）などを定義できます。ゼロ設定で足りるNext.jsでは不要な場面が多く、SPAのルーティングやセキュリティヘッダーの追加など、明確な目的があるときだけ書くのが原則です。設定を盛りすぎると挙動が追いにくくなります。 ## 独自ドメイン・非公開設定・PWAの対応 ### 独自ドメインの割り当て 本番公開では`.vercel.app`のURLに独自ドメインを割り当てます。プロジェクトのSettings → Domainsでドメインを追加し、表示される指示に沿ってDNS（AレコードまたはCNAME）を設定すると、証明書の発行まで自動で行われます。DNSレコードの登録方法の選び方と、証明書が発行されないときの切り分けは[Vercelの独自ドメイン設定手順：Aレコード・CNAME・ネームサーバーの選び方とSSL発行待ちの対処](https://www.issoh.co.jp/tech/details/18582/)で解説しています。ドメインの取得費用やプランごとの扱いは[VercelのHobbyプランとProプランの違いを徹底解説：料金体系・機能・対象ユーザーを徹底比較](/tech/details/8792/)で確認してください。 ### デプロイを非公開にする（Vercel Authentication） 検証中のサイトを外部に見せたくないときは、Deployment Protectionを使います。全プランで使えるVercel Authenticationを有効にすると、Vercelにアクセス権を持つメンバーだけがプレビューを閲覧でき、ログイン画面にリダイレクトされます。ただしHobbyのStandard Protectionが守るのはプレビューまでで、本番ドメインは公開のままです。本番URLにパスワード保護をかけるPassword ProtectionはProのアドオンやEnterpriseが対象になります。公開範囲を含むセキュリティ全般は[Vercelハッキングの手口と対策｜情報漏洩・脆弱性・DDoSを実例で整理](/tech/details/11855/)も併せて確認してください。 ### VercelでのPWA公開手順 PWA（プログレッシブWebアプリ）もVercelにそのままデプロイできます。manifestとService Workerを含むビルド成果物を配信するだけで、Vercelは静的アセットをCDN配信し、HTTPSも自動付与されるためインストール可能なPWAの要件を満たせます。Next.jsではService Workerを生成するライブラリ、Viteでは`vite-plugin-pwa`を使う構成が一般的です。特別なサーバー設定は不要です。 ## よくある失敗と、Vercelを選ぶべきでない場面 つまずきの多くは次の3つです。ビルド失敗はローカルのNodeバージョンとVercel側の差や依存関係の不足が原因で、`package.json`のenginesでバージョンを固定すると再現しやすくなります。SPAの404は前述の`vercel.json`で解消します。公開後に画面が真っ白なら、環境変数の未登録か接頭辞（`NEXT_PUBLIC_`／`VITE_`）の付け忘れをまず疑ってください。 一方で、Vercelが最適でない場面もあります。SSRやサーバーレス関数の実行が多く、アクセス量の変動が大きいサービスは従量課金が読みにくく、コストが跳ねやすい構成です。常時高負荷でランニングコストを固定したい、あるいはリージョンやインフラを自前で細かく制御したいなら、コンテナ基盤や自前サーバーの方が向きます。フロントエンド中心でプレビュー運用の価値が高いプロジェクトほどVercelの利点が生きる、と割り切って選ぶのが現実的です。 ## よくある質問 ### Vercelへのデプロイは無料でできますか？ 無料のHobbyプランでデプロイできますが、対象は非商用の個人利用に限られます。業務やクライアント案件で使う場合はProが前提です。プランの線引きは[VercelのHobbyプランとProプランの違いを徹底解説：料金体系・機能・対象ユーザーを徹底比較](/tech/details/8792/)を確認してください。 ### ReactアプリとNext.jsでデプロイ方法は違いますか？ 基本の流れは同じですが設定が異なります。Next.jsはゼロ設定で動き、Vite製のReact SPAは出力`dist`が自動判別される一方、クライアントルーティングの404を防ぐために`vercel.json`で全経路を`index.html`へリライトする必要があります。 ### GitLabのリポジトリもVercelにデプロイできますか？ できます。VercelはGitHub・GitLab・Bitbucketに対応し、いずれもリポジトリをimportすればpushごとの自動デプロイとプレビューが同じように使えます。 ### Gitを使わずコマンドだけでデプロイするには？ `npm i -g vercel`でCLIを入れ、`vercel login`で認証したあと、プロジェクトのルートで`vercel`を実行するとプレビュー、`vercel --prod`で本番へデプロイできます。Gitリポジトリは不要です。 ### デプロイを非公開（限定公開）にできますか？ Deployment ProtectionのVercel Authenticationを使えば、アクセス権を持つメンバーだけにプレビューを限定できます。ただしHobbyで保護されるのはプレビューまでで、本番ドメインへのパスワード保護はProのアドオンやEnterpriseが対象です。 ## 関連記事 - [Vercel（ヴァーセル）とは？サーバー不要の仕組み・料金・できることを解説](/tech/details/2964/) - [VercelのHobbyプランとProプランの違いを徹底解説：料金体系・機能・対象ユーザーを徹底比較](/tech/details/8792/) - [Next.js 16とは？ReactベースのWeb開発フレームワーク最新版の概要や主要機能を詳しく紹介](/tech/details/9596/) - [Vercelハッキングの手口と対策｜情報漏洩・脆弱性・DDoSを実例で整理](/tech/details/11855/) --- 出典: [ReactアプリをVercelにデプロイする方法｜Next.js・Vite対応の手順とCLI・CI/CD]()（株式会社一創）