ポート転送でローカル サーバーと Chrome インスタンスにアクセスする

Kayce Basques
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
GitHub

ポート転送を使用すると、次のことができます。

  • ケース 1。別の Chrome インスタンスで開いたタブをデバッグする。
  • ケース 2。開発マシンのウェブサーバーでサイトをホストし、USB ケーブル経由で Android デバイスからコンテンツにアクセスします。

ケース 2 では、Android デバイスのリッスン TCP ポートを介してポート転送が行われ、このポートは開発マシンの TCP ポートにマッピングされます。ポート間のトラフィックは、Android デバイスと開発マシン間の USB 接続を経由するため、接続はネットワーク構成に依存しません。

また、ウェブサーバーがカスタム ドメインを使用している場合は、カスタム ドメイン マッピングを使用して、そのドメインのコンテンツにアクセスするように Android デバイスを設定できます。

ポート転送をセットアップする

ケースに応じて、次の手順に沿って対応します。

ケース 1: 別の Chrome インスタンスへのポート転送を設定する

  1. --remote-debugging-port=PORT パラメータを使用して別の Chrome インスタンスを実行します。次に例を示します。

    macOSWindowsLinux
    open -a "Google Chrome" --args --remote-debugging-port=PORT
    start chrome --remote-debugging-port=PORT
    google-chrome --remote-debugging-port=PORT

  2. デバッグしている Chrome インスタンスで、次の操作を行います。

    1. chrome://inspect/#devices を開きます。
    2. [チェックボックス。 ネットワーク ターゲットを検出] がオンになっていることを確認します。
    3. チェックボックスの横にある [構成] をクリックします。

    4. [Target discovery settings] で localhost:PORT を入力し、[チェックボックス。 Enable port forwarding] をオンにして、[Done] をクリックします。

      ターゲット検出の設定ウィンドウ。

    5. [デバイス] に戻ると、新しいリモート ターゲットが表示されます。デバッグするタブの横にある [検査] をクリックします。

      リモート ターゲットのタブの横にある検査リンク。

  3. デバイスモードの新しい DevTools ウィンドウが開きます。上部のアドレスバーに、デバッグするウェブサイトのアドレスを入力できます。

    デバイスモードの DevTools。

  4. アドレスバーの横で入力方法を切り替えることができます。

ケース 2: Android デバイスで USB 経由のポート転送を設定する

  1. 開発マシンと Android デバイスの間でリモート デバッグを設定します。完了すると、Android デバイスがリストに表示されます。

    リスト内の Android デバイス。

  2. [チェックボックス。 USB デバイスを検出] がオンになっていることを確認します。

  3. チェックボックスの横にある [ポート転送] をクリックします。

  4. [ポート転送の設定] で、デフォルトで localhost:8080 が設定されています。[ポート転送を有効にする] チェックボックスをオンにします。

    ポート転送の設定。。

  5. 他のポートを設定する場合は、次の手順に沿って操作します。それ以外の場合は、手順をスキップして [完了] をクリックします。

  6. 左側の [ポート] テキスト フィールドに、Android デバイスでサイトにアクセスできるポート番号を入力します。たとえば、localhost:5000 からサイトにアクセスする場合は、5000 と入力します。

  7. 右側の [IP address and port] テキスト フィールドに、開発マシンのウェブサーバーでサイトが実行されている IP アドレスまたはホスト名とポート番号を入力します。たとえば、サイトが localhost:5000 で実行されている場合は、localhost:5000 と入力します。

  8. [完了] をクリックします。

これでポート転送が設定されました。ポート転送のステータス インジケーターは、デバイス名の横と上部に表示されます。

ポート転送のステータス。

コンテンツを表示するには、Android デバイスで Chrome を開き、[デバイスポート] フィールドで指定した localhost ポートに移動します。たとえば、フィールドに 5000 と入力すると、localhost:5000 に移動します。

カスタム ローカル ドメインにマッピングする

カスタム ドメインのマッピングを使用すると、カスタム ドメインを使用している開発マシンのウェブサーバーから Android デバイスにコンテンツを表示できます。

たとえば、サイトが許可リストに登録されたドメイン chrome.devtools でのみ動作するサードパーティの JavaScript ライブラリを使用しているとします。そのため、開発マシンの hosts ファイルにエントリを作成し、このドメインを localhost（127.0.0.1 chrome.devtools）にマッピングします。カスタム ドメインのマッピングとポート転送を設定すると、Android デバイスで URL chrome.devtools を使用してサイトを表示できるようになります。

プロキシ サーバーへのポート転送を設定する

カスタム ドメインをマッピングするには、開発マシンでプロキシ サーバーを実行する必要があります。プロキシ サーバーの例としては、Charles、Squid、Fiddler などがあります。

プロキシへのポート転送を設定するには:

  1. プロキシ サーバーを実行し、使用しているポートをメモします。

  2. Android デバイスへのポート転送を設定します。[ローカル アドレス] フィールドに、localhost: の後にプロキシ サーバーが実行されているポートを入力します。たとえば、ポート 8000 で実行されている場合は、localhost:8000 と入力します。[device port] フィールドに、Android デバイスがリッスンする番号（3333 など）を入力します。

デバイスでプロキシ設定を行う

次に、プロキシ サーバーと通信するように Android デバイスを構成する必要があります。

  1. Android デバイスで [設定] > [Wi-Fi] に移動します。

  2. 接続しているネットワークの名前を長押しします。

  3. [ネットワークを変更] をタップします。

  4. [詳細設定] をタップします。プロキシ設定が表示されます。

  5. [プロキシ] メニューをタップし、[手動] を選択します。

  6. [Proxy hostname] フィールドに「localhost」と入力します。

  7. [プロキシ ポート] フィールドに、前のセクションの [デバイス ポート] に入力したポート番号を入力します。

  8. [保存] をタップします。

これらの設定により、デバイスはすべてのリクエストを開発マシンのプロキシに転送します。プロキシがデバイスに代わってリクエストを行うため、カスタマイズされたローカル ドメインへのリクエストが適切に解決されます。

これで、開発マシンの場合と同様に、Android デバイスでカスタム ドメインにアクセスできるようになりました。

ウェブサーバーが標準以外のポートで実行されている場合は、Android デバイスからコンテンツをリクエストするときにポートを指定してください。たとえば、ウェブサーバーがポート 7331 でカスタムドメイン chrome.devtools を使用している場合、Android デバイスからサイトを表示するときに、URL chrome.devtools:7331 を使用する必要があります。