MacのLocalhostで起動中のサーバにAndroidスマートフォンからアクセスする

December 1, 2021

既出にも程がある情報ですが、自分が必要になった時にすぐ取り出せるように記事にしておきます。なお、自分の環境が Mac & Android なのでその前提で記載します。

アクセス方法は WiFi 経由と有線経由の２つがあります。

WiFi 経由でアクセスする #

1. Mac と Android を同じ WiFi に接続する。
2. Mac に割り当てられている IP アドレスを確認する。ターミナルで ifconfig en0 を実行。

ifconfig en0

en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
	options=400<CHANNEL_IO>
	ether 3c:22:fb:d4:df:7a
	inet6 fe80::18f9:1f86:9c50:d4e9%en0 prefixlen 64 secured scopeid 0x6
	inet 192.168.87.44 netmask 0xffffff00 broadcast 192.168.87.255
	nd6 options=201<PERFORMNUD,DAD>
	media: autoselect
	status: active

3. inet の部分が IP アドレスです。上記で言えば 192.168.87.44 です。
4. Android のブラウザに IP アドレスとポート番号を入力してアクセスする。（例 192.168.87.44:3000）

有線接続でアクセスする #

1. Android の設定を変更する（初回のみ実施） #

Android の USB デバッグの設定を有効にします。過去に有効化していれば実施不要です。

1. 設定画面からビルド番号を 7 回タップする。開発者オプション設定が表示されます。

2. 設定画面から開発者オプションを選択する。

3. 開発者オプションを有効化し、USB デバッグを有効化する。

ここまでで Android の USB デバッグ有効化作業は終わりです。

2. Mac の設定を変更する #

Mac 側の作業に移ります。

1. Mac の Google Chrome にて chrome://inspect/#devices にアクセスする。
2. ポートフォワーディングの設定を更新する。

3. Enable port forwarding を有効化して実行する。

3. Mac と Android を有線接続する #

あとは接続して Android からアクセスするだけです。

1. Mac と Android を接続する。USB デバッグを許可するか表示されたら許可を選択する。
2. Android の Google Chrome からアクセス。（例 localhost:3000）

補足：80 番ポートを転送先にしたフォワーディングは不可 #

スマートフォン側のポート番号に 80 番を指定することはできません。80 番以外でフォワーディング設定を行ってください。