Charles Proxyによるネットワークトラフィックのモニタリング

Charles Proxyは、Vegaアプリのネットワークトラフィックをデバッグし、機密情報を処理するHTTPS接続を検査するのに役立ちます。このプロキシはアプリとサーバー間の仲介役として機能し、ネットワークトラフィックを傍受して次の操作を可能にします。

• すべてのネットワークトラフィックをモニタリングする
• ネットワークの問題を特定する
• リクエストとレスポンスを変更する
• パフォーマンスを分析する

​

前提条件

次の前提条件をインストールします。

1. Charles Proxy（バージョン4.6以降）（英語のみ） TLS（Transport Layer Security）バージョン1.3との互換性が必要な場合は、Charles 5（英語のみ）をダウンロードしてください。
2. Vega SDKの最新バージョン
3. Vegaアプリプロジェクト

​

対応プロトコル

Charles Proxyがトラフィックをキャプチャするためには、次のプロトコルのうちの1つ以上を使用するようにアプリを構成します。

• HTTP
• HTTPS
• XMLHttpRequest
• メディアプレーヤーのリクエスト
• WebSocketリクエスト

​

Charles Proxyをセットアップする

既にCharles Proxyを構成していて、proxy-config.jsonファイルを追加または変更する場合は、proxy-config.jsonファイルの追加または変更に進んでください。Charles Proxyを初めてセットアップする場合は、次の手順を実行してください。

1. Charles Proxyを開き、プロンプトが表示されたらmacOSプロキシ権限を付与します。
2. HTTPプロキシポートを8888に設定します。 a. [Proxy] > [Proxy Settings] に移動します。 b. [HTTP Proxy Port] フィールドに8888と入力します。 c. [OK] をクリックします。
3. SSL（Secure Sockets Layer）プロキシを構成します。 a. [Proxy] > [SSL Proxying Settings] に移動します。 b. [SSL Proxying] タブを選択します。 c. [Include] セクションの [Add] をクリックします。 d. [Edit Location] ダイアログの [Host] ボックスは空白のままにします。 e. [Port] フィールドに443と入力します。 f. [OK] をクリックします。
4. ルート証明書を生成します。 a. [Help] > [SSL Proxying] > [Save Charles Root Certificate] に移動します。 b. [Save As] フィールドにproxy-cert.pemと入力します。 c. 証明書を任意の場所に保存します。 d. [Save] をクリックします。

​

VegaアプリにCharles Proxyを追加する

1. コマンドプロンプトで、アプリに移動します。 以下に例を示します。
   cd sampleapp
   
2. プロジェクトをクリーンアップします。
   vega clean
   
3. プロジェクトディレクトリに assets/rawフォルダを作成します。
4. proxy-cert.pemファイルをassets/rawフォルダに移動します。
5. assets/rawフォルダにproxy-config.jsonファイルを作成します。 proxy-configファイルの例：
   {
       "enableSSLProxying": true,
       "caBundleFile": "raw/proxy-cert.pem",
       "host": "localhost",
       "port": 8888
   }
   

次の表は、proxy-config.jsonファイルの必須フィールドの一覧です。

​

アプリのデバッグ

1. 依存関係をインストールします。
   npm install
   
2. アプリのrun buildを実行します。
   npm run build:app
   
3. Vega仮想デバイスまたはFire TV Stickにアプリをインストールします。

​

トラフィックのモニタリング

1. [Proxy] > [Start Recording] に移動します。
2. Vega仮想デバイスまたはFire TV Stickでアプリを起動します。 Charles Proxyは、アプリによって行われたネットワークリクエストを表示します。詳細は [Structure] タブまたは [Sequence] タブから確認できます。
3. Charles接続をテストします。
   curl -x localhost:8888 www.amazon.com
   

​

ポート転送のセットアップ

ポートフォワーディングは、特定のポート宛てのリクエストを、代わりに開発用コンピューターに送信するようにデバイスに指示します。 次の手順はFire TV Stickでのみ実行してください（Vega仮想デバイスでは必要ありません）。

1. コマンドプロンプトで、次のコマンドを実行します。
   vega exec vda reverse tcp:<リモートポート> tcp:<ローカルポート>
   
   例：
   vega exec vda reverse tcp:8888 tcp:8888
   
2. アプリを本番環境に送信する前に、次のファイルを削除します。
   • proxy-config.json
   • 証明書ファイル（assets/raw/proxy-cert.pemなど）
3. プロジェクトをクリーンアップして再ビルドします。 a. clean
   vega clean
   
   b. インストール
   npm install
   
   c. ビルド
   npm run build:app
   

​

proxy-config.jsonファイルの追加または変更

設定を更新する方法

1. プロキシの初期セットアップを完了します。 Charles Proxyをセットアップするの手順を完了します。
2. 既存のアプリを削除します。 既存のアプリをアンインストールします。
3. 更新したアプリをデプロイします。 新しいアプリをインストールします。

​

複数のコンピューターでのCharles Proxyの使用

開発用コンピューターとテスト用コンピューター間でVegaアプリのネットワークトラフィックをモニタリングする方法を説明します。このアプローチを使用すると、Charles Proxyが構成された.vpkgをチームテスト用に共有できます。

​

開発用コンピューターの場合

1. Charles Proxyをセットアップするの手順を完了します。
2. ルート証明書とプライベートキーをエクスポートします。 a. [Help] > [SSL Proxying] > [Export Charles Root Certificate and Private Key] に移動します。 b. [Export Charles Root Certificate and Private Key] ダイアログで、以下を行います。
   • 強力なパスワードを設定します（この情報は後でテスターと安全な方法で共有してください）
   • ファイルに名前を付けます（proxy-root-cert-private-key.p12など）
   • ダウンロードする場所を選択します
3. 次のいずれかのオプションを使用してルート証明書を抽出します。 オプション1（推奨）： a. [Help] > [SSL Proxying] > [Save Charles Root Certificate] に移動します。 b. ファイルに名前を付けます（proxy-cert.pemなど）。 オプション2（OpenSSLを使用する）：
   openssl pkcs12 -in proxy-root-cert-private-key.p12 -out proxy-cert.pem -clcerts -nokeys
   
4. VegaアプリにCharles Proxyを追加するの手順を実行します。
5. 以下の情報をテスターと安全な方法で共有してください。
   • proxy-root-cert-private-key.p12ファイル
   • password

​

テスト用コンピューターの場合

テスターはこのセクションを完了する必要があります。

1. テストコンピューターのプロキシを構成します。 Charles Proxyをセットアップするの手順を完了します。
2. 共有証明書をインポートします。 a. [Proxy] > [SSL Proxying Settings] > [Root Certificate] > [Import P12] に移動します。 b. proxy-root-cert-private-key.p12ファイルを選択します。 c. 開発チームから提供されたパスワードを入力します。
3. テストコンピューターのポート転送を構成します。 ポート転送のセットアップの手順を実行します。
4. テストコンピューターのトラフィックをモニタリングします。 トラフィックをモニタリングするの手順を実行します。

​

SSL構成に関するベストプラクティス

Charles Proxyを使用した操作の信頼性を確保するには、次の点に留意してください。

• proxy-config.jsonファイルの形式と証明書のパスが正しいことを確認します。
• アプリの起動前にCharles Proxyを起動します。

​

トラブルシューティング

Vega開発ツールでのCharles Proxyの使用時に問題が発生した場合は、Charles Proxyのトラブルシューティングを参照して、よくある問題と解決策を確認してください。

​

関連トピック

• Charles Proxyのドキュメント。
• TCP/IP経由のVDAの有効化

---