ポートフォワーディングを使ってAndroidでlocalhostページを表示する

ホーム
アプリ関連ニュース
Android
ポートフォワーディングを使ってAndroidでlocalhostページを表示する

2020年12月23日
Android

開発中のページでWebRTCを使ってAndroidのカメラの映像を
Javascriptで取得できるか確認を行いたい時があります。

PCであればXAMMP等のApacheサーバーを起動しておけば
http://localhost/ にアクセスすることで動作を確認できますが
Androidの実機で同じように確認しようとすると
当然そのままでは http://localhost/ にはアクセスすることは出来ません。
https:// から始まるSSLで暗号化されたサーバーにファイルをアップロードし
そこへAndroidでアクセスする必要があります。

しかし、暗号化されたサーバーを用意するのは手間ですね。
そこで便利なのがGoogleChromeの開発モードに用意されている。
RemoteDeviceに対してお手軽にポートフォワーディングを適用する機能です。

確認を行いたいページをlocalhostで表示することができるPCと
USBデバッグを有効化したAndroid端末をUSBケーブルで接続します。
その後PCでGoogleChromeを開き
“chrome://inspect/#devices”
へアクセスします。

接続したAndroid端末が表示されていることを確認し
“Port forwarding…” と書かれているボタンをクリックします。
ポートフォワーディング設定ウィンドウが表示されます。

XAMMP上でApacheのポートを80に設定している環境を例として
Port 欄に 8080 を設定
IP address and port 欄に localhost:80 を設定し、
Enable port forwardingにチェックを入れ、
Doneボタンをクリックすることでポートフォワーディングが有効になります。

USBで接続しているAndroid端末のChromeで”http://localhost:8080/ “に
アクセスすることでPCと同じようにlocalhostへアクセスすることができます。

水曜担当:Tanaka