88392


# 現象

`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`をしました。

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

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

[code]

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

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

[![エラー](https://i.stack.imgur.com/DpIYI.png)](https://i.stack.imgur.com/DpIYI.png)

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

[![正常](https://i.stack.imgur.com/b8o9f.png)](https://i.stack.imgur.com/b8o9f.png)

# 試したこと

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

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

[code]

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

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

[code]

    $ npm run build
    $ node server.js
    
[/code]

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

[![server.js](https://i.stack.imgur.com/jCk5A.png)](https://i.stack.imgur.com/jCk5A.png)

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

## ping が送れるか試す

送れました。

[code]

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

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

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

# 環境

[code]

    wsl: Ubuntu-20.04
    node: v16.14.2
    npm: 8.5.0
    
[/code]

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

[code]

    $ npx create-react-app --version
    5.0.1
    
[/code]

* * *

# 追記1

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

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

# 追記2

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

ログの内容についてまだ調べていません。

[code]

    (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.
    
[/code]

# 追記3

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

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

# 追記4

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

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

# 追記5

コメントより

[code]

    $ cat /etc/hosts | grep localhost
    127.0.0.1       localhost
    ::1     ip6-localhost ip6-loopback
    
[/code]

## 追記６

マルチポストしました。

## 追記７

回答より：https://ja.stackoverflow.com/a/88384/47477

C:\Windows\System32\drivers\etc\hosts の内容

[code]

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

でした

teratail.com/questions/dwxplo70vprsi7


CC BY-SA 4.0
2022-04-17T07:02:50.080
88367
2022-08-19T02:55:55.270
2022-04-19T03:17:03.470
47477
47477
question
node.js reactjs npm wsl
npm start しても React アプリケーションに localhost でアクセスできない


  1. windowsのhostsにlocalhostの記載があるかどうか確認してください。  
C:\Windows\System32\drivers\etc\hosts

  2. .envで調整する機能があるので、そこのパラメータが想定通りか確認してください  
<https://github.com/facebook/create-react-
app/blob/main/docusaurus/docs/advanced-configuration.md>


CC BY-SA 4.0
2022-04-18T14:30:10.447
88384
2022-04-18T14:30:10.447
25396
88367
answer


# 一時的な自己解決

あくまで一時的であり本質的には解決していません。

`.env`ファイルで以下のようにポート番号(`3002`)を指定すると、`localhost:3002` ではアクセスできました。`3000`,
`3001` ではうまくいきませんでした。

[code]

    PORT=3002
    
[/code]

よくわかりませんが、いったんlocalhostにアクセスできたので、別質問として建てたいと思います。

様々なご意見をくださった方々、ありがとうございました。


CC BY-SA 4.0
2022-04-19T03:57:43.497
88392
2022-04-19T04:53:26.893
2022-04-19T04:53:26.893
3060
47477
88367
answer


同様の症状が出ていました。  
下記のファイルを消すと動いた経験があります

setupProxy.js  
const proxy = require('http-proxy-middleware');


CC BY-SA 4.0
2022-08-19T02:55:55.270
90625
2022-08-19T02:55:55.270
29718
88367
answer