Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@agajo

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

以上です。

参考リンク

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
19
Help us understand the problem. What are the problem?