Webアプリケーションのデプロイには不可欠な3つのコマンド、npm run dev、npm run build、npm run startがあります。
これらはそれぞれ「開発サーバー」「最適化プロセス」「本番サーバー」という明確な役割を持っています。
違いを理解せずに運用すると、本番環境でのトラブルやパフォーマンス低下を招きかねません。
この記事を読むことで、各コマンドが裏で何をしているのかを完全に把握し、自信を持ってデプロイ作業を進められるようになります。
npm run dev(開発サーバー)とnpm run start(本番サーバー)の違いまとめ
npm run dev(開発サーバー)とnpm run start(本番サーバー)には次のような違いがあります。
| 項目 | npm run dev (開発サーバー) | npm run start(本番サーバー) |
| 用途 | 開発中のテスト、コーディング | 本番環境での公開 |
| パフォーマンス | 低い（ビルドが遅い） | 高い（最適化済み） |
| 機能 | ホットリロード（コード変更時の自動更新）、デバッグ情報、エラー表示の充実 | デバッグ機能はオフ、安定性重視 |
| 環境 | 開発環境 | 本番環境（プロダクション） |
| 前提 | ビルドは不要 | 事前にnpm run buildが必要 |
以下で詳しく解説していきます。
npm run devとは何か？（開発サーバー）
npm run devの概要
npm run devは、Next.jsなどのWebアプリケーションのプロジェクトにおいて、開発サーバーを起動するためのコマンドです。
開発者がコードを書きながら、リアルタイムでその変更を確認するために使用するためのサーバー起動コマンドです。
npm run devの具体的な役割
プロジェクトのルートディレクトリにあるpackage.jsonファイルに記述されたscriptsセクションのdevコマンドを実行します。
Next.jsプロジェクトの場合、通常next devコマンドを実行します。
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint"
},開発サーバーとは何か？
開発サーバー（Development Server）とは、Webアプリケーションやソフトウェアを開発者がコードを書いたり修正したりする過程でテスト・動作確認するためにローカル環境で起動する一時的なWebサーバーのことです。
本番環境とは異なり、開発の効率を最大限に高めるための特殊な機能が組み込まれています。
開発サーバーの主な特徴
開発サーバーには一般的に次のような機能が備わっています。
ホットリロード（Hot Reloading）
コードを修正してファイルを保存すると、サーバーがその変更を即座に検知し、自動的にブラウザの表示を更新します。
これにより、変更のたびに手動でビルドしたり、ページをリロードしたりする手間がなくなります。
オンデマンド・コンパイル
本番環境へのデプロイ前に行う「ビルド」は、プロジェクト全体を最適化するために時間がかかります。
開発サーバーは、アクセスされたページや変更されたファイルのみを必要な時にコンパイル（変換）するため、サーバーの起動が速く、開発中の待ち時間が短縮されます。
デバッグ機能
エラーが発生した場合、詳細なエラーメッセージやスタックトレース（エラーが起きた場所を示す情報）をブラウザ上に分かりやすく表示します。
これにより、バグの原因特定と修正が容易になります。
ローカルアクセス
通常、http://localhost:3000 のような、自分のコンピューター内でのみアクセス可能なローカルアドレスで起動します。
外部のインターネットからはアクセスされないため、開発中の機密性の高い情報を保護できます。
開発サーバーは、修正した内容をブラウザ上ですぐ確認することに非常に向いています。ですが、画面上にバグのアラートが表示されたりと、本番には向いていません。
npm run startとは何か？（npm run buildと本番サーバー）
npm run startの概要
npm run startは、Webアプリケーションのプロジェクトにおいて、本番環境（プロダクション）用のサーバーを起動するためのコマンドです。
開発サーバーを起動するnpm run devとは異なり、一般のユーザーにアプリケーションを公開する際に使われる、最適化と安定性を最優先した環境を立ち上げます。
ビルドが必須！npm run buildとは何か？
npm run startを実行するためには、必ず事前にnpm run buildを実行する必要があります。
npm run buildは、Webアプリケーションを本番環境（プロダクション）で公開するために、開発サーバー（npm run dev）では無効になっている、パフォーマンス向上のための徹底的な最適化を行います。
プロジェクトのルートディレクトリにあるpackage.jsonファイルに記述されたscriptsセクションのbuildコマンドを実行します。
npm run startは、ビルドで生成されたファイルを読み込みます。
- 縮小化
ソースコードから不要な空白、改行、コメントなどを削除し、ファイルサイズを最小限に抑えます。 - 圧縮
アプリケーションで実際に使用されていないコード（ライブラリなど）を自動的に削除し、最終的なバンドルサイズを小さくします。 - トランスパイルとバンドル
TypeScriptや最新のJavaScript（ES6+）コードを、より多くのブラウザで動作するように互換性のある形式（ES5など）に変換し、必要なファイルをまとめてバンドルします。
Next.jsプロジェクトの場合、通常next buildコマンドを実行します。
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint"
},npm run startの具体的な役割
npm run startは、プロジェクトのルートディレクトリにあるpackage.jsonファイルに記述されたscriptsセクションのstartコマンドを実行します。
Next.jsプロジェクトの場合、通常next startコマンドを実行します。
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint"
},本番サーバー（プロダクションサーバー）とは何か？
本番サーバーは、開発中に便利なデバッグ機能やホットリロード機能は無効になり、安定性とパフォーマンスに特化した仕様になります。
本番サーバーの特徴
パフォーマンスの最大化
ビルドプロセスでコードが最大限に圧縮（minify）、最適化（optimize）されているため、サーバーの応答速度が速く、リソースの消費が抑えられます。
大量のユーザーアクセスに耐えるために不可欠の処理です。
アクセスアドレス
デフォルトでは、開発サーバーと同じくhttp://localhost:3000で起動します。
ですが、このコマンドは通常、Vercel、AWS、Azureなどのホスティング環境で実行され、ユーザーは割り当てられたドメイン名や公開IPアドレスを通じてアクセスすることになります。
