npm startでlocalhost:3000が表示されない

Question

仮想環境で、Reactの環境構築をしました。
create-react-appをインストールし正常に完了、
helloというプロジェクトを作成後npm　startを実行しましたがブラウザでアクセスしても接続ができません。

初心者です。ご意見頂けますと幸いです。

発生している問題・エラーメッセージ

> $　create-react-app　hello
> $　cd　hello
> $　npm start

→ブラウザで（http://localhost:3000/）にアクセス
→このサイトにアクセスできませんlocalhost で接続が拒否されました。と表示される

試したこと

■TCP/3000番ポートを開放する
１．下記URLの「TCP/3000番のポートを開放する」を参考に設定を行いました
https://qiita.com/sweetpox/items/9b44eaf8b7da535f8716

２．ufwをreload→statusで3000があることを確認

$　sudo ufw reload
$　sudo ufw status

→

To Action From

---

22/tcp ALLOW Anywhere
4000 ALLOW Anywhere
22/tcp (v6) ALLOW Anywhere (v6)
3000 (v6) ALLOW Anywhere (v6)

３.再びnpm　start
→ブラウザで3000にアクセスしたものの状況変わらず（IPアドレスでも試しました）

４.ポート4000で試してみる
→3000ではないポートならうまくいったというものを見つけたので4000を先ほどの手順で開放し、下記コマンドを実行

$　PORT=4000 npm start

→ブラウザで4000にアクセスしたものの状況変わらず（IPアドレスでも試しました）

補足情報（FW/ツールのバージョンなど）

$ node -v
v10.14.2

$ npm -v
6.13.6

ゲストOS
NAME="Ubuntu"
VERSION="18.04.2 LTS (Bionic Beaver)"

ホストOS
Windows

Answer 1

ゲストOS
NAME="Ubuntu"
VERSION="18.04.2 LTS (Bionic Beaver)"

ホストOS
Windows

おおっとこの一文はなんですか？
これがほぼ確定で原因でしょうね。

もしかしてVirtualBox等の仮想マシンではありませんか？
そうであれば、仮想マシン用の設定をしなければなりません。

仮想マシンはホストマシンから切り取った仮想CPU、仮想メモリ、仮想HDD……等を接続して動かしていますが、
それには仮想のネットワークアダプタも含まれます。
localhostは自分自身の端末を指しますが、それに仮想マシンは含まれません。

大昔の情報ですが、調べると下記のような記事を発見しました。
どんな環境を作って動かしているかによって答えが変わりますので、その辺を調べながら歩を進めてください。
VirtualBox　ゲストOSのWebサーバに外部から接続する - ソースコードから理解する技術－ＵｎｄｅｒＳｏｕｒｃｅＣｏｄｅ

Comments

[nanko]

ご回答ありがとうございます。
上記参考に、Windowsファイアウォールの設定を行ったところ、無事ブラウザで確認することができました！
ありがとうございました！

[miyabi-sun]

ナイス！お疲れ様です
ゲストOS、ホストOSを含めたあたりも流石といった感じです