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

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

ただいまの
回答率

90.53%

  • CentOS

    2695questions

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

  • VirtualBox

    760questions

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

  • Angular2

    173questions

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 203

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


以上となります。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

ng serve --host 0.0.0.0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/13 22: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

    キャンセル

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

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CentOS

    2695questions

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

  • VirtualBox

    760questions

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

  • Angular2

    173questions

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