使用 VSCode 远程开发开发 Flutter 应用

Question

我已经搜索了一段时间来寻找一个好的解决方案，但似乎没有很多其他人具有与我相同的设置。

我的设置包括一台低规格笔记本电脑 (Surface pro 3) 和一台运行 ProxMox 的服务器计算机（规格更高）（这是我的 Ubuntu 22.04 开发虚拟机所在的位置）。

我想要实现的是使用 VS Code 远程开发在服务器上使用远程开发来开发 Flutter 应用程序，同时在我的 Surface 上查看应用程序的输出。仅我的 Surface 还不够强大，无法很好地运行 Android 模拟器，因此如果服务器能够处理繁重的工作并将视觉输出转发到我的 Surface，那就太棒了。有谁知道这怎么可能？

我目前取得的唯一成功是将 Flutter 应用程序作为 Web 服务器运行，然后使用 Dart 调试扩展通过 Chrome 访问实例。但这并不是很理想。我的一部分认为我可能必须使用物理 Android 设备并将 ADB 转发给它或其他东西，但我不确定这是否是最佳选择。

我将不胜感激任何帮助，谢谢。

Answer 1

VS Code确实可以用于远程开发。我能够使用code-server一系列 SSH 转发来实现所描述的工作流程。

在这里，我描述了如何使用用于构建和调试任务的远程计算机以及用于访问编辑器 GUI 和连接物理设备的本地计算机来设置Flutter 上code-server的Android 开发。

在 Ubuntu 22.04（服务器）、Fedora 36（本地）和 Flutter 3.0.5 上进行了验证。

在远程计算机上安装软件和 SDK

code-server1.从官方仓库安装

重要提示：安装后，code-server系统会告诉您通过运行systemctl命令自动启动服务器。避免这样做，因为这样 VS Code 下的 ADB 将无法检测设备。我还没有想出任何解决方法来让它在 systemd 管理的实例下工作。

2. 安装 Flutter SDK 并更新PATH

您的系统可能还需要额外的依赖项才能运行 Flutter SDK。我建议从官方手册中了解它。更喜欢那里描述的手动安装方式。

安装完成后，更新文件PATH中的变量~/.bashrc以包含/binFlutter SDK 的文件夹，例如添加如下行：

export PATH="$PATH:$HOME/path/to/flutter/bin"

之后，应用更改：

source ~/.bashrc

3.安装Android工具链

我假设您的服务器没有任何桌面环境，因此我们将在没有 Android Studio 的情况下安装 Android 工具链（因为 Studio 需要 DE 才能运行）。

安装Java

截至 2023 年 9 月，Android 命令行工具需要最低类文件版本 61.0 (Java 17)。

您可以通过运行来检查您安装的 Java 版本java --version，也可以通过运行来检查它的安装位置which java。如果您已经安装了 Java，请确保它与cmdline-tools您的项目兼容。sudo update-alternatives --config java您可以安装多个Java版本并通过命令或环境变量控制您的首选版本JAVA_HOME。

为了简单起见，在这里我们将从 Ubuntu 的存储库安装 OpenJDK。如果您愿意，可以从官方网站安装商业 Oracle Java 。

要安装 OpenJDK 17，请运行：

sudo apt install openjdk-17-jdk

您还可以安装最新的可用 OpenJDK 版本，以列出安装运行的可用版本：

sudo apt list openjdk-*-jdk

如果您尝试构建现有项目
，不针对 Android 14 的旧版 Flutter 项目可能需要旧版 JDK 版本才能开箱即用，例如openjdk-11-jdk. 较新的 cmdline-tools 无法与 一起使用openjdk-11，因此您必须使用较旧的cmdline-toolsJDK，或者将项目迁移到较新的版本。Google 不提供旧版本的链接cmdline-tools，但您可以在Internet Archive上找到它们，例如v9 的存档副本。

下载cmdline工具

转到Android Studio 网站并下载“仅限命令行工具”。

要将存档直接下载到您的服务器上，请单击 Android Studio 网站上的链接，向下滚动并同意条款，但不要单击“下载适用于 Linux 的 Android 命令行工具”按钮，而是右键单击它并复制 URL。然后从您的服务器下载它，例如使用wget：

wget https://dl.google.com/android/repository/commandlinetools-linux-XXX_latest.zip

使用命令将它们解压unzip commandlinetools-linux-XXX_latest.zip到所需位置。调用unzip将在您当前的位置创建一个cmdline-tools文件夹。我建议在解压存档时创建此文件夹结构：

~/path/to/android-sdk/cmdline-tools

这样，当sdkmanager下载其软件包时，将在该文件夹内创建新文件夹android-sdk。

截至 2023 年 9 月，sdkmanagerAndroid 内部命令行工具需要特殊的文件夹层次结构，这可以通过使用以下命令将文件夹内容cmdline-tools放入latest其下的文件夹中来实现：

wget https://dl.google.com/android/repository/commandlinetools-linux-XXX_latest.zip

将工具添加到您的PATH文件中，并通过添加新行~/.bashrc进行指定：ANDROID_SDK_ROOT

~/path/to/android-sdk/cmdline-tools

别忘了奔跑source ~/.bashrc

安装SDK

Flutter SDK 需要安装三个包：build-tools、platforms和platform-tools。

mv ./cmdline-tools/ ./latest && mkdir cmdline-tools && mv ./latest/ ./cmdline-tools/latest/

34.0.0是 的最新版本build-tools，也是截至 2023 年 9 月的android-34最新版本，针对 Android 14。platforms

build-tools通过运行以下命令了解可用的最新版本：

export ANDROID_SDK_ROOT="$HOME/path/to/android-sdk"
export PATH="$PATH:$ANDROID_SDK_ROOT/cmdline-tools/latest/bin:$ANDROID_SDK_ROOT/platform-tools"

对于platforms：

sdkmanager "build-tools;34.0.0" "platforms;android-34" "platform-tools"

对于现有项目，Flutter 会自动下载所需的 SDK 来构建它们。

接受许可

sdkmanager --licenses按y键运行并接受所有许可证

VS 代码设置

安装后code-server，您现在可以从浏览器访问编辑器。

还建议将其安装为 PWA，这样您将拥有更多的屏幕空间、更多的键盘快捷键选项以及从系统启动器启动编辑器的能力。

1. 安装 Flutter 扩展
2. 将这些设置添加到 VS Code 用户设置：

{
    "dart.flutterRunAdditionalArgs": [
        // Dart Developer Service port (debugger)
        "--dds-port=10388",
        // Dart VM Service instance port (device)
        "--host-vmservice-port=10389"
    ],
    "dart.devToolsPort": 9100,
}

默认情况下，Dart 选择随机端口用于调试器和设备之间的连接。通过设置这些设置，我们使端口静态，这样我们就可以轻松转发它们。

dart.devToolsLocation: external如果您的浏览器或广告拦截器阻止“本地网络入侵”，即阻止网站访问本地主机端口，您可能需要添加到您的配置中。不过，我建议将您的code-server实例添加到异常中。

在本地计算机上使用 SSH 进行端口转发

为了使用 Flutter 调试 Android 应用程序，我们必须转发 4 个端口。该表列出了根据上面 VS Code 设置的端口号。您可以使用自己的端口号，但必须相应地更改配置。

港口	描述	转发
5037	亚洲开发银行	至远程
10388	Dart 开发者服务	到本地
10389	设备上的 VM 服务	至远程
9100	Dart 开发工具	到本地

命令

SSH 可用于转发端口。

要将端口从本地主机转发到远程主机，请在本地计算机上运行：

sdkmanager --list | grep build-tools

要将端口从远程主机转发到本地主机，请在本地计算机上运行：

sdkmanager --list | grep "platforms;android"

您可以将选项链接到ssh命令，例如：

{
    "dart.flutterRunAdditionalArgs": [
        // Dart Developer Service port (debugger)
        "--dds-port=10388",
        // Dart VM Service instance port (device)
        "--host-vmservice-port=10389"
    ],
    "dart.devToolsPort": 9100,
}

端口转发将处于活动状态，直到您关闭 SSH 连接。

确保您的防火墙设置为允许端口转发。

自动化脚本

我制作了一个脚本，可以自动执行该过程中可能出现的怪癖：

1. 杀死本地 ADB 并重新启动它以释放已使用的端口
2. 设置指定端口到远程主机的端口转发。该脚本期望您使用密钥进行 SSH 身份验证。
3. code-server终止、node和 的所有正在运行的实例adb。如果这不适合您，您将必须自定义它。
4. 设置VSCODE_PROXY_URI为空以关闭端口转发 URL 覆盖，这会破坏 Dart DevTools。启动 ADB 并启动code-server.

它旨在在本地计算机上运行。

ssh -R XXXX:localhost:XXXX user@host

附加端口管理

有时连接可能会意外中断，因此端口会繁忙并且转发无法工作。您可以将这些行添加adb devices到上面脚本的行后面：

ssh -L XXXX:localhost:XXXX user@host

添加代码后，如果您向脚本传递任何参数，它将尝试释放远程计算机上已使用的端口（例如script.sh kill）。

此代码枚举使所用端口保持繁忙的进程，然后终止它们。

要sudo ss在非超级用户的脚本中工作，您需要/etc/sudoers通过使用命令打开文件来添加以下行sudo visudo。这样做将允许您的用户sudo ss无需输入密码即可运行：

myusername ALL=(root) NOPASSWD: /usr/bin/ss

或者，您可以将密码存储在脚本中并按以下方式更改脚本行：

ssh -R 5037:localhost:5037 -L 10388:localhost:10388 -R 10389:localhost:10389 -L 9100:localhost:9100 user@host