LoginSignup
24
23

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-04-10

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

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

ターミナルから

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

以上です。

参考リンク

24
23
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
23