React Nativeで開発中にローカルサーバにアクセスしたい

久しぶりのReact Nativeの小ネタ

React Nativeでアプリを開発していてシミュレータなり実機でデバッグするときにローカルで起動したAPIサーバにアクセスしたいときってあると思う。

axiosなりfetchでの接続先を単にlocalhostとかにしてあげればつながるかと思いきやそうじゃなかった話。

ちなみに自分の場合はローカルで起動するAPIサーバはコンテナで起動している。そしてローカルで起動しているサーバがhttp://localhost:3000とする。自分の場合はコンテナで起動しているのでこの3000番はEXPOSEしているポートだ。

まず、大前提としてシミュレータや実機は別デバイス扱いだということ。この時点でサーバが起動しているデバイスlocalhost:3000でアクセスできなくなる。だって別デバイス扱いなのだから。

では、どうするか。ポート転送すればいいのだ。ここではAndroidの場合の話をする。

Androidでポート転送といえばadb reverseだ。というわけで今回の場合であればadb reverse tcp:3000 tcp:3000 を実行する。

この状態でシミュレータ/実機上のAndroidアプリからlocalhost:3000にアクセスするようにすればいい。ここでのlocalhostはシミュレータ/実機デバイスローカルアドレスだ。これでもれなくラップトップ側の3000番に転送される。

知ってればなんてことない話。

©Keisuke Nishitani, 2020   プライバシーポリシー