Windows11 の WSL2 で localhost:3000 が出来なかったときのメモ

つながらない

Windows11 の環境で WSL2 の中で起動した Nuxt.js のアプリケーションに接続しようと http://localhost:3000 したところ、接続に失敗してしまいました。

WSL2 は localhostへのフォワーディングをデフォルトでやってくれるようになり、これまではこの方法で接続できていました。

原因調査

Windows の Powershell から IP 直打ちで ping を試すと返ってきました。つまり、疎通はできています。
また、Windows の Powershell から localhost に ping を試すと ::1 から返ってきました。これは正常な動作です。 hosts の設定に問題があるとここで違うアドレスに ping を送ったり、そもそも localhost が解決できなかったりします。(意図せずVPNがオンになっている時あるある)

そして、WSL2 の中で localhost へ curl すると html が返ってくるので、サーバーは問題なく動いているようでした。

念のために Linux 側で ポートのリッスンを確認しました。こちらも問題なし。

ss -tulpn
Netid   State    Recv-Q   Send-Q      Local Address:Port        Peer Address:Port   Process
tcp     LISTEN   0        511               0.0.0.0:3000             0.0.0.0:*       users:(("node",pid=12036,fd=43))
tcp     LISTEN   0        511                     *:33113                  *:*       users:(("node",pid=11781,fd=18))

これ、 Windows 側から見たらどうなっているんだろうとリソースモニターのネットワークタブを見たところ、原因がわかりました。(見にくいですが、左の数字がPID、右がポート番号です)

3000番ポートがWindowsのプロセスに使われている。
ちょっとビックリしました。Vueだけでなく、React なんかもデフォルトポート番号は 3000 だったと思うので、この設定は Web 開発者を殺しにかかっています。

というわけで、使われていない 4000 番ポートで nuxt を立ち上げ直したところ、無事に Windows ホストから localhost で接続ができました。

ちなみに、Windows10 はこんな感じでした。元々は 5000 番台のポートを使っていたようです。

この PID:5040 (svhost.exe(NetSvcs -p)) がどのサービスかを特定しようとしたのですが、リソースモニターの概要タブにはなく、なんらかの子プロセスなのかな？と推測されます。これが特定できれば設定変更も出来そうなんですが…。

3000 で慣れているので出来れば開発用ポート番号を変えたくないんですが、なにか言い方法ご存知の方いらっしゃれば教えてください？