search
LoginSignup
1

More than 1 year has passed since last update.

posted at

updated at

Organization

【2020年12年版】Flutter + Android SDK + VS Code にてリモートホストにある Remote Container から別ネットワークの実機でデバッグ

Flutter + Android SDK + VS Code にて リモートホストにある Remote Container からDockerホストとは別ネットワークで接続した手元のAndroid 実機にてデバッグさせる

今回も濃いめの内容ですいません。

自宅でのAndroid アプリ開発作業にて、会社とVPNでつないだ社内のDockerホスト上にdev containerを立てて、自宅のWiFiネットワークに接続したAndroid端末でデバッグなどの開発作業を行う必要がありました。

以前の記事にて docker context コマンドを使用したリモートサーバー上のDockerホスト にてVS Code の Remote Container を動かす方法をご紹介いたしましたが、今回はさらにRemote Container 上の Android SDKからローカルの実機にアプリをデプロイ&デバッグを行う方法をご紹介いたします。

ちなみに、DockerホストのネットワークとAndroid 端末が同じネットワークにあってコンテナから直接、接続できる場合はシンプルに adb connectだけでOKです。

結論

tcp proxyを使え!

ということで今回はローカルに gost を使って tcp proxy を立ててみます。

0. 事前に

今回は操作するサーバー構成が入り組んでいるため以下の用語で話を進めます。

  1. ローカルPC → VSCode を実行する手元のPC。
  2. リモートコンテナ → Remote Container が実行されている Docker のコンテナ
  3. Docker Host → Docker の Host となるリモートサーバー
  4. 実機 → テストをする Android 端末。

ローカルPC の VS Code から docker context + SSH 経由でどこかのネットワークにある Docker Host上にてリモートコンテナが動いている、という状態です。

今回、ローカルPCは Windows、Android は Android 9 の端末といたします。

1. 準備

1-1. ローカルPC にて Wifi デバッグの設定

まず、ローカルPCにて実機を Wifi 経由での開発モードに対応させるようにいたします。

Android SDK のインストール手順については割愛します。Android Studio のインストールとSDK Manager で Android 9 のSDKをインストールすればOKです。

続いて、実機を開発者ツール有効にし以下の手順で実機のWifi経由接続を有効にします。

手順を転載しますと…

  1. ローカルPCと実機を同じWiFiネットワークに接続します。
  2. USB ケーブル経由で、ローカルPCと実機を接続します。adb devicesで接続をチェック。
  3. ローカルPCのターミナルからポート 5555 で TCP/IP 接続をリッスンするように実機を設定します。
> adb tcpip 5555

これで実機はWiFiからの接続待ちが開始されます。以下は確認のため行います。

  1. 実機のネットワーク情報からWiFiに接続されているIPアドレスを調べます。
  2. ローカルPCのターミナルから以下のコマンドで接続します。
> adb connect 192.168.1.15:5555

192.168.1.15は実機のIPアドレスで置き換えてください。

  1. adb devicesで接続をチェックすると、USB接続とWiFi接続の2つ表示されているはずです。

以上で実機の準備は完了です。

1-2. ローカルPCにてTCP Proxyサーバーを準備

今回はシンプルなコマンドラインでのproxyツール gost を使用します。

Windows版をダウンロードし、適当なパスの通ったフォルダgost.exeとして入れておきます。

以下のコマンドで tcp proxy を立ち上げます。

> gost -L=tcp://:5555/192.168.1.15:5555

これでローカルPCの5555でのtcp着信はすべて実機に転送されます。

1-3. ローカルPCのIPアドレスを調査

ローカルPCのIP アドレスをipconfigなどで調べておきます。
この時に、リモートコンテナからローカルPCと接続するので Docker Hostとつながっているネットワーク でのIPアドレスを調べておきましょう。

以上で準備は完了です!

2. リモートコンテナの起動

VSCode の Remote Container で Flutter を動かすには標準の Dart コンテナでは不足ですので適当な devcontainerのサンプルからDockerfileとdevcontainer.jsonを拝借してきましょう。

これらの設定から宜しく拝借してくればdev containerはすんなり立ち上がると思います。

続いてFlutterのコマンドでサンプルプロジェクトを作成します。

$ flutter create .

プロジェクトが生成されたら、早速接続してみましょう。

3. リモートコンテナからローカルPCへの接続

リモートコンテナ起動後、ターミナルから以下のコマンドで接続します。

> adb connect 10.0.1.10:5555

10.0.1.10Dockerホストから見たローカルPCのIPアドレス で置き換えてください。

すると・・・

Screenshot_20201218-100834707.png

と、実機にてポップアップダイアログが表示されます。ここで、OKをタップしてUSBデバッグを許可してください。
ちなみにDockerのコンテナはVSCodeからRebuildするとフィンガープリントが変わるので、"常に許可"をしなくてもよいかと思います。

すると・・・

Desktop-screenshot_20201218.png

はい、VS Code にて認識されました!

4. アプリのデバッグ起動

後は VS Code のデバッグ実行(Run>DebugやF5など)を行うと・・・

Screenshot_20201218-101548640.jpg

はい、出ました!
初回のビルドには時間がかかりますが実機にてFlutterのデモアプリが表示されました。

以上となります。

5. まとめ

ローカルでは adb connect を使うだけで済みますがVPN経由など異なるネットワークにある端末にコンテナ内部からどうやって接続するか、がキモでした。今回は gost を使いましたがtcpをそのままパススルーできれば別のツールでも問題ないでしょう。

実機ではデバッグモードの解除やWiFiからの切断などしない限りはこのままデバッグ可能です。PCのUSBポートが専有されないので便利ですね。

お疲れさまでした。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1