Angularの起動と外部からのアクセス

Angularのサーバー起動では、以下のコマンドを実行します。

ng serve

今回、開発環境は以下のような構成を使用しています。

・VMWare(以降：VM)上にUbuntuをインストール

・ホストOSのWindowsから接続（開発＆閲覧）

VM上で起動したサーバーに
ホストOS上のインターネットブラウザーソフト(以降:ブラウザ)から閲覧することが目標です。

上記のコマンドを実行すると最終的に以下のようなメッセージが表示されます。

VM上のブラウザからはページを参照することが出来ます。

プロジェクトを作成したときに自動的に作成されるページが表示されますね

基本的に、これでも問題は無いけれど…

ホストOSで動作確認などを行いたい!!!

VM上より、ホストOSの方が色々が快適に動作するはず!!!

だから、ホストOSから見たいんだよ!!!

ちなみに…この状態でホストOSのブラウザからアクセスすると…

繋がらないんだよね。

ちなみに、Ubuntuのファイヤーウォールは無効にしてあります。

ローカルだしね。

無効化しておいても良いよねー？

って、ことで

一旦、無効にしたままになっています。

ホストOSから見たいんだけど…

細かいことを理解していないので…何ですが…

わからなかったら、調べてみる。と、いうことで…少し調べてみました。

外部からアクセスできるようにサーバーを起動する場合、

以下のようにしてコマンドを実行するようです。

ng serve --host 0.0.0.0 --port 4200

"Network:"という行が新たに追加表示されました!!!

ここに表示されたURLをホストOS側のブラウザに入力すればOK!!!

アクセス出来た時のスクリーンショット！

問題は無事解決!!!

先ほどのコマンドの解説です。

1. ng serve
   ・AngularのCLIコマンドを使用し、開発用サーバーを起動します
   ・ソースコードの変更を監視し、都度アプリケーションを再ビルドして反映します
2. --host 0.0.0.0
   ・サーバーがどのネットワークインターフェイスでリッスンするかを指定します
   　0.0.0.0
   　　 …「すべてのネットワークインターフェイス」でリッスンする設定です
   　※デフォルトではlocalhost（127.0.0.1）のみでリッスンしますが、
   　　これを変更することで、外部からアクセスできるようになります
3. --port 4200
   ・サーバーが使用するポート番号を指定します
   　※デフォルトポート(4200)以外を指定することが可能です