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

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

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

CentOSは、主にRed Hat Enterprise Linux(RHEL)をベースにした、フリーのソフトウェアオペレーティングシステムです。

VirtualBox

VirtualBoxは、現在米オラクル社が開発している、 x86仮想化ソフトウェア・パッケージの一つです。

Q&A

解決済

1回答

3189閲覧

AngularCLIでプロジェクトを新規作成してホストOS側ブラウザで「http://(VM固定IP):4200」に入ろうとしても「接続が拒否されました。」という問題。

tamahimesama_xz

総合スコア27

CentOS

CentOSは、主にRed Hat Enterprise Linux(RHEL)をベースにした、フリーのソフトウェアオペレーティングシステムです。

VirtualBox

VirtualBoxは、現在米オラクル社が開発している、 x86仮想化ソフトウェア・パッケージの一つです。

0グッド

0クリップ

投稿2018/07/12 15:04

編集2018/07/13 13:31

Angularの基本を勉強すべく、AngularCLIを使った新規プロジェクトを構築して、サーバを起動させたところまでは正常に進みました。
ところがホストOS側ブラウザで「http://(VM固定IP):4200」に入ろうとしても「接続が拒否されました。」という問題にぶつかりました。

WEBで調べた内容と書籍を見直して何度もトライしましたが、解決できず膠着状態です。
ぜひアドバイスをいただきたく質問させていただきます。

前提・実現したいこと

http://(VM固定IP):4200をホストOS側のブラウザでアクセスしてプロジェクトの画面が出るのがゴールです。

[追記] 2018/07/13 解決しました。

ng serve --host 0.0.0.0で叩いたところサーバが通り解決しました。
ありがとうございました。

原因ですが下記参考資料に詳しく書かれていたことを後で知りました。

(参考資料)
https://mosapride.com/index.php/2017/02/23/post-154/

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

このサイトにアクセスできません
(VM固定IP)で接続が拒否されました。
(VM固定IP) 4200 を Google で検索してください
ERR_CONNECTION_REFUSED

※アクセスがままならないためブラウザの開発者ツールのコンソールには何も出力されない状態です。

試したこと

  1. プロジェクトフォルダを全て削除してng new testで再構築してもエラーは出力無し。

  2. ng serveでサーバ起動すると 「wdm」: Compiled successfully.が出力される。

  3. Apache(ポート80)からホストOS側ブラウザでアクセスしたら「It works!」が出力される。

  4. firewall-cmd --zone=public --add-port=4200/tcp --permanentでCentOSのポート4200は解放済。

  5. ゲストOSのターミナルでcurl http://localhost:4200/を叩くと、HTMLが返ってきます。エラー記述は見当たりません。

  6. 当質問から外れてしまいますがnode.jsとpython(flask)の簡易サーバーを起動して、ホストOS側ブラウザでアクセスすると正常に「Hello world」が表示されます。ポートも開放しています。

  • node.js のserver.js => http://(VM固定IP):8000 (OK)
  • flask のserver.py => http://(VM固定IP):15273(OK)

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

  1. ホストOS:Windows10
  2. VM:Windows版 Oracle virtualbox 5.2.12
  3. ゲストOS:CentOS 7.4 minimal版
  4. Apache2.4.6
  5. node v8.11.3
  6. npm 5.6.0
  7. ng versionを叩いた結果

Angular CLI: 6.0.8
Node: 8.11.3
OS: linux x64
Angular:
...

Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.1
typescript 2.7.2


以上となります。

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

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

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

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

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

guest

回答1

0

ベストアンサー

以下のコマンドを試してもらえますでしょうか?

ng serve --host 0.0.0.0

https://github.com/angular/angular-cli/wiki/serve

投稿2018/07/12 16:19

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

tamahimesama_xz

2018/07/13 13:27

「ng serve --host 0.0.0.0」を叩いて解決できました。ありがとうございました。 「Welcome to my app!」という画面が表示されました。 また、ご指摘いただいたコメントを拝見した後に気づいたのですが、angular-cliの githubにて「Issue #2375」でまさに同じトラブルと対処方法が書かれてありました。 https://github.com/angular/angular-cli/issues/2375
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問