【備忘録】npm run dev を外部端末から見る方法
背景
npm run dev で立ち上げた開発サーバーは、デフォルトでは localhost:3000 でしかアクセスできません。
そのため同じ LAN 内のスマホや別 PC からアクセスするには設定が必要です。
自分用の備忘録としてまとめます。
方法
1. 自分の PC の IP アドレスを確認
Linux / macOS の場合:
ifconfig
Windows (PowerShell) の場合:
ipconfig
例）
IPv4 Address. . . . . . . . . . . : 192.168.0.45
ここで確認した 192.168.0.45 が LAN 内での自分の PC の IP アドレスです。
2. 開発サーバーを 0.0.0.0 で起動する
Next.js の場合:
npm run dev -- --hostname 0.0.0.0 --port 3000
Vite の場合:
npm run dev -- --host 0.0.0.0
0.0.0.0 を指定すると、外部からも接続を受け付けるようになります。
3. 外部端末からアクセス
同じ Wi-Fi / LAN に接続している端末のブラウザで以下を開きます。
http://192.168.0.45:3000
これで PC 上の開発サーバーがスマホや別 PC からも見られるようになります。
注意点
- インターネット（WAN）からアクセス可能にするわけではありません。あくまで LAN 内限定です。
- Windows ファイアウォールでポート (例: 3000) がブロックされている場合、許可設定が必要です。
- セキュリティの観点から、外部公開が不要なときは
npm run devを終了するかlocalhostに戻すことをおすすめします。
まとめ
-
npm run devはデフォルトだと外部端末からアクセスできない -
--host 0.0.0.0を指定して起動する - アクセスは
http://<自分のPCのIP>:ポート番号
開発時にスマホ確認したいときなどに便利です。
補足
この記事の下書き作成には ChatGPT (gpt-5) を活用しました。
内容は実際に手元で検証した上で記録しています。