久しぶりの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番に転送される。
知ってればなんてことない話。
