現象

create-react-appしたアプリケーションをnpm startすると、http://localhost:3000でアクセスできず、http://192.168.xxx.xxx:3000でのみアクセスできる。
(xxx：伏字にしてます。)

環境

OS: Windowns 10
wsl2: Ubuntu-20.04
node: v16.14.2
npm: 8.5.0

一応create-react-appのバージョン

$ npx create-react-app --version
5.0.1

node のバージョンを v14.19.1(npm: v6.14.16)ダウングレードしてもダメでした。

解決したいこと

数か月前までは、何事もなくnpm startでlocalhostにアクセスできていたのですが、突然うまくいかなくなったので困惑しています。

どうしたら、今まで通りhttp://localhost:3000でアクセスできるようになるのか、解決策を教えていただきたいです。

詳細

npx create-react-app myappとして React アプリケーションを作成しました。
作成したアプリケーションのディレクトリに移動し、npm startをしました。

すると、アプリケーションが立ち上がります。

ログは正常な感じで出ています。

bash
1Compiled successfully!
2
3You can now view myapp in the browser.
4
5  Local:            http://localhost:3000
6  On Your Network:  http://192.168.xxx.xxx:3000
7
8Note that the development build is not optimized.
9To create a production build, use npm run build.
10
11webpack compiled successfully

自動でChromeが立ち上がり、http://localhost:3000ページを表示しようとするのですが、以下のように開けません。

On Your Network の方にアクセスするとうまく表示されます。

試したこと

expressでビルドファイルをサーブ

ためしに、expressを用いて React アプリケーションのビルドファイルをhttp://localhost:3000でサーブしてみました。
コードをこれです。

js
1// server.js
2const express = require('express');
3const path = require('path');
4const port = process.env.PORT || 3000;
5const app = express();
6app.use(express.static(__dirname));
7app.use(express.static(path.join(__dirname, 'build')));
8app.get('/*', function (req, res) {
9  res.sendFile(path.join(__dirname, 'build', 'index.html'));
10});
11app.listen(port);
12if (port === 3000) {
13  console.log(`Now hosting at "http://localhost:${port}/"`);
14}

そして、ビルド　→　サーブ。

bash
1$ npm run build
2$ node server.js

するとhttp://localhost:3000でアプリケーションが立ち上がりました。

このことから、npm startしたときのlocalhostでうまく立ち上げられていなのだろうと思います。

ping が送れるか試す

送れました。

bash
1$ ping localhost
2PING localhost (127.0.0.1) 56(84) bytes of data.
364 bytes from localhost (127.0.0.1): icmp_seq=1 ttl=64 time=0.030 ms
464 bytes from localhost (127.0.0.1): icmp_seq=2 ttl=64 time=0.253 ms
564 bytes from localhost (127.0.0.1): icmp_seq=3 ttl=64 time=0.042 ms
6^C
7--- localhost ping statistics ---
83 packets transmitted, 3 received, 0% packet loss, time 2050ms
9rtt min/avg/max/mdev = 0.030/0.108/0.253/0.102 ms

PCの再起動・create-react-appのやり直し

どちらも解決しませんでした。

別のPCで同様の作業

別のPCで同様の作業を行いましたが、何事もなかった。

そのため、現象が起きたPC固有の問題である可能性が出てきた。

npm start時の謎のログ

npm startしたら、以下のようなログが出ていることに気が付きました。
サーブ時にコンソールがリフレッシュされるので、気づきませんでした。

ログの内容について検索してみましたがよくわかりませんでした。

(node:1064) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:1064) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

高速スタートアップの無効化

高速スタートアップが有効であることで、うまくいっていないといった記事が散見されたので、以下のサイトを参考に、高速スタートアップの無効を試してみましたが、変わりありませんでした。

https://office-hack.com/windows/windows10-faststartup-disabled/

別言語でのlocalhost立ち上げ

Rails アプリケーションはlocalhostにアクセスできる。

localhost設定の確認

bash
1$ cat /etc/hosts | grep localhost
2127.0.0.1       localhost
3::1     ip6-localhost ip6-loopback

マルチポスト先：スタック・オーバーフロー - npm start しても React アプリケーションに localhost でアクセスできない

退会済みユーザー

2022/04/19 01:05 編集

> node: v16.14.2 > 数か月前までは、何事もなくnpm startでlocalhostにアクセスできていたのですが数ヵ月前は Node.js のバージョンは 16.14.2 ではなかったはずですが、問題が出たので最新版に入れ換えたのですか？ wsl に関する問題とかないのでしょうか？ Windows 10 + Windows 用の Node.js と npm + Windows のコマンドライン(cmd.exe) という最低限の環境でも同じ問題ですか？念のため hosts の中身を調べてみてはいかがですか？