鸿蒙 + Flutter:用 Docker 实现 Google Flutter 环境与鸿蒙 Flutter 环境隔离

1,713 阅读6分钟

鸿蒙NEXT配图.webp

前言

随着鸿蒙系统逐步发展,开发者面临着越来越多的平台需求。鸿蒙通过扩展 Google Flutter 来支持鸿蒙应用的开发,即:鸿蒙 Flutter。在实际开发过程中,开发者可能同时处理基于 Google Flutter 和基于鸿蒙 Flutter 的多个项目,这导致频繁切换环境配置可能会引发冲突,甚至影响项目的稳定性。

为了优雅地解决这一问题,我们可以利用 Docker 技术来实现 Google Flutter 环境与鸿蒙 Flutter 环境的完全隔离。本文将深入探讨如何使用 Docker 来搭建这两个独立的开发环境,确保开发者的工作流程更加顺畅和高效。

安装 Docker Desktop

首先,我们需要安装 Docker Desktop,以便在本地构建和管理容器化的开发环境。请前往 Docker 官网 下载并安装最新版本的 Docker Desktop。一定要下载最新版本,因为旧版本的 Docker Desktop 可能在网络桥接等功能上存在缺陷,影响开发。

安装完成后,启动 Docker Desktop,并确保其正常运行。

创建 Ubuntu Docker 容器

在 Docker 中,我们选择 Ubuntu 18.04 作为基础镜像来搭建环境。当然,你也可以选择其他 Linux 发行版,例如 CentOS。在本例中,我们使用以下命令来启动一个名为 ohos_container 的容器:

docker run -itd --name ohos_container ubuntu:18.04

接下来,进入容器:

docker exec -it ohos_container /bin/bash

这样,我们就进入了一个干净的 Ubuntu 环境,可以在其上安装我们需要的各种工具。

安装开发工具

在容器中,我们需要安装各种开发所需的工具,包括 OpenJDK17、Git、Node.js、NPM、Curl 和 Vim。首先更新容器中的软件包信息,然后安装这些工具:

apt-get update
apt-get install <LIBRARY_NAME>

为了方便管理 Node.js 版本,我们还可以使用 NVM(Node Version Manager)来安装特定版本的 Node.js:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

上述命令将安装 NVM,并通过 NVM 安装 Node.js 14。根据项目的需要,你可以选择其他版本的 Node.js。

下载相关依赖

接下来,我们需要下载鸿蒙开发所需的工具和 Flutter 版本。前往华为官网,下载命令行工具鸿蒙 Flutter

需要特别注意的是,除非宿主机也是 Linux,否则不要直接将宿主机中的 Flutter 文件复制到 Docker 容器中,因为这样可能会导致 cannot execute binary file: Exec format error 的错误。建议在容器中直接下载或通过网络传输这些文件。

配置环境变量

为了使开发工具可以在容器中正确运行,我们需要配置一些必要的环境变量。编辑 ~/.bashrc 文件来设置这些变量:

添加以下内容:

# 配置 java17, 一般apt-get 安装后都是这个路径
export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64
export PATH=$JAVA_HOME/bin:$PATH

# 国内镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

export PATH=/Library/Huawei/flutter_flutter/bin:$PATH

# 没有该文件夹就自己创建一个
export PUB_CACHE=/Library/Huawei/PUB

# command-line-tools
export TOOL_HOME=/Library/Huawei/command-line-tools
export DEVECO_SDK_HOME=$TOOL_HOME/sdk
export PATH=$TOOL_HOME/ohpm/bin:$PATH
export PATH=$TOOL_HOME/hvigor/bin:$PATH
export PATH=$TOOL_HOME/tools/node/bin:$PATH

# 这是华为 HDC
export HM_SDK_HOME=/Library/Huawei/command-line-tools/sdk/default
export PATH=$PATH:$HM_SDK_HOME/hms/toolchains:$HM_SDK_HOME/openharmony/toolchains
export HDC_SERVER_PORT=7035

保存后,运行以下命令使配置生效: source ~/.bashrc

这样我们就完成了环境变量的配置,使得所有工具和路径都能够被正确识别。

检查 Flutter 配置

为了确保 Flutter 环境正确配置,我们可以运行以下命令来检查 Flutter 的状态:

flutter doctor -v

命令运行后,Flutter 会自动下载 Dart 相关依赖,并检查环境中的各种工具配置。输出中应该包含类似以下的内容: 截屏2024-10-21 16.08.07.png

确保所有组件都已正确安装并准备就绪。

保存 Docker 容器

为了防止容器环境丢失,我们可以将配置好的容器保存为镜像,这样在下次使用时无需重新配置环境。使用以下命令保存容器:

docker commit ohos_container ohos_container_image

这样我们就创建了一个包含所有开发环境配置的镜像,可以在任何需要的时候快速启动。

启动容器并挂载项目目录

在开发过程中,我们需要将宿主机上的项目代码挂载到容器中,以便在容器中进行编译和测试。使用以下命令启动容器并挂载项目目录:

docker run -itd \
-v /<你宿主的项目地址>:/home/<你容器存放项目的位置> \
--name ohos_container ohos_container_image

进入容器后,进入项目所在目录,即可开始开发工作。

HDC 连接手机

为了进行设备测试,我们需要使用 HDC(华为开发者连接工具)连接手机。在手机上进入 设置 -> 系统 -> 开发者选项,开启无线调试。

在容器中执行以下命令以连接设备:

hdc start -r
hdc tconn <IP>:<PROT>

这样我们就可以将容器中的开发环境与真实设备连接起来,进行调试和测试。

目前只能使用tcp方式进行运行, 之前想将USB直接挂载到docker上,但是查找相关资料发现是不被允许的: Docker # General FAQs for Desktop

截屏2024-10-21 16.20.08.png

配置项目签名

关于: 如何使用手动生成证书打包 本文不做介绍,可自行查看鸿蒙官方文档

为了能够成功打包和运行应用,我们需要在项目中配置签名文件。在项目的 build-profile.json5 文件中配置本地签名信息:

{
  "app": {
    "signingConfigs": [
      {
        "name": "default",
        "type": "HarmonyOS",
        "material": {
          "storePassword": "0000001...9AE",
          "certpath": ".debug.cer",
          "keyAlias": "example",
          "keyPassword": "0000001...54E",
          "profile": ".debug.p7b",
          "signAlg": "SHA256withECDSA",
          "storeFile": ".debug.p12"
        }
      }
    ],
  }
}

确保签名文件配置正确,以避免在构建过程中出现签名错误。

运行项目

所有配置完成后,我们可以在容器中运行 Flutter 项目,使用以下命令:

flutter run

这将启动应用程序,并将其部署到已连接的设备上进行测试。通过 Docker 容器,我们实现了鸿蒙 Flutter 环境与 Google Flutter 环境的隔离,使开发过程更加高效和稳定。

结论

通过使用 Docker 来隔离鸿蒙 Flutter 和 Google Flutter 开发环境,我们不仅解决了环境冲突问题,还提高了开发的灵活性和可移植性。Docker 容器使得开发环境可以随时保存和恢复,确保开发者在不同项目之间快速切换而无需担心配置问题。希望本文的详细步骤能够帮助你顺利搭建起鸿蒙和 Flutter 的开发环境,并且享受到 Docker 所带来的便利。

其它相关文章

鸿蒙 + Flutter: 使用 FVM 管理 Google Flutter 与 Ohos Flutter

撰写不易,请给个赞👍吧