Zenn
😸

flutterのデバッグをssh経由で行う

2025/02/08に公開
Flutter
Android Studio
adb
SSH
tech

私はこちらの記事で紹介したように、Macを開発サーバーとしたリモート開発を行っています。
今回は、flutterの開発を行うために、デバッグ（確認できているのはAndroidエミュレータのみ）手順を共有します。

環境構築

サーバー(Mac)側

  • flutterのインストール
    今回はmiseを使ったインストール方法を紹介させていただきます。
    miseをインストールしておけば、nodeやPythonなど色々な言語のバージョン管理が簡単にできますし、言語の導入もコマンド一つで完了するのでおすすめです。

    brew install mise
echo 'eval "$(mise activate zsh)"' >> ~/.zshrc
mise use -g flutter@3.27.3-stable

    vscodeでflutterの拡張機能を使っている場合は、settings.jsonに以下の設定を追加してください。
    "dart.flutterSdkPath": "/Users/[ユーザー名]/.local/share/mise/installs/flutter/3.27.3-stable"

  • Android Studioのインストール
    こちらの手順に従ってインストールを行います。

    1. Android Studio DMG ファイルを起動します。
    2. アプリケーション フォルダに Android Studio をドラッグ＆ドロップしてから、Android Studio を起動します。
    3. 以前の Android Studio の設定をインポートするかどうかを選択して、[OK] をクリックします。
    4. Android Studio セットアップ ウィザードを完了します。開発に必要な Android SDK コンポーネントのダウンロードも含まれています。

クライアント(Windows)側

クライアントでは、adbとscrcpyが使えるようにインストールを行います。

winget install Google.PlatformTools
winget install --exact Genymobile.scrcpy

実行方法

実行可能状態のプロジェクトがある前提で進めます。

サーバー(Mac)側

  1. Androidエミュレータ起動
    Android Studioから任意のエミュレータを起動してください。
    adb devicesを実行して、エミュレータが起動していることを確認します。
    起動していない場合、以下のコマンドで、adbサーバーを再起動します。

    adb kill-server
adb start-server
adb devices

2.アプリ実行
flutter runを実行して、androidのエミュレータ端末でアプリを実行

クライアント(Windows)側

  1. サーバーに接続
    サーバーの5555ポート（エミュレータのデフォルト）に接続します。私の場合は、vscodeのssh接続時に、configファイルにLocalForward 15555 127.0.0.1:5555オプションをつけて接続しています。

  2. adbの実行
    以下のコマンドで、adbサーバーに接続します。

    adb connect localhost:15555

  3. scrcpyの実行
    scrcpyを実行すると、クライアント端末でエミュレータが起動します。

まとめ

リモート開発環境におけるflutterのデバッグ手順を紹介しました。flutterの開発は始めたばかりで、リモート環境の構築にすこし手間取ってしまったので、同じような方の参考になると幸いです。
iOSのデバッグも同じような仕組みでできるか、今後調査したいと思います。

Discussion