【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経由接続を有効にします。

- [Wi-Fi 経由でデバイスに接続する](https://developer.android.com/studio/command-line/adb?hl=ja#wireless)

手順を転載しますと…

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

```
> adb tcpip 5555
```

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

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

```
> adb connect 192.168.1.15:5555
```

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

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

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

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

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

- [gost - GO Simple Tunnel](https://github.com/ginuerzh/gost)
- [gost README 英語版](https://github.com/ginuerzh/gost/blob/master/README_en.md)
- [gost v.2.11.1 ダウンロード](https://github.com/ginuerzh/gost/releases/tag/v2.11.1)

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を拝借してきましょう。

- [lucashilles/flutter-dev-container: Github](https://github.com/lucashilles/flutter-dev-container)
- [MFAshby/flutter-devcontainer : Github](https://github.com/MFAshby/flutter-devcontainer)

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

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

```
$ flutter create .
```

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

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

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

```
> adb connect 10.0.1.10:5555
```

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

すると・・・

![Screenshot_20201218-100834707.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/99cd5c9a-79e9-d0f5-1158-37da7078d24f.png)

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

すると・・・

![Desktop-screenshot_20201218.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/4f13e099-0dc9-4105-7ab7-1f1548ea169b.png)

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

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

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

![Screenshot_20201218-101548640.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/1587d2e8-e66a-9212-b614-12c9b67f7df9.jpeg)

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

以上となります。

# 5. まとめ

ローカルでは `adb connect` を使うだけで済みますがVPN経由など異なるネットワークにある端末にコンテナ内部からどうやって接続するか、がキモでした。今回は `gost` を使いましたがtcpをそのままパススルーできれば別のツールでも問題ないでしょう。
 
実機ではデバッグモードの解除やWiFiからの切断などしない限りはこのままデバッグ可能です。PCのUSBポートが専有されないので便利ですね。

お疲れさまでした。