88402


# 現象

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

  * http://localhost:3000
  * http://localhost:3001

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

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

# 環境

[code]

    OS: Windows 10
    wsl: Ubuntu-20.04
    node: v14.19.1
    npm: 6.14.16
    
[/code]

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

# 詳細

`localhost:3000`にアクセスできないことを、以下で質問させていただきました。  
[npm start しても React アプリケーションに localhost
でアクセスできない](https://ja.stackoverflow.com/questions/88367/npm-
start-%e3%81%97%e3%81%a6%e3%82%82-react-%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ab-
localhost-%e3%81%a7%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84)

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

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

# 解決したいこと

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

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

# 補足

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

[![rails](https://i.stack.imgur.com/9qKf6.png)](https://i.stack.imgur.com/9qKf6.png)

# 試したこと

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


CC BY-SA 4.0
2022-04-19T04:53:14.947
88395
2022-04-20T09:13:58.223
47477
question
node.js reactjs npm wsl
npm startで特定のポートにだけアクセスできない


# 原因

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

[WSL2でのネットワーク設定(Windows外部から) | Windows
WSL2に外部から直接アクセスするための設定](https://rcmdnk.com/blog/2021/03/01/computer-windows-
network/#wsl2%E3%81%A7%E3%81%AE%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E8%A8%AD%E5%AE%9Awindows%E5%A4%96%E9%83%A8%E3%81%8B%E3%82%89)

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

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

[code]

    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";
    
[/code]

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

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

* * *

# 追記

解決しました。

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

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

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

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


CC BY-SA 4.0
2022-04-19T09:56:27.127
88402
2022-04-20T09:13:58.223
2022-04-20T09:13:58.223
47477
47477
88395
answer