⚡️ 起こっていること
Laravel + Vite で開発中にエラーで止まったり、ターミナルを無理やり閉じたりすると、次に npm run dev したときにこんなことになりませんか？
➜ Local: http://localhost:5174/ <-- !? なぜか 5174 になっている
➜ Network: use --host to expose
本来は 5173番 で動いてほしいのに、勝手に 5174番 にズレてしまう現象です。
これの何が困るかというと、
- AWSなどのセキュリティグループで
5173しか許可していない -
vite.config.jsやbladeが5173を見に行っている
この状態でポートがズレると、「CSSやJSが読み込まれず、画面が真っ白（または崩れる）」 という悲しい状態になります。
👻 原因：5173番にゾンビがいる
原因はシンプルです。
「さっき終了したはずのプロセスが、裏でまだ5173番を握りしめたまま生き残っている（ゾンビ化している）」 からです。
Viteは優しいので、「あ、5173番埋まってるな。じゃあ空いてる5174番を使おう」と気を利かせてくれますが、サーバー環境ではその優しさが逆に仇となり、通信遮断の原因になります。
🚀 解決策：一撃必殺コマンド
犯人探し（PIDの確認）なんて面倒なことは不要です。
「5173番を使っているヤツ」を指名手配して即座に強制終了させましょう。
以下のコマンドを叩くだけです。
fuser -k 5173/tcp
-
fuser: ファイルやポートを使っているプロセスを特定するコマンド -
-k: kill（強制終了） -
5173/tcp: 5173番ポートを指定
✅ 確認
コマンド実行後、もう一度いつものように起動してみてください。
npm run dev
➜ Local: http://localhost:5173/
無事、5173番 に戻ってきました！
これで画面のデザインも正しく読み込まれるはずです。
💡 補足：fuserがない場合
もし fuser: command not found と言われた場合は、psmisc パッケージが入っていません。
その場合は、ちょっと面倒ですが lsof で犯人を特定して kill します。
# 1. 犯人(PID)を探す
lsof -i :5173
# -> 結果の PID の数字を覚える (例: 12345)
# 2. 始末する
kill -9 12345
でも、fuser の方が圧倒的に楽なのでおすすめです！