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

Kayce Basques
Kayce Basques
X GitHub
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. [チェックボックス。 Discover network targets] がオンになっていることを確認します。
    3. チェックボックスの横にある [構成] をクリックします。

    4. [ターゲット検出の設定] で、localhost:PORT を入力し、チェックボックス。 [ポート転送を有効にする] をオンにして、[完了] をクリックします。

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

    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 アドレスとポート] テキスト フィールドに、開発マシンのウェブサーバーでサイトが実行されている 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」と入力します。[デバイスポート] フィールドに、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 を使用する必要があります。