ポート転送でローカル サーバーと 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. [ターゲット検出の設定] で「localhost:PORT」と入力し、[チェックボックス。 ポート転送を有効にする] をオンにして、[完了] をクリックします。

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

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

      リモート ターゲットのタブの横にある [inspect] リンク。

  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 アドレスとポート] テキスト フィールドに、開発マシンのウェブサーバー上でサイトが実行されている 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 デバイスへのポート転送を設定します。[local address] フィールドに「localhost:」と入力し、その後にプロキシ サーバーが実行されているポートを入力します。たとえば、ポート 8000 で実行されている場合は、「localhost:8000」と入力します。[デバイスポート] フィールドに、Android デバイスでリッスンする番号（3333 など）を入力します。

デバイスでプロキシを設定する

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

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

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

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

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

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

  6. [プロキシホスト名] フィールドに「localhost」と入力します。

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

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

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

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

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