Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

ターミナルから

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

以上です。

参考リンク

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

agajo
あんなに勉強して、親に高い予備校代も出してもらって東大に入り、卒業したのに、今では家と食事を親に頼りながら、年金と住民税を払うためにトイレ掃除をしている者です。
https://portal.oka-ryunoske.work/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした