ローカル起動のサーバー/フロントアプリケーションをAndroidエミュレータのWebViewで開く

0. 概要

掲題の通り、ローカル起動のサーバー/フロントアプリケーションをAndroidエミュレータのWebViewで開く場合、
iOSシミュレーターで開く場合と違っていくつか設定が必要だったのでその方法を記載します。

1. http通信を可能にする

Android9以降ではhttp通信がデフォルトで無効になったそうです。
Ref: https://developer.android.com/training/articles/security-config?hl=ja

取り急ぎローカル環境で動作確認がしたいだけなので、以下の設定を追記して有効にします。
本来無効にしておく方が望ましいので、あくまで開発時だけに留める方が良いと思います。

AndroidManifest.xml のapplicationタグに android:usesCleartextTraffic="true" を追記します。

    <application
            android:label="hogehuga"
            android:icon="@mipmap/ic_launcher"
            android:usesCleartextTraffic="true"> // ココを追記！

2. エミュレータからPCのローカルホストに接続できるようにする

エミュレータ内でのlocalhostはPCではなくエミュレータ自身を指します。
そのため以下のコマンドにて、エミュレータから手元のPCに通信を転送するようにします。
adb reverse tcp:3000 tcp:3000

※ ポート番号はご自身の環境によってよしなに変更してください。

adbコマンドの設定を行っていない場合は以下の手順で設定を行ってください

1. Android Studioを開きます

2. Project Structureを開きます（ヘッダーのFileより開くことができます）
   

3. Android SDKのpathを確認します
   

4. (zshの場合)zprofileにexport PATH=$PATH:{AndroidSDKのpath}/platform-toolsを追記します

5. 設定ファイルの読み直しを行いますsource ~/.zprofile

3. http://localhost:3000ではなく、http://10.0.2.2:3000をWebView開きます

※ポート番号はご自身の環境によってよしなに変更してください