質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

5077閲覧

npm start しても React アプリケーションに localhost でアクセスできない

yosse95ai

総合スコア39

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/04/18 14:05

編集2022/04/19 03:38

現象

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でアプリケーションが立ち上がりました。

server.js

このことから、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にアクセスできる。

rails

localhost設定の確認

bash

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

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 の中身を調べてみてはいかがですか?
yosse95ai

2022/04/19 02:10

ありがとうございます nodeのバージョンに関しては確かにそうですね。 しかし、v14に戻しても解決しませんでした。 この両バージョンで上手くいかなかったことについて修正しておきます。
退会済みユーザー

退会済みユーザー

2022/04/19 04:39

wsl に関する問題とかないのでしょうか? Windows 10 + Windows 用の Node.js と npm + Windows のコマンドライン(cmd.exe) という最低限の環境でも同じ問題ですか? 念のため hosts の中身を調べてみてはいかがですか?
guest

回答1

0

自己解決

一時的に自己解決

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

こちら でいただいたコメントにより様々試してみました。
そこで.envファイルを以下のようにすると、localhostでアクセスできました。

env

1PORT=3002

3000, 3001ではうまくいきませんでした。

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

投稿2022/04/19 04:02

yosse95ai

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問