【Supabase CLI】Androidの実機でSupabaseのローカルサーバへアクセスする際に127.0.0.1で躓いた時の回避策【adb reserve】

こんにちは。 pregum_foxです。今回は以前に何回か起きては都度調べているAndroidの実機でローカルサーバーへアクセスする際に127.0.0.1で躓いた時の回避策についてまとめます。

検証環境

項目	内容
Android OSバージョン	Android 16
端末名	Google Pixel 6a

遭遇した現象

supabase CLIで起動したローカルサーバへAndroid端末で接続を試みると、下記のようなエラーログが出力されDBへアクセスに失敗しました。

ClientException with SocketException: Connection refused (OS Error: Connection refused, errno = 111), address = 127.0.0.1, port = 41534, uri=http://127.0.0.1:54321/rest/v1/app_versions?select=%2A&limit=1, #0      IOClient.send (package:http/src/io_client.dart:154:7)
I/flutter ( 6789): │ ⛔ <asynchronous suspension>
I/flutter ( 6789): │ ⛔ #1      BaseClient._sendUnstreamed (package:http/src/base_client.dart:93:32)
I/flutter ( 6789): │ ⛔ <asynchronous suspension>
I/flutter ( 6789): │ ⛔ #2      PostgrestBuilder._execute (package:postgrest/src/postgrest_builder.dart:140:20)
I/flutter ( 6789): │ ⛔ <asynchronous suspension>
I/flutter ( 6789): │ ⛔ #3      PostgrestBuilder.then (package:postgrest/src/postgrest_builder.dart:397:24)
I/flutter ( 6789): │ ⛔ <asynchronous suspension>

以下に手順を追って説明します。

Supabase CLIを使用して、supabase start でサーバを起動し、supabase statusで接続を確認し以下のようなURLでアクセスできることを確認しました。

         API URL: http://127.0.0.1:54321
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
  S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
          DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
      Studio URL: http://127.0.0.1:54323
    Inbucket URL: http://127.0.0.1:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
service_role key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   S3 Access Key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   S3 Secret Key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   S3 Region: local

上記のAPI URLを設定して、接続を試みると、冒頭のエラーが発生しました。

解消方法

adb reverse tcp:54321 tcp:54321 コマンドを使用して、 Android端末の54321 ポートをUSB接続しているローカルPCの54321ポートにポートフォワーディング

Supabase のGitHubに似たような人がいるか調べているとちょうど似たような現象のdiscussionがあり、その下の回答で

adb reverse tcp:54321 tcp:54321 コマンドで対応された方がいましたので同様に叩いて解消しました。

github.com

叩いた時に、実機とエミュレータの複数起動していましたので、 adb devices でdevice IDを調べた後、 -s <deviceId>オプションを adb reserve コマンドに追加して叩くとうまくいきました。

例として、deviceIdがABC81JE の場合はこんなコマンドを叩きました

adb -s ABC81JE reverse tcp:54321 tcp:54321

エミュレータの場合

エミュレータの場合は、公式ドキュメントに載っているように http://10.0.2.2/ を使用するようにしてください

developer.android.com

ポートフォワーディングを確認する方法

下記コマンドを叩けばOKです。

adb reverse --list

ポートフォワーディングを元に戻す方法

対応としてはいずれかの対応でOKです。

adb reverse --remove tcp:54321 コマンドを実行する
- 端末に紐づくので複数接続している場合は -s オプションをつける
USB接続を解除する
端末を再起動する

まとめ

今回は簡単な備忘録ですが、たまにローカルサーバへアクセスすることがあり、その度に10.0.2.2を設定するのか、サーバのローカルIPアドレスに置き換えるか対応を調べて時間を浪費することが多かったので、これで時間が節約できれば良いなと思っています。

狐好きぷろぐらまー

狐好きプログラマーのブログです。