開発用コンピューターの Web サーバーでサイトをホストし、Android デバイスからコンテンツにアクセスします。
ポート転送を使用すると、Android デバイス上の開発用コンピューターで実行されている Web サーバーによってホストされているコンテンツを表示できます。
Web サーバーがカスタム ドメインを使用している場合は、カスタム ドメイン マッピングを使用してそのドメインのコンテンツにアクセスするように Android デバイスを設定します。
USB ケーブルと Microsoft Edge DevTools を使用して、開発用コンピューターからサイトを実行し、Android デバイスでサイトを表示します。
ポート転送を設定する
ポート転送を使用すると、Android デバイスは、開発用コンピューターで実行されている Web サーバーでホストされているコンテンツにアクセスできます。 ポート転送は、Android デバイスでリッスンしている TCP ポートを作成し、開発用マシンの TCP ポートにマップすることで機能します。
ポート間のトラフィックは、Android デバイスと開発マシン間の USB 接続を経由するため、接続はネットワーク構成に依存しません。
ポートフォワーディングを有効にするには:
開発用コンピューターと Android デバイスの間で リモート デバッグ を設定します。 完了すると、[ デバイスの検査 ] ダイアログの左側のメニューに Android デバイスが表示され、 接続 状態インジケーターが表示されます。
DevTools の [ デバイスの検査 ] ダイアログで、 ポート転送を有効にします。
[ ルールの追加] をクリックします。
左側の [ デバイス ポート ] テキスト ボックスに、Android デバイスでサイトにアクセスできるようにする
localhostポート番号を入力します。 たとえば、サイトにアクセスする場合は、「5000」と入力localhost:5000。右側の [ ローカル アドレス ] テキスト ボックスに、開発用コンピューターで実行されている Web サーバーでサイトがホストされている IP アドレスまたはホスト名を入力し、その後にポート番号を入力します。 たとえば、サイトが上で実行されている場合
localhost:7331「localhost:7331」と入力します。[追加] をクリックします。
ポート フォワーディングが設定されました。
ポート転送の状態インジケーターが上部に表示され、デバイス名の横に表示されます。 ポート転送のインジケーターは、[ デバイスの検査 ] ダイアログ内のデバイスのタブにあります。
コンテンツを表示するには、Android デバイスで Microsoft Edge を開き、[デバイス ポート] フィールドで指定した localhostポート に移動します。 たとえば、フィールドに「 5000 」と入力した場合は、 localhost:5000にアクセスします。
カスタム ローカル ドメインへのマップ
カスタム ドメイン マッピングを使用すると、カスタム ドメインを使用している開発用コンピューター上の Web サーバーから Android デバイス上のコンテンツを表示できます。
たとえば、サイトで、ドメイン microsoft-edge.devtoolsでのみ動作するサードパーティの JavaScript ライブラリを使用しているとします。 そのため、開発用コンピューター上の hosts ファイルにエントリを作成して、このドメインを localhost にマップします (たとえば、 127.0.0.1 microsoft-edge.devtools)。 カスタム ドメイン マッピングとポート転送を設定した後、Url microsoft-edge.devtoolsで Android デバイス上のサイトを表示します。
プロキシ サーバーへのポート転送を設定する
カスタム ドメインをマップするには、開発用コンピューターでプロキシ サーバーを実行する必要があります。 プロキシ サーバーの例としては、 Charles、 Squid、 Fiddler などがあります。
プロキシへのポート 転送を設定するには:
プロキシ サーバーを実行し、使用しているポートを記録します。
注:
プロキシ サーバーと Web サーバーは、異なるポートで実行する必要があります。
Android デバイスへの ポート転送 を設定します。 [ローカル アドレス] フィールドに「
localhost:」と入力し、その後にプロキシ サーバーが実行されているポートを入力します。 たとえば、ポート8000で実行されている場合は、localhost:8000に移動します。 [ デバイス ポート ] フィールドに、Android デバイスでリッスンする番号 (3333など) を入力します。
デバイスでプロキシ設定を構成する
次に、プロキシ サーバーと通信するように Android デバイスを構成する必要があります。
Android デバイスで、[設定>Wi-Fi] に移動します。
現在接続しているネットワークの名前を長押しします。
注:
プロキシ設定はネットワークごとに適用されます。
[ ネットワークの変更] をクリックします。
[ 詳細オプション] をクリックします。 プロキシ設定が表示されます。
[ プロキシ ] メニューをクリックし、[ 手動] を選択します。
[ プロキシ ホスト名 ] フィールドに「
localhost」と入力します。[ プロキシ ポート ] フィールドに、前のセクションで デバイス ポート に入力したポート番号を入力します。
[保存] をクリックします。
これらの設定を使用すると、デバイスはすべての要求を開発マシン上のプロキシに転送します。 プロキシはデバイスに代わって要求を行います。そのため、カスタマイズしたローカル ドメインへの要求が適切に解決されます。
開発用コンピューターと同じように、Android デバイス上のカスタム ドメインにアクセスします。
Web サーバーが標準以外のポートから実行されている場合は、Android デバイスからコンテンツを要求するときにポートを指定してください。 たとえば、Web サーバーがポート 7331でカスタム ドメイン microsoft-edge.devtoolsを使用している場合、Android デバイスからサイトを表示するときは、URL microsoft-edge.devtools:7331を使用する必要があります。
ヒント
通常の閲覧を再開するには、開発用マシンから切断した後、Android デバイスのプロキシ設定を元に戻す必要があります。
注:
このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、ケイス・バスクとメギン・カーニーによって作成されています。
