はじめに
私はある日を境に，crate-react-appしたアプリのhttp://localhost:3000へアクセスすることができなくなりました．
一方で，yarn startしたときOn Your Networkで示されるホスト経由だと，アプリを表示できるという現象に見舞われました．
いろいろ質問した末に，自己解決できたのでまとめます．
環境
OS: Windows 10
WSL2: Ubuntu-20.04
もくじ
解決方法
私の場合，「Windows側でWSLへのポートフォワーディングの設定をしており，そのうち，古い設定が残ったままになっていた」ことに起因していました．
ポートフォワーディングの設定をすること自体は悪くないのですが，古い設定値が残っていることがよくなかったみたいです．
WSLは再起動をかけるたびにホストが変わるので，このような現象が起きたと推測できます．
詳細な解説は後にして，ひとまず解決方法を示します.
PowerShellを開く
管理者権限でPowerShellを開き，以下のコマンド実行します．
netsh interface portproxy show v4tov4
すると，ポートフォワーディングの設定値を見ることができます．私の場合は以下．
ipv4 をリッスンする: ipv4 に接続する:
Address Port Address Port
--------------- ---------- --------------- ----------
* 22 172.23.233.206 22
* 3000 172.23.233.206 3000
* 3001 172.23.233.206 3001
* 8080 172.23.233.206 8080
出力結果が出た人は，古い設定値が残っていることに起因している可能性があります．
WSLのホスト名を確認
以下のコマンドを実行して，WSLのホストを確認します．
bash.exe -c "ip r |tail -n1|cut -d ' ' -f9"
すると，現在のWSLのホストが表示されます.私の場合以下．
172.23.224.238
先ほどの「設定値の確認コマンドの結果に示されるホスト」と「現在のWSLのホスト」が違ってしまっていることが確認できました．これが原因です.
ポートフォワーディングの設定を消去
以下のコマンドで，指定ポートのポートフォワーディングの設定値を消去できます．
netsh interface portproxy delete v4tov4 listenport=ポート番号
私は3000番にアクセスできなくなっていたので，3000番の設定を削除します．
そもそも，設定値があるうえでlocalhostにアクセスできていないということは，設定値が古い可能性があるので，すべて削除してしまってもいいかもしれません．
netsh interface portproxy delete v4tov4 listenport=3000
以上の操作で，create-react-appで作成したアプリのhttp://localhost:3000にアクセスできるようになりました．
別の解決方法
私自身は試してうまくはいかなかったが，ほかの人はうまくいっている方法をいくつか紹介しておきます．
私の解決方法が該当しなかった人は試してみてください．
wsl --shutdown
ほんとに多くの人が解決できていました．(私の場合は関係ありませんでしたが)
WSLを一度落として，再起動をかけることで復活した報告です．
wsl --shutdown # もしくはお使いのエディタからリモート接続を終了
wsl # もしくはお使いのエディタで新しリモート接続を開始
以下のリンク内のスレッドを見ていただければいいかと思います．
ファイアウォールの設定を見直す
ファイアウォールでポートへのアクセスを制限されているかもしれません．
「セキュリティが強化された Windows Defender ファイアウォール」を開いて、設定を見直してみてください．(私の場合は関係ありませんでしたが)
以下のリンクの自己解決の部分で原因を言及していました．
原因
冒頭で述べた通り，Windowns側のポートフォワーディングの古い設定値が残っていることで，古い設定で解放されたポートへhttp://localhost:<port>でのアクセスができないようになっていたみたいです．
ポートフォワーディングの設定において参考にしたサイトは以下です．
上でも言った通り，ポートフォワーディング事態は悪いことではなく，古い設定値が残ってしまい，現在のWSLのホストの値と違う値が設定されていることが原因でした．
なぜポートフォワーディンの設定をしたか
WSLでcreate-react-appしたアプリケーションに，外部の端末(スマホなど)からアクセスして，デザインの確認や使用感を試したかった時があり，その時にポートフォワードの設定をしました．
MacやUbuntuユーザであれば，そんな設定しなくていいじゃないかと思われそうですが，WSLを用いている場合，単純にWSLのポートにアクセスしようとしても，アクセスすることはできません．
さらに，Windowsのホストにアクセスしても，WSLのローカルホストへはアクセスできません．
これをかなえるために，Windowsに対するアクセスを，WSLへポートフォワーディングすることで，外部端末からWSLのローカルホストへアクセスしようという寸法です．
これで外部端末から，Windowsのホストにアクセスすれば，WSLのローカルホストへアクセスできます．(開放したポートに限る)
参考：WSL2でのネットワーク設定(Windows外部から)
対策
WSLでローカルホストをたてず，Windowsでローカルホストを立てればそれでおしまいなのですが，この記事を見ているということは，WSLを使っていて，WSLのローカルホストへ外部端末からアクセスしたい人だと思います．
なので以下を対策として挙げさせていただきます．
-
ポートフォワーディングの古い設定値を残さない
- 今回のケース
-
WSLを再起動したときはポートフォワーディングを再設定
- 再起動毎にWSLのホストが変わるため
-
ポートフォワーディングを設定しているということを失念しない
- WSL側ではなくWindows側の設定でおかしくなっているとは予想できなかった
- 私がまさしくこのパターン
おわりに
今回変な地雷を踏んでしまいましたが，解決できてよかったです．
同じ症状の方が救われればと思います．
それでは