React Native: デバイスでブレークポイントでデバッグ + CORSのリソースロードエラーの解決方法
React Native開発では、問題を特定するために実機上でブレークポイントデバッグを行う必要がある場合があります。この記事では、実機上でブレークポイントデバッグを行う方法と、クロスオリジンリソースの読み込みエラーを解決する方法について説明します。
- 最初に、実機を開発環境に接続しましょう。その際、実機と開発環境が同じネットワークに接続していて、React Nativeの開発環境がインストールされていることを確認してください。
- ターミナルを開き、プロジェクトのディレクトリに移動して、以下のコマンドを実行すると React Native の開発サーバーが起動します。
react-native start
- ターミナルにQRコードとローカルサーバーアドレスが表示されます。開発マシンと実機が同じLAN上にあり、サーバーアドレスにアクセスできることを確認してください。
- 実機でReact Nativeアプリを開くには、次のいずれかの方法を使用できます。
- 端末内のQRコードを専用のQRコードスキャンアプリで読み取る
- 手入力でアドレスを入力する：実機に内蔵されたブラウザーで開発用サーバーのアドレスを手入力する。
- 開発用マシンでChromeブラウザーを開き、以下のアドレスを入力すると、本機上のReact Nativeアプリケーションのデバッグ画面が表示されます。
chrome://inspect/#devices
- Chromeのデバッグ画面では、開発機に接続された実機の機器を確認できます。実機上デバッグツールを開くには「検査」ボタンをクリックしてください。
- リアルデバイスでブレークポイントデバッグが実現しました デバッガ上で、ブレークポイントの設定、変数の値の確認、コードの実行ステップごとの実行が可能になりました
次に、クロスオリジンリソースの読み込みでのエラーに対処します。React Nativeのクロスオリジンリソースの読み込みでのエラーは、多くの場合、ネットワークリクエストが正しく構成されていないことが原因で発生します。次に、一般的な解決方法を示します。
- iPhoneからプロジェクトのInfo.plistファイルを開き、以下を追記します。
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
これにより、アプリケーションはクロスオリジンリソースなどあらゆるソースのリソースロードが可能になります。
- Androidの[AndroidManifest.xml](/google/mlkit/vision/docs/android#manifest-file-setup)を開き、以下の行を追加します。
<application
android:usesCleartextTraffic="true"
...
>
...
</application>
これにより、アプリケーションがプレーンテキストのトラフィックを使用して、クロスオリジンのリソースを読み込むことができます。
- HTTPSリソースを読み込む場合、Androidのネットワークセキュリティコンフィグレーションファイルに次のような設定を追加する必要があります。プロジェクトのres/xml/network_security_config.xmlファイルを開き、次の内容を追加してください：
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
</trust-anchors>
</base-config>
</network-security-config>
システム証明書内のHTTPSリソースをアプリケーションで読み込むことが許可されます。
- アプリケーションで自己署名 HTTPS リソースを読み込む必要がある場合は、Android のネットワークセキュリティ構成ファイルに該当する証明書の構成を追加します。プロジェクトの res/xml/network_security_config.xml ファイルを開き、以下を追加します。
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
<certificates src="user" />
<certificates src="protected" />
</trust-anchors>
</base-config>
</network-security-config>
プロジェクトの res/raw ディレクトリに自己署名証明書を配置し、network_security_config.cer という名前を付けます。これにより、アプリが自己署名 HTTPS リソースをロードできます。
上記のステップを実行することで、実機上でブレークポイントによるデバッグが可能になり、クロスオリジンリソースの読み込み時に発生するエラーを解決することができます。