ローカルでスマホテストの環境設定

背景

• フロントのコードビルド時間がかかる
• 不要なクラウドコスト減少
• 開発感

---

設定の構成図

クラウドの構成

---

ローカルの構成

---

環境設定

① スマホ → PC: 連携確認

---

Windows Defender ファイアウォールのデフォルトは LocalHost の接続を制御するため接続の制御設定が必要。
2つ方法が有る

• Windows Defender ファイアウォールをOFF
• 指定ポートを開ける

---

Windows Defender ファイアウォールの設定

---

指定ポートを開ける

---

スマホから連携確認

---

③PC → WSL: 連携確認

---

スマホからWSL Hostに連携

LocalHostが連携できるがWSL Hostが分からないので連携ができない。
連携できるためにIPとポートフォワーディングが必要です。

# アドミン権限実行
netsh interface portproxy add v4tov4 listenport=8080 \
listenaddress=0.0.0.0 connectport=8080 connectaddress=172.25.227.120

---

Chromeで加速度が取得できない

→ FireFoxで加速度が取得できる（理由不明）

---

Chrome、FireFoxでカメラが設定できない

保護されていないオリジンに対するセキュリティ制限(http://)

---

Androidの開発設定

開発モード設定

---

開発ツール

• Chromeの開発ツール
  • chrome://inspect/#devices
• Android Debug Bridge (adb)
  • https://developer.android.com/tools/adb
• Androidスクリーンコントロール
  • https://github.com/Genymobile/scrcpy

---

以上