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

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

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

ターミナルから

ng serve --open

とする代わりに、

ng server --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://は省略していいと思います。

以上です。

参考リンク

https://stackoverflow.com/questions/39069742/how-to-test-an-app-created-with-angular-cli-ng-serve-from-another-device

https://github.com/angular/angular-cli/pull/1475#issuecomment-235986121

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.