ポート転送でローカル サーバーと 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 インスタンスを実行します。次に例を示します。

    macOS

    open -a "Google Chrome" --args --remote-debugging-port=PORT

    Windows

    start chrome --remote-debugging-port=PORT

    Linux

    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 を開き、[Device port] フィールドで指定した localhost ポートに移動します。たとえば、この項目に 5000 と入力した場合、localhost:5000 に移動します。

カスタム ローカル ドメインへのマッピング

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

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

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

カスタム ドメインをマッピングするには、開発マシンでプロキシ サーバーを実行する必要があります。プロキシ サーバーの例としては、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. [Proxy port] フィールドに、前のセクションの [device port] に入力したポート番号を入力します。

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

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

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

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