Angularの開発用ローカルサーバーにスマホでアクセスする

メモがてら、方法だけ書いておきます。

#他のデバイスからアクセス可能なローカルサーバーを立ち上げる

ターミナルから

ng serve --open

とする代わりに、

ng serve --host 0.0.0.0

とすると、同じネットワーク内の他のデバイスからアクセス可能なローカルサーバーが立ち上がります。

この時、

open your browser on http://localhost:4200/

のような表示がでるので、この4200というポート番号を覚えておきます。

#ローカルIPを調べる

Macなら、Network Utilityを開き、infoタブに移動し、プルダウンからWi-Fiを選べば、IP Adressという項目があります。

(Wi-Fi以外の方法でネットワークに繋いでいるなら、適宜それを選ぶ)

またはターミナルからifconfigを使ってもわかりますが、正直読みにくいです。

Windowsならコマンドプロンプトからipconfigですかね。

#スマホからアクセスする

スマホを、ローカルサーバーを立ち上げてるPCと同じネットワークに繋ぎます。

Wi-Fiなら同じWi-Fiに繋げば良いです。

ブラウザを開き、アドレスバーに、

先ほど調べたIPアドレスの後ろに、:を挟んでポート番号をつけて

http://192.168.11.1:4200

のような感じで入力すれば、アクセスできます。

localhostと書いてあった部分を、IPアドレスで置き換えたわけです。

最近のスマホのブラウザなら、http://は省略していいと思います。

以上です。

#参考リンク