yano3nora
6/30/2017 - 5:26 PM

[dev: Charles with Vagrant] Actual terminal test in VM via HTTP proxy. #vagrant #charles #test #dev

[dev: Charles with Vagrant] Actual terminal test in VM via HTTP proxy. #vagrant #charles #test #dev

charles.md
content_copyfile_download
  • Rendered
  • Source

Overview

iPhone, iPad, Android など [ios] [android] の実機テストについて、 Vagrant で建てたローカル開発環境上のWEBサーバにアクセスして行いたいよ。

Premise

実機テストしたい端末 (iPad, iPhone, Android) がローカル開発環境のあるPCと同一の Wi-Fi 上でネットワーク接続されている必要あり。

TIPS

  • 有料につき30分で自動終了
  • なんかおかしくなった→再起動
  • iOS Chromeでつながらない→仕様です
  • キャッシュ無効
    • Menu > Tools > No Chaching..

Installation & Process

  1. Charles の Download & Install
  2. Charles 立ち上げ
    • Firewall 許可
    • FireFox Addon 導入
  3. Proxy > Proxy Settings で Port 設定
    • Defaults: 8888
    • 他と競合しなければなんでも
    • チェックボックスは無視
  4. PC側(VagrantホストOS)のIPを取得
    • ipconfig
  5. 実機テスト端末のWifiにHTTPプロキシを設定
    • iPad なら 設定>Wi-Fi>HTTPプロキシ(手動)
    • 「サーバ」にホストOSのIP入力
    • 「ポート」にCharlesのポート入力
  6. ホストOSに新規アクセス通知→Allow
  7. 実機テスト端末ブラウザでサーバにアクセス
    • Vagrant: 192.168.33.10