Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

AWS

ドキュメント

Support

My Cases

Console

Vega開発者向けドキュメント

ホーム

開発

設計と開発

公開

リファレンス

サポート

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

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

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

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

前提条件

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

Charles Proxy（バージョン4.6以降）（英語のみ）

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

対応プロトコル

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

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

注： Vega SDKではプロキシバイパスはサポートされていません。

Charles Proxyをセットアップする

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

Charles Proxyを開き、プロンプトが表示されたらmacOSプロキシ権限を付与します。
HTTPプロキシポートを8888に設定します。

プロキシの設定

a. [Proxy] > [Proxy Settings] に移動します。

b. [HTTP Proxy Port] フィールドに8888と入力します。

c. [OK] をクリックします。
SSL（Secure Sockets Layer）プロキシを構成します。

SSLプロキシの設定

a. [Proxy] > [SSL Proxying Settings] に移動します。

b. [SSL Proxying] タブをクリックします。

c. [Include] セクションで [Add] をクリックします。

d. [Edit Location] ダイアログの [Host] ボックスは空白のままにします。

e. [Port] フィールドに443と入力します。

f. [OK] をクリックします。
ルート証明書を生成します。

a. [Help] > [SSL Proxying] > [Save Charles Root Certificate] に移動します。

b. [Save As] フィールドにproxy-cert.pemと入力します。

c. 証明書を任意の場所に保存します。

d. [Save] をクリックします。

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

コマンドプロンプトで、アプリに移動します。

以下に例を示します。

クリップボードにコピーしました。
```
cd keplersampleapp
```
ヒント： keplersampleappを、使用するアプリ名に置き換えてください。
プロジェクトをクリーンアップします。
クリップボードにコピーしました。
```
kepler clean
```
プロジェクトディレクトリに assets/rawフォルダを作成します。
proxy-cert.pemファイルをassets/rawフォルダに移動します。
assets/rawフォルダにproxy-config.jsonファイルを作成します。

proxy-configファイルの例：

クリップボードにコピーしました。
```
 {
     "enableSSLProxying": true,
     "caBundleFile": "raw/proxy-cert.pem",
     "host": "localhost",
     "port": 8888
 }
```

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

フィールド	型	説明	必須
`caBundleFile`	文字列	assetsディレクトリからルート証明書ファイルへの相対パス。	○
`enableSSLProxying`	ブール型	`caBundleFile`の証明書を信頼するかどうかを決定します。falseに設定すると、`caBundleFile`の効果がなくなります。セキュリティ上の理由から、WebViewはアプリのデバッグバリアントでのみ`caBundleFile`を信頼します。WebViewを使用したアプリ開発で説明されているように、Vega向けReact Nativeでは、これはNODE_ENVプロセス環境を`development`として報告するアプリに適用されます。	○
`host`	文字列	有効なホストとポートを指定すると、システムによってHTTP、HTTPS、WebSocket（WebView以外）のトラフィックプロキシが有効になります。Vega仮想デバイスで実行されるアプリの場合は、`host`の値として`10.0.2.2`を使用してください。	○
`port`	数値	プロキシ用のホスト上のポートを指定します。	○

重要： セットアップ後にアプリがクラッシュする場合は、proxy-config.jsonファイルの形式と証明書のパスを確認してください。

アプリのデバッグ

依存関係をインストールします。
クリップボードにコピーしました。
```
 npm install
```
アプリのrun buildを実行します。
クリップボードにコピーしました。
```
 npm run build:app
```
Vega仮想デバイスまたはFire TV Stickにアプリをインストールします。

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

[Proxy] > [Start Recording] に移動します。
Vega仮想デバイスまたはFire TV Stickでアプリを起動します。

Charles Proxyは、アプリによって行われたネットワークリクエストを表示します。詳細は [Structure] タブまたは [Sequence] タブから確認できます。

注： Charles ProxyはSSLトラフィックを復号化されたものとして表示します。

重要： トラフィックが表示されない場合は、プロキシの構成を確認してください。SSLエラーが表示される場合は、Charlesルート証明書のインストールを確認してください。
Charles接続をテストします。
クリップボードにコピーしました。
```
 curl -x localhost:8888 www.amazon.com
```

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

重要： VDAには、USB接続ではなくTCP/IP接続を使用してください。USB接続が原因で、Fire TVデバイスのパフォーマンスが低下することがあります。手順については、TCP/IP経由のVDAの有効化を参照してください。

ポートフォワーディングは、特定のポート宛てのリクエストを、代わりに開発用コンピューターに送信するようにデバイスに指示します。

次の手順はFire TV Stickでのみ実行してください（Vega仮想デバイスでは必要ありません）。

コマンドプロンプトで、次のコマンドを実行します。
クリップボードにコピーしました。
```
 kepler exec vda reverse tcp:<リモートポート> tcp:<ローカルポート>
```
ヒント： <リモートポート>は、Fire TV Stickのproxy-config.jsonファイルに構成したポートに置き換えてください。<ローカルポート>は、開発用コンピューターのCharles Proxy用に構成したポート（ポート8888）に置き換えてください。

例：

クリップボードにコピーしました。
```
 kepler exec vda reverse tcp:8888 tcp:8888
```
重要： デバッグが完了したら、ポートフォワーディングを停止して、デバイスの通常のネットワーク構成を復元します。
アプリを本番環境に送信する前に、次のファイルを削除します。
- proxy-config.json
- 証明書ファイル（assets/raw/proxy-cert.pemなど）
プロジェクトをクリーンアップして再ビルドします。
クリップボードにコピーしました。
```
kepler clean
```
クリップボードにコピーしました。
```
npm install
```
クリップボードにコピーしました。
```
npm run build:app
```

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

設定を更新する方法

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

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

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

Charles Proxyをセットアップするの手順を完了します。
ルート証明書とプライベートキーをエクスポートします。

Charles Proxyの証明書管理インターフェイス

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など）
- ダウンロードする場所を選択します
```
次のいずれかのオプションを使用してルート証明書を抽出します。

オプション1（推奨）：
- [Help] > [SSL Proxying] > [Save Charles Root Certificate] に移動します。
- ファイルに名前を付けます（proxy-cert.pemなど）。
オプション2（OpenSSLを使用する）：
クリップボードにコピーしました。
```
openssl pkcs12 -in proxy-root-cert-private-key.p12 -out proxy-cert.pem -clcerts -nokeys
```
VegaアプリにCharles Proxyを追加するの手順を実行します。
以下の情報をテスターと安全な方法で共有してください。
- proxy-root-cert-private-key.p12ファイル
- password
重要： 証明書ファイルとパスワードの共有には、暗号化トラフィックへのアクセスを提供する安全な方法を使用してください。

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

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

Charles Proxyをセットアップするの手順を完了します。
共有証明書をインポートします。

[Root Certificate] タブ

a. [Proxy] > [SSL Proxying Settings] > [Root Certificate] > [Import P12] に移動します。

b. proxy-root-cert-private-key.p12ファイルを選択します。

c. 開発チームから提供されたパスワードを入力します。
ポート転送のセットアップの手順を実行します。
トラフィックをモニタリングするの手順を実行します。

重要： トラフィックが表示されない場合は、ポートフォワーディングの構成を確認してください。SSLエラーが発生する場合は、証明書のインポートを確認してください。

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

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

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

トラブルシューティング

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

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

Last updated: 2025年10月8日