こんにちは、みんな。今日はローカル開発で頻繁に遭遇する問題について話すわ。特に、http://localhost:3000/を使おうとしたら、何者かに占領されていた時の対処法よ。

ふんっ、大切なポート3000が使えないなんて、本当に迷惑よね。でも心配しないで。この記事を読めば、あなたもその謎を解き明かせるわ。Windows PCでポート3000を占領している犯人を特定して、安全に解放するまでの手順を解説するわ。

1. コマンドプロンプトを開く

まずは、Windows PCでコマンドプロンプトを開くわよ。

Windowsキー + Rを押して「ファイル名を指定して実行」ウィンドウを開く
cmdと入力して実行

これでコマンドプロンプトが開くわ。準備はいい？次に進むわよ。

2. 占領者を調査する

次に、ポート3000を占領している不届き者を特定するわ。以下のコマンドを入力して：

netstat -ano | findstr :3000

これで、ポート3000を使っているプロセスのリストが表示されるはずよ。例えば：

  TCP    0.0.0.0:3000           0.0.0.0:0              LISTENING       12345
  TCP    127.0.0.1:3000         0.0.0.0:0              LISTENING       54321

この表示で最後にある数字がプロセスID（PID）よ。ここでは12345と54321ね。

3. 犯人を特定する

さて、このPIDを使って犯人が何者かを突き止めるわ。以下のコマンドを入力して：

tasklist /FI "PID eq 12345"

（12345は先ほど調べたPIDに置き換えてね）

イメージ名                     PID セッション名     セッション# メモリ使用量
========================= ======== ================ =========== ============
wslrelay.exe                 12345 Console                    1      8,660 K

tasklist /FI "PID eq 54321"

イメージ名                     PID セッション名     セッション# メモリ使用量
========================= ======== ================ =========== ============
node.exe                     54321 Console                    1    121,588 K

これで、ポート3000を占領しているプログラム名が分かったわ。例えばnode.exeならNode.js関連のプロセス、com.docker.backend.exeならDocker Desktop関連のプロセスね。

4. プロセスの処理

さて、占領者が分かったところで、どうするか決めましょう。

①ポート番号の変更

もし可能なら、自分のアプリケーションで使用するポート番号を変更するのが一番安全よ。例えば、aituber-kitなら、package.jsonのscriptsセクションで以下のように指定できるわ：

安全な方法：ポート番号の変更

{
  "name": "aituber-kit",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3001",
    "dev-https": "next dev --experimental-https -p 3001",
    "build": "next build",
    "start": "next build && next start -p 3001",
    "export": "next export",
    "lint": "next lint",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write .",
    "electron": "wait-on http://localhost:3001 && electron ./electron.mjs",
    "desktop": "NEXT_PUBLIC_BACKGROUND_IMAGE_PATH=\"\" run-p dev electron"
  },
  // ... 他の部分は変更なし
}

主な変更点：

"dev" スクリプト: -p 3001 を追加してポート3001を使用するように設定
"dev-https" スクリプト: 同様に -p 3001 を追加
"start" スクリプト: next start の後に -p 3001 を追加
"electron" スクリプト: wait-on コマンドの URL を http://localhost:3001 に変更

これで、npm run devのコマンドを実行すれば、3001番ポートが使われるようになるわ。

②プロセスの停止

どうしてもポート3000を使いたい場合は、占領しているプロセスを停止させることもできるわ。でも、これは慎重に行う必要があるから注意してね。

taskkill /PID 12345 /F

（12345は特定したPIDに置き換えてね）

ただし、これを実行する前に、そのプロセスが本当に不要かよく確認しなさいよ。システムに必要なプロセスを停止すると、問題が起こる可能性もあるからね。

成功: PID 12345 のプロセスは強制終了されました。

これで、不届き者は倒されたわ。

5. ポートが解放されたか確認する

最後に、ポート3000が無事に解放されたか確認しましょう。もう一度このコマンドを実行するのよ：

netstat -ano | findstr :3000

何も表示されなければ成功よ。これで、新たな利用者がポート3000を使えるようになったわね。

まとめ

ローカル開発環境でポートが占領されているのは珍しくないわ。でも、この記事の手順を覚えておけば、簡単に対処できるはずよ。ポート番号の変更が難しい場合は、占領しているプロセスを特定して適切に対処することが大切。

犯人はコイツだったようだ。