🔧

Next.js開発時にポート3000が解放されない問題と解決方法

に公開

はじめに

Next.js開発中に「Port 3000 is in use」というエラーに遭遇し、pkillコマンドを使ってもポートが解放されない問題に直面しました。この記事では、その原因と解決方法を共有します。

問題の発生状況

Next.jsアプリケーションを開発していて、以下のような状況に遭遇しました:

$ npm run dev

> portfolio@0.1.0 dev
> next dev

 ⚠ Port 3000 is in use, using available port 3003 instead.
   ▲ Next.js 15.3.3
   - Local:        http://localhost:3003

Ctrl+Cで終了後、pkillコマンドを試してもポートが解放されませんでした:

$ pkill -f "npm run dev"
$ npm run dev
# まだポート3000が使用中...

原因の分析

なぜpkillが効かなかったのか

pkill -f "npm run dev"コマンドが効かなかった理由は、プロセスの階層構造にあります:

npm run dev (親プロセス)
└── node (子プロセス: Next.jsサーバー) ← 実際にポート3000を使用
  • pkillは"npm run dev"を含むプロセスを終了させます
  • しかし、実際にポートを使用しているのはnpmが起動した子プロセス(node/Next.js)です
  • 親プロセスだけを終了しても、子プロセスが残ることがあります

解決方法

最終的に以下のコマンドで解決しました:

$ lsof -i :3000 | grep LISTEN | awk '{print $2}' | xargs kill -9

このコマンドの動作:

  • lsof -i :3000: ポート3000を使用している全プロセスを表示
  • grep LISTEN: リスニング状態のプロセスのみをフィルタ
  • awk '{print $2}': プロセスID(PID)を抽出
  • xargs kill -9: 強制的にプロセスを終了

推奨される対処法

1. シンプルな方法

# ポート番号で直接kill(推奨)
lsof -ti :3000 | xargs kill -9

# -t: PIDのみ出力
# -i: 指定ポートを使用するプロセスを表示

2. Next.js固有のプロセスを探す

# Next.jsプロセスを名前で探してkill
pkill -f "next-server"

3. より安全な終了方法

# 強制終了(-9)ではなく、通常のシグナルで終了
lsof -ti :3000 | xargs kill

# プロセスが残っている場合のみ強制終了
sleep 2
lsof -ti :3000 | xargs kill -9 2>/dev/null

4. エイリアスの設定

よく使う場合は、.bashrc.zshrcにエイリアスを追加すると便利です:

# ポートを解放するエイリアス
alias killport='function _killport(){ lsof -ti :$1 | xargs kill -9; }; _killport'

# 使用例
killport 3000

ベストプラクティス

  1. Ctrl+Cの後は少し待つ

    • プロセスが完全に終了するまで数秒待つ
    • 急いで再起動すると問題が発生しやすい
  2. 開発サーバーの正常終了を確認

    # ポートが解放されているか確認
    lsof -i :3000
    
  3. 異なるポートを使用

    # package.jsonで別ポートを指定
    "scripts": {
      "dev": "next dev -p 3001"
    }
    

まとめ

Next.js開発時のポート問題は、プロセスの階層構造を理解することで適切に対処できます。lsofコマンドを使用してポートを使用している実際のプロセスを特定し、確実に終了させることが重要です。

開発効率を上げるためにも、エイリアスの設定や適切なコマンドの使い方を覚えておくと便利です。

GitHubで編集を提案

Discussion