ReactNative(Android)でネットワーク セキュリティ構成を変更したとき

# 対象者
- React Native でAndroidアプリの開発者
- AndroidデバイスをWiFiデバッグしている
- AndroidアプリでHTTPアクセスを使うなど、ネットワークセキュリティ構成を独自設定した時

### 参考
React Native on Android でHTTPアクセスしたい時は
以下のリンクを参考にしてみてください。
- [AndroidからSORACOMのサービスにHTTPアクセス | Qiita](https://qiita.com/lunasky/items/0324429e757b65c15d77)
- [ネットワーク セキュリティ構成 | Android Developers](https://developer.android.com/training/articles/security-config?hl=ja)

# 発生した問題
先のリンクのようにネットワークセキュリティ構成を変更した結果、
リリースビルドで出力したAPKをAndroidデバイスで実行する分には問題ありません。

しかし、このアプリをデバッグしようと`npx start`してAndroidアプリを開こうとすると、
`
Unable to load script. Make sure you’re either running a Metor service (run ‘react-native start’) or that your bundle ‘index.android.bundle’ is packaged correctly for release.
`
というエラーが表示がされます。
これは**WiFiでのデバッグを行った時に**発生します。


### 今回の場合には適さない解決方法
単純にこのエラーをGoogle先生に聞くと、
`index.android.bundle`を作りましょう、という解決法があるかと思います。
> ```bash
> $ mkdir android/app/src/main/assets
> $ npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
> ```
> [【RN】既存のプロジェクトのandroid buildでUnable to load script. Make sure you’re either running a Metor service (run ‘react-native start’) or that your bundle ‘index.android.bundle’ is packaged correctly for release.と言われる](https://qiita.com/Yo_Nashi/items/928f39678dd9fc348468)

stack overflowでの議論：　https://stackoverflow.com/questions/55441230/unable-to-load-script-make-sure-you-are-either-running-a-metro-server-or-that-yo


### 根本的な原因
**しかしながら、今回の場合は変更したネットワークセキュリティ構成が問題でこのようなエラーが出ています。**
試しに、ネットワークセキュリティ構成を適用している`AndroidManifest.xml`内の以下の記述、
```diff:AndroidManifest.xml
    <application
      ...
-      android:networkSecurityConfig="@xml/network_security_config">
+      >
```
を消すと、ReactNativeでのデバッグが可能になるかと思います。

# エラーが出る理由
問題はネットワークセキュリティ構成の内容です。
私が先に投稿した記事では以下のように設定しています。
```xml:network_security_config.xml
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">metadata.soracom.io</domain>
    </domain-config>
</network-security-config>
```

しかし、このような設定をすると、SORACOMへのHTTP通信は許可されますが、デバッグ時のローカル通信も制限されます。

つまり、デバッグでReactNativeのサーバへのHTTPアクセスが拒否されてしまい、
結果として、デバッグができなくなるという状態になります。

(以前の記事を見ていただいた方は大変申し訳ございませんでした。私の勉強不足でした。。。)


# 処置方法
ここまでの内容からネットワークセキュリティ構成に設定したい項目は2つです。
- SORACOMの各サービスへのHTTP通信の許可
- デバッグ時のローカル通信の許可

この2点を満たすように構成するには次のように`network_security_config.xml`を設定します。

```xml:network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <!-- 通常の通信ではHTTPSのみ許可 -->
    <base-config cleartextTrafficPermitted="false"/>

    <!--　SORACOMなどHTTPアクセスしたいものを許可 -->
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">soracom.io</domain>
        <domain includeSubdomains="true">{そのほかサービス}</domain>
    </domain-config>

    <!-- RNデバッグ用ローカルサーバへのアクセスを許可 -->
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>
```

このように設定することで、デバッグも今まで通り実行しつつ、
リリース時でもSORACOMなどHTTPアクセスが必要なものも利用できます。

# まとめ
ネットワークセキュリティ構成を独自に設定するときは、
ローカル通信もHTTPアクセスが制限されます。

### 参考
https://stackoverflow.com/questions/63265776/running-rn-view-in-existing-android-app-gives-error-unable-to-load-script