npm run watch このサイトにアクセスできませんとなってしまう

Question

現在Laravelとvue.jsを使用しアプリケーションを作っています。

npm run watchしてweb表示をしようと思ったのですがビルドして
http://localhost:3000にアクセスしたら下記のように
アクセスできませんでした。

コマンドプロンプトの方は下記のように正常に動いていると思われます。

原因がわかる方がいましたらご教示頂けると嬉しいです。
よろしくお願いいたします。

Answer 1

externalで表示されているhttp://172.18.0.3:3000に接続すれば閲覧できるかもしれません。

---

エスパー回答で切り込みますが、
このプログラムを走らせた環境はあなたのマシンで合ってますか？

恐らく、VirutalBox等の仮想マシンでLinuxマシンを構築し
その中でLaravelのWebサーバーを立ち上げたのだろうと考えられます。

開発用途で作る仮想マシンは、基本的にエミュレートで作った仮想のCPU、メモリ、HDD、ネットワークアダプター等を組み込んで動作させるので
これはそのパソコン内であってパソコン内ではない別の環境です。

ホストマシンのWindows(もしくはMac)からlocalhostへ接続しても、
ホストマシン自体はサーバを稼働させてないので閲覧できません。

externalで表示されているのは仮想マシンのIPアドレスでしょうか？
もしそうならhttp://172.18.0.3:3000に接続すれば普通に閲覧できるかもしれません。
それで無理なら使用している仮想マシンのサーバーを
外部から見られるような設定を施してみてください。

設定方法はググれば下記のような記事がヒットして参考になるはずです。
VirtualBoxでGuestOSのアプリケーションに外部からアクセスする方法 - Qiita

Comments

[hiroki88]

回答ありがとうございます。
おっしゃる通りdockerを使用してLaravelを立ち上げております。
仮想サーバーはnginxです。
教えて頂いた内容で指定のURLにアクセスしたところ
このサイトにアクセスできません。
172.18.0.3 からの応答時間が長すぎます。
となってしまいました。
この場合は外部から参照できるように設定を変更した方がよろしいですかね?

[hiroki88]

今色々触っていたらhttp://localhostでアクセスできました...。
なんでなんですかね...。

[miyabi-sun]

なんにせよ解決したみたいで良かったです。
Dockerはrunコマンドでコンテナを稼働させるタイミングで`-p`オプションを指定することで、
ホストマシンのポート番号に、コンテナのポート番号を紐付ける事が可能です。

コンテナに外部からアクセス（ポートフォワード） - Qiita
https://qiita.com/tifa2chan/items/a58e34019d4f10097a4d

この時、コンテナが待ち受けるポート番号と、ホストマシンが待ち受けるポート番号は違うものが設定できます。

恐らく`-p 80:3000`の設定がなされているはずで、
この場合`http://localhost`でアクセス出来るでしょう。
(package.jsonの中身を開いてwatchスクリプトが何を実行しているか確認すれば疑問が解消されると思います)

[hiroki88]

かしこまりました。
ご丁寧に教えていただきありがとうございます。