次の方法で共有

ブラウザーで開発プロキシを使用する

概要
目標： システム プロキシ設定を変更せずにブラウザー インスタンスに開発プロキシをアタッチする
時間: 5 分
プラグイン： なし
前提条件:開発プロキシを設定する

既定では、開発プロキシはシステム プロキシとして自身を登録し、すべてのネットワーク トラフィックをプロキシ経由でルーティングします。 この方法はほとんどのシナリオで機能しますが、他のアプリケーションの影響を受けないようにしながら、特定のブラウザー インスタンスからのトラフィックのみをインターセプトしたい場合があります。

ブラウザー固有のプロキシを使用する理由

ブラウザー インスタンスに開発プロキシを直接アタッチすると、次のような利点があります。

  • 分離: 特定のブラウザー インスタンスのみがプロキシを使用し、他のアプリやブラウザーは影響を受けません
  • システムの変更なし: システム プロキシ設定を変更する必要はありません
  • 並列テスト: 異なるプロキシ構成で複数のブラウザー インスタンスを実行する
  • よりクリーンなトラフィック: バックグラウンド システム トラフィックではなく、テストしているブラウザーからの要求のみを表示します

[前提条件]

開始する前に、システム プロキシとして登録しないように開発プロキシを構成します。 devproxyrc.json ファイルで、次の設定を行います。

{
  "asSystemProxy": false
}

または、 --as-system-proxy false コマンド ライン オプションを使用して開発プロキシを起動します。

グーグルクローム

Google Chrome では、コマンドライン フラグを使用したプロキシ構成がサポートされています。 開発プロキシを使用して Chrome を起動するには:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --proxy-server="http://127.0.0.1:8000"

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --proxy-server="http://127.0.0.1:8000"

google-chrome --proxy-server="http://127.0.0.1:8000"

ヒント

メイン のブラウザー データに影響を与えないようにするには、別のユーザー プロファイルを使用します。 --user-data-dir フラグを追加して、別のプロファイル ディレクトリを指定します。

"C:\Program Files\Google\Chrome\Application\chrome.exe" --proxy-server="http://127.0.0.1:8000" --user-data-dir="%TEMP%\chrome-dev-proxy"

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --proxy-server="http://127.0.0.1:8000" --user-data-dir="/tmp/chrome-dev-proxy"

google-chrome --proxy-server="http://127.0.0.1:8000" --user-data-dir="/tmp/chrome-dev-proxy"

Important

プロキシ フラグを使用して Chrome を起動する前に、既存のすべての Chrome インスタンスを閉じます。 それ以外の場合、新しいインスタンスは既存の Chrome プロセスに参加し、プロキシ設定を無視します。

Microsoft Edge

Microsoft Edge では、 --proxy-server コマンド ライン フラグはサポートされていません。 Microsoft Edge は Chromium に基づいていますが、Microsoft はこの機能を公開していません。

Microsoft Edge で開発プロキシを使用するには、システム プロキシ設定を使用する必要があります。 asSystemProxy設定を既定値の true のままにするか、構成から省略して、開発プロキシをシステム プロキシとして構成します。

Mozilla Firefox

Firefox では、コマンド ライン フラグを使用したプロキシ構成はサポートされていませんが、ブラウザーの設定を使用して手動で構成できます。

開発プロキシを使用するように Firefox を構成するには:

  1. Firefox を開く
  2. 設定>一般>ネットワーク設定>設定… に移動します。
  3. [手動プロキシ構成] を選択する
  4. HTTP プロキシを 127.0.0.1 に設定し、ポートを8000
  5. チェック [HTTPS にもこのプロキシを使用する]
  6. [OK] を選択します。

ヒント

開発プロキシを使用してテストするために、別の Firefox プロファイルを作成します。 これにより、通常の閲覧プロファイルを変更せずに保持できます。 新しいプロファイルを作成するには、 firefox -P 実行し、開発プロキシ テスト専用の新しいプロファイルを作成します。

開発プロキシ証明書を信頼する

開発プロキシを初めて起動すると、ルート証明書がインストールされて信頼され、HTTPS トラフィックの暗号化が解除されます。 別のブラウザー プロファイルを使用している場合、またはブラウザーでシステム証明書ストアが使用されていない場合は、証明書を手動で信頼する必要がある場合があります。

Chrome と Microsoft Edge

Chrome と Microsoft Edge では、オペレーティング システムの証明書ストアが使用されます。 開発プロキシを既に実行しており、初回実行時に証明書を信頼している場合は、Chrome と Microsoft Edge によって自動的に信頼されます。

Firefox

Firefox は独自の証明書ストアを使用します。 Firefox で開発プロキシ証明書を信頼するには:

  1. Firefox を開く
  2. > プライバシーとセキュリティ>証明書>証明書を表示... に移動します。
  3. [機関] タブ を 選択する
  4. [ インポート]を選択します...
  5. 開発プロキシ証明書に移動します。
    • 場所: %USERPROFILE%\.config\dev-proxy\rootCert.pfx
    • 場所: ~/.config/dev-proxy/rootCert.pfx
    • 場所: ~/.config/dev-proxy/rootCert.pfx
  6. この CA を信頼して Web サイトを特定する
  7. [OK] を選択します。

注

証明書のパスワードが空です。 メッセージが表示されたら、パスワード フィールドを空白のままにします。

こちらも参照ください

  • Last updated on