現象
npm start
すると、http://localhost:3000
でアクセスできず、http://192.168.xxx.xxx:3000
でのみアクセスできる。
(xxx:伏字にしてます。)
解決したいこと
数か月前までは、何事もなくnpm start
でlocalhostにアクセスできていたのですが、突然うまくいかなくなったので困惑しています。
どうしたら、今まで通りhttp://localhost:3000
でアクセスできるようになるのか、解決策を教えていただきたいです。
詳細
npx create-react-app myapp
として React アプリケーションを作成しました。
作成したアプリケーションのディレクトリに移動し、npm start
をしました。
すると、アプリケーションが立ち上がります。
ログは正常な感じで出ています。
Compiled successfully!
You can now view myapp in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.xxx.xxx:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
自動でChromeを立ち上がり、http://localhost:3000
ページを表示しようとするのですが、以下のように開けません。
On Your Network の方にアクセスするとうまく表示されます。
試したこと
expressでビルドファイルをサーブ
ためしに、expressを用いて React アプリケーションのビルドファイルをhttp://localhost:3000
でサーブしてみました。
コードをこれです。
// server.js
const express = require('express');
const path = require('path');
const port = process.env.PORT || 3000;
const app = express();
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);
if (port === 3000) {
console.log(`Now hosting at "http://localhost:${port}/"`);
}
そして、ビルド → サーブ。
$ npm run build
$ node server.js
するとhttp://localhost:3000
でアプリケーションが立ち上がりました。
このことから、npm start
したときのlocalhost
でうまく立ち上げられていなのだろうと思います。
ping が送れるか試す
送れました。
$ ping localhost
PING localhost (127.0.0.1) 56(84) bytes of data.
64 bytes from localhost (127.0.0.1): icmp_seq=1 ttl=64 time=0.030 ms
64 bytes from localhost (127.0.0.1): icmp_seq=2 ttl=64 time=0.253 ms
64 bytes from localhost (127.0.0.1): icmp_seq=3 ttl=64 time=0.042 ms
^C
--- localhost ping statistics ---
3 packets transmitted, 3 received, 0% packet loss, time 2050ms
rtt min/avg/max/mdev = 0.030/0.108/0.253/0.102 ms
PCの再起動・create-react-appのやり直し
どちらも解決しませんでした。
環境
wsl: Ubuntu-20.04
node: v16.14.2
npm: 8.5.0
一応create-react-app
のバージョン
$ npx create-react-app --version
5.0.1
追記1
別のPCで同様の作業を行いましたが、何事もなかった。
そのため、現象が起きたPC固有の問題である可能性が出てきた。
追記2
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.
追記3
高速スタートアップが有効であることで、うまくいっていないといった記事が散見されたので、以下のサイトを参考に、高速スタートアップの無効を試してみましたが、変わりありませんでした。
https://office-hack.com/windows/windows10-faststartup-disabled/
追記4
Rails アプリケーションはlocalhostにアクセスできる。
追記5
コメントより
$ cat /etc/hosts | grep localhost
127.0.0.1 localhost
::1 ip6-localhost ip6-loopback
追記6
マルチポストしました。
追記7
回答より:https://ja.stackoverflow.com/a/88384/47477
C:\Windows\System32\drivers\etc\hosts の内容
# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost
# Added by Docker Desktop
192.168.0.13 host.docker.internal
192.168.0.13 gateway.docker.internal
# To allow the same kube context to work on the host and the container:
127.0.0.1 kubernetes.docker.internal
# End of section
でした
teratail.com/questions/dwxplo70vprsi7
cat /etc/hosts | grep localhost
を実行したときに127.0.0.1 localhost
の記述はありますか?