angular

Angularのng serveコマンドで、外部のスマホから確認する方法

スマートフォン全盛のこのご時世、WEB開発をするのならば当然スマホから見てサイトがどういう見栄えなのかを確認しながら開発を進めます。

ローカルでAngularアプリを開発する際、Angular-CLIのng serveコマンドを使えば、ファイルの更新と同時にローカルのブラウザで確認が取れますが、サーバーにファイルをアップロードしている訳ではないので、スマホ実機での確認が出来ません(ブラウザでエミュレートする方法もあるかもしれませんが、やっぱり実機での確認はしたい)。

一回一回ビルドしてサーバーにアップするのも芸の無い話ですし、せめて同一ネットワーク内にあるスマホから確認する方法はないか考えてみました。

hostオプションで外部から確認ができるようになる

結論から言うとhostオプションをつければ、同一ネットワーク内にある外部の端末から確認が出来るようになります。

ただ自分のPCを簡易的なWEBサーバーとして使う訳ですから、それなりに準備は必要です。今回はその方法をざっくりとまとめてみました。

自分のIPアドレスを確認する

外部から自分のPCにアクセスする訳ですから、自機のIPアドレスを確認しておく必要があります。Linuxをお使いの方でしたら

ifconfig

で確認できます。

こういう時に備えてIPアドレスを固定しておくという手もあるかもしれませんが、あんまりオススメはしません。ラップトップをお使いの方でしたら、気分転換にカフェで仕事するという事もあるでしょう。そんな時にIPアドレスが固定されていると、フリーのwifiに繋いだ時に不都合が出る可能性が高いです。

どうしても固定しておきたいという場合は、ルーター側で固定すると良いでしょう。Atermのルーターの場合、MACアドレスとIPアドレスを事前に紐付けておく機能があるので、そういう機能のあるルーターをお使いの場合積極的に使っていきたいです。

ポートを開けておく

ng serveコマンドはデフォルトで4200番ポートを使うので、そのポートを開けておく必要があります。自分の場合ufwを使っているので、以下のコマンドで開けます。

sudo ufw allow 4200

ng serveコマンド実行

以上で前準備は完了です。ng serveコマンドをhostオプションをつけて起動します。

ng serve --host 192.168.10.104

無事にスマホから確認できました。

ng_serve