
現象
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 でアクセスできない



回答1件
あなたの回答
tips
プレビュー