本文翻译自:Using Docker to test Qt for WebAssembly

原文作者:Maurice Kalinowski

校审:Richard Lin

最近,人们对WebAssembly的热情很高,更确切地说,是对Qt for WebAssembly的热情很高。不幸的是,暂时还没有可用的开发环境的镜像。即使有可用的版本,您也需要在本地安装好很多依赖项来设置您的开发环境。

我想试试这个过程,这篇文章的目的是创建一个开发环境,并用它测试一个基于最新进展的工程。此处我们引入了Docker。过去,Docker一直被用于在云环境中创建web应用程序,它允许轻松扩展、提供隐式沙箱和轻量级部署,至少比虚拟机轻量级多了。

现在Docker涵盖了更多的场景。

  • 构建环境(独立)
  • 开发环境(为其他用户创建SDK)
  • 连续集成(在容器内运行测试)
  • 嵌入式系统的运行时

容器和嵌入式并不是这篇博文的重点,但这种方式有很多好处:

  • 可以作为应用程序的开发环境来使用
  • 资源可控
  • 提供沙箱/安全相关项目
  • 提供云特性,如应用部署管理、OTA等…

我们可能会在以后的博文中更深入地讨论这个问题。在此期间,您还可以追踪我们合作伙伴韬睿在Torizon项目上的进展情况。此外,Burkard还写了一篇关于Docker与Open Embedded结合使用的文章。

让我们回到Qt WebAssembly,并讨论如何达到预定的目标。假设我们手头上有一个在其他平台上用Qt开发的项目。

我们的目标是创建一个容器,能编译上述基于Qt for WebAssembly的项目,并在浏览器中测试它。

1.创建开发环境

Morten写过一篇关于如何编译Qt for WebAssembly的文章。以后,我们将会创建一个Qt for WebAssembly二进制预编译库并通过Qt安装程序为您提供下载和使用。但就目前而言,我们的目标是实现一个最小的东西而且不需要处理依赖的问题。使用Docker Hub的另一个优点是,生成的镜像可以与他人共享。

Dockerfile的第一部分如下所示:

FROM trzeci/emscripten AS qtbuilder

RUN mkdir -p /development
WORKDIR /development

RUN git clone --branch=5.13 git://code.qt.io/qt/qt5.git

WORKDIR /development/qt5

RUN ./init-repository

RUN mkdir -p /development/qt5_build
WORKDIR /development/qt5_build

RUN /development/qt5/configure -xplatform wasm-emscripten -nomake examples -nomake tests -opensource --confirm-license
RUN make -j `grep -c '^processor' /proc/cpuinfo`
RUN make install

浏览Docker Hub可以发现很多可以作为基础的镜像。在本例中,我选择了一个基础镜像,它安装了Emscripten,并可以直接用于后续步骤。
接下来的步骤基本上就是一条一条地复制构建指令。
现在,我们有一个包含所有构建材料(object文件、生成的mocs、…)的大型容器,它太大了,无法共享,而且这些材料也没有继续分享的必要。有些人倾向于使用磁盘共享来解决。构建文件夹位于宿主系统中,然后挂载到镜像系统中,构建在这个文件夹中完成,执行安装时拷贝安装文件到镜像系统中。我个人不喜欢使用这种方法,因为可能破坏我的宿主操作系统。
在较新版本的Docker中可以进行多阶段构建,它允许基于前一个镜像来创建新镜像,并将前一个镜像中的内容复制到其中。接下来的Dockerfile实现了这一点:

FROM trzeci/emscripten AS userbuild

COPY --from=qtbuilder /usr/local/Qt-5.13.0/ /usr/local/Qt-5.13.0/
ENV PATH="/usr/local/Qt-5.13.0/bin:${PATH}"
WORKDIR /project/build
CMD qmake /project/source && make

同样的,我们可以使用相同的基础容器让em++及其相关库可用,并复制Qt构建的安装内容到新镜像中。接下来,我们将它添加到PATH并更改工作目录。这个路径在稍后会很重要。CMD指定了容器在非交互性启动时执行的命令。

2.使用开发环境/编译应用程序

现在,用于测试应用程序的镜像已经创建好了。若要测试项目的构建,需要创建一个build目录,并调用Docker,命令如下所示

docker run --rm -v :/project/source -v :/project/build maukalinow/qtwasm_builder:latest

这将启动容器,调用qmake和make,并将构建内容留在构建目录中。容器中的/project/build目录映射到外部构建目录,这就是上面设置工作目录的原因。
为了减少每次输入,我创建了一个最小的批处理脚本(是的,我用的是Windows) 。你可以在这里找到该脚本。

3.再次测试应用程序/容器

希望您已经能够编译您的项目了,可能需要进行一些额外的调试,接下来就可以在网页服务中验证运行是否正确的了。我们需要的是一个网页服务来支撑所创建的内容。同样,Docker在这里也很有用。由于没有指定参数,其实就是检查hub上的第一个命中,您可以通过下面的命令进行调用

docker run --rm -p 8090:8080 -v :/app/public:ro netresearch/node-webserver

这将创建一个Web服务,您可以从本地浏览器浏览。下面是animated tiles示例的屏幕截图

animated_dws
另外,您知道Qt最近还加入了QT Http Server功能吗?将它封装到容器中并检查是否可以删除其他文件以最小化镜像尺寸,这可能是一个有趣的想法。相关更多信息,请查看我们的文章
如果您想要尝试镜像本身,您可以从这个链接下载。
这篇博文就写到这里了,希望读者们能提供一些反馈,并进行一些相关的讨论。

  • 您是否已经将容器与Qt结合使用?
  • 你的使用场景是什么?
  • 你已经在容器中试用了Qt吗?你有什么经验可以分享吗?
  • 你想让Qt提供一些开箱即用的东西吗?你希望是什么呢?

Subscribe to Our Blog

Stay up to date with the latest marketing, sales and service tips and news.