0

現象

create-react-app したアプリケーションで npm start をしたとき

  • http://localhost:3000
  • http://localhost:3001

以上二つのポートのみアクセスできない。

しかし、ほかのポート(例えば、3002, 4000)にはアクセスできる。

環境

OS: Windows 10
wsl: Ubuntu-20.04
node: v14.19.1
npm: 6.14.16

node: v16.14.2(npm: 8.5.0)でも同様にアクセスできませんでした。

詳細

localhost:3000にアクセスできないことを、以下で質問させていただきました。
npm start しても React アプリケーションに localhost でアクセスできない

そこで、.envにPORTやHOSTを設定できることを教えいただきました。

いろいろ試したところ、localhost:3000localhost:3001のみアクセスできないことが判明しました。

解決したいこと

以前は、create-react-appしたアプリケーションのデフォルトのポートである、localhost:3000でアクセスできていました。

なので、localhost:3000localhost:3001の両方にアクセスできるようにしたいです。

補足

Railsアプリケーションであれば、localhost:3000localhost:3001にアクセスすることができました。

rails

試したこと

いろいろなポートに変えてnpm startしてみる。

2
  • WSL タグこそ付いてはいますが、タイトルや本文でも WSL 環境であることをもう少し目立つようにした方が注意をひきやすくなる気がします。単なる localhost と「WSL 環境でホスト環境から仮想環境に localhost でアクセス」では注意すべき箇所が変わってきます。
    – cubick
    Commented 2022年4月20日 7:22
  • @cubick さん ありがとうございます。今後はもっとわかりやすい文章を心がけたいと思います。 問題については無事自己解決できました。 Commented 2022年4月20日 9:11

1 件の回答 1

0

原因

以前、以下のサイトに則って、外部(スマホなど)からローカルのアプリケーションにアクセスできるような設定ファイルを作成しました。

WSL2でのネットワーク設定(Windows外部から) | Windows WSL2に外部から直接アクセスするための設定

ここで、wsl_port.ps1という、ポート開放のコードを作成したことをすっかり忘れていました。
このファイルには、ポート3000、3001への外部アクセスを許可するコードを書いていました。

コードはこんな感じで22,3000,3001,8080番ポートを外部に開放しているらしいです。

if (!([Security.Principal.WindowsPrincipal][Security.Principal.WindowsIdentity]::GetCurrent()).IsInRole("Administrators")) { Start-Process powershell.exe "-File `"$PSCommandPath`"" -Verb RunAs; exit }

$ip = bash.exe -c "ip r |tail -n1|cut -d ' ' -f9"
if( ! $ip ){
  echo "The Script Exited, the ip address of WSL 2 cannot be found";
  exit;
}

# All the ports you want to forward separated by comma
$ports=@(22,3000,3001,8080);
$ports_a = $ports -join ",";

# Remove Firewall Exception Rules
iex "Remove-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' ";

# Adding Exception Rules for inbound and outbound Rules
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort $ports_a -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort $ports_a -Action Allow -Protocol TCP";

for( $i = 0; $i -lt $ports.length; $i++ ){
  $port = $ports[$i];
  iex "netsh interface portproxy add v4tov4 listenport=$port listenaddress=* connectport=$port connectaddress=$ip";
}

# Show proxies
iex "netsh interface portproxy show v4tov4";

なぜこれが悪さをしていたのかはよくわかりませんが、PowerShellの管理者実行でこのファイルを実行したら、通常通りローカルホストを立てることが出来ました。

原因はわかりましたので解決済みとさせていただきます。


追記

解決しました。

上に示したコードを用いて、外部端末からWSLのローカルホストへポートフォワーディングしていました。

WSLを立ち上げなおすたび、WSLのローカルホストの値は変わってしまいます。
上のコードを再実行することで、新たにローカルホストへのポートフォワーディングの設定値が上書きされるため、うまくいっていたようです。

しかし、上のコードを再実行しなかった場合、古い設定値がWindownsの方に残っており、それによってローカルホストへの接続がうまくいっていなかったみたいです。

ポート番号3000と3001のポートフォワーディングの設定値を削除したところ、ローカルホストへのアクセスができるようになりました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。