创建gitlab pipeline打包Tauri跨平台应用程序

发表于 更新于 分类于 阅读次数： 本文字数： 4.6k 阅读时长 ≈ 4 分钟

1. 前言

关于如何对 Tauri 项目进行打包和发布, 在 Tauri 的官方网站实际上只做了基本的介绍. 而且由于 Tauri 或者说是 Rust 对跨平台编译以及打包支持得不是很好.

所以到底如何在 Github.com 以外得平台进行编译打包, 讲得不够详细. 本来希望搜索能找到对这方面有所补充的博客文章, 但是也没有找到. 包括一些英文方面的资料以及视频教程, 在讲得关于 Tauri 的 devops 自动化编译打包部署方面都是照本宣科, 按照官方的介绍使用 github action 进行配置. 而这些内容对于企业开发或者非开源项目来说帮助非常有限.

于是我静下心来, 花费了一些时间, 将这 Tauri devops 部分内容以中文的形式整理出来, 以供对后来者有所帮助. 一来是出于对开源运动的支持, 二来我是非常喜欢 Tauri, 经过测试, 我发现这就是我心中一直在找的一种跨平台解决方案, 有一种众里寻他千百度, 蓦然回首, 那人却在灯火阑珊处的感觉, 所以我很愿意将我在 Tauri 上的研究分享出来, 以帮助到同道中人.

考虑到将所有内容都放在一篇文章中内容可能有些杂乱, 冗长. 于是我将内容打撒成一些小的文章, 然后将其整合到这篇文章, 中间也重用了一些之前的写的文章. 当然也是将单一职责原则应用的生活中, 学以致用嘛. 也就是每篇文章讲一个非常小的主题, 这里特别加以说明.

虽然本文是以 gitlab pipeline 为例, 但是对其它各种自动化平台创建 devops pipeline 也会有参考价值. 另外本文对于非 Tauri 项目创建 gitlab pipeline 也要实际操作层面的价值.

本文原文发布在我的博客网站快速的将 web 应用转化为桌面应用 | 鹏叔的技术博客, 要获取最新更新, 请访问原文. 更多 Tauri 相关话题, 请访问鹏叔的技术博客 - Tauri 专题, 后续文章将持续更新到该专题中.

2. macOS 开发环境配置

2.1. 安装 macOS 虚拟机

当然如果有钱又任性, 完全可以忽略这一步, 直接买几台不同版本的 Macbook 用于打包和测试工作, 完全可以跳过这一步.

但是如果您有降本增效考量, 采购流程又很漫长且复杂, 可以考虑安装 Macos 虚拟机来达到同样的目的.

安装 macOS 虚拟机, 可以参考我的博客鹏叔的博客空间 - 如何安装一台 MacOS 虚拟机

2.2. macOS 上配置 rust

安装和配置 Rust 可以参考我的博客鹏叔的技术博客 - 在各种操作系统上安装和配置 Rust

2.3. macOS 上配置 nodejs

安装和配置 nodejs 可以参考我的博客鹏叔的技术博客 - MacOS 上安装 nvm

3. Ubuntu 环境配置

3.1. 安装 Ubuntu 虚拟机

安装 Ubuntu 虚拟机参考鹏叔的技术博客 - 安装 Ubuntu 虚拟机

3.2. Ubuntu 上配置 rust

安装和配置 Rust 可以参考我的博客鹏叔的技术博客 - 在各种操作系统上安装和配置 Rust

3.3. Ubuntu 上配置 nodejs

安装和配置 nodejs 可以参考我的博客鹏叔的技术博客 - 安装并配置 nodejs

以及一篇关于升级 nodejs 的文章, 里面有关于安装 typescript, angular cli 的部分.

4. Windows 开发环境配置

4.1. 安装 Windows 虚拟机

可以在 VMWare 或 VMware ESXi 上安装 windows 虚拟机来用以编译,测试 和打包. 但是由于安装包都很大, license 的问题等等种种原因. 这里我使用的是手头上一台开发机器替代的, 后续将会补充安装 Windows 虚拟机的部分, 并在此更新.

4.2. Windows 上配置 rust

Windows 上安装和配置 Rust 可以参考我的博客鹏叔的技术博客 - 在各种操作系统上安装和配置 Rust

4.3. Windows 上配置 nodejs

Windows 上安装和配置 nodejs 可以参考我的博客鹏叔的技术博客 - 安装并配置 nodejs 以及升级 nodejs 的文章, 里面有关于安装 typescript, angular cli 的部分.

5. 配置 tauri gitlab pipeline

以上所有的步骤都是为我们创建 tauri gitlab pipeline 创建基础设施, 基础设施搭建完成后, 我们就可以创建 gitlab pipeline.

在 gitlab pipeline 中我要做三件事: 一, 创建 windows 安装程序; 二, 而创建 debian/ubuntu 安装程序; 三, 创建 macos 安装程序.

5.1. windows gitlab pipeline job

如果您没有安装 gitlab 并打算安装, 可以参考鹏叔的技术博客 - gitlab 安装升级及迁移 以及鹏叔的技术博客 - gitlab CICD 基础

修改项目的配置文件.gitlab-ci.yml, 添加一个新的 job 用于编译 windows desktop application.

1
2
3
4
5
6
7
8
9
10

demo_desktop_windows_build:
  stage: releaseBuild
  when: manual
  timeout: 3h
  tags: [windows-runner]
  script:
    - echo "description - job to build demo-desktop Windows tuari app"
    - ./scripts/demo_desktop_windows_build.ps1

在 Job 定义脚本中定义tags:[windows-runner] 使其与 windows gitlab-runner 是的标签对应, 这样这个 job 就会被运行在 windows 环境上 gitlab-runner 所执行. 最终打出的包即为 msi.

./scripts/demo_desktop_windows_build.ps1 的内容如下

1
2
3
4
5
6
7
echo "building windows desktop application"

echo "install npm packages"
cd ../demo
npm install

npm run tauri build

5.2. ubuntu/debian gitlab pipeline job

修改项目的配置文件.gitlab-ci.yml, 添加一个新的 job 用于编译 ubuntu/debian desktop application.

1
2
3
4
5
6
7
8
9
10

demo_desktop_ubuntu_build:
  stage: releaseBuild
  when: manual
  timeout: 3h
  tags: [ubuntu-runner]
  script:
    - echo "description - job to build demo-desktop ubuntu/deb tuari app"
    - ./scripts/demo_desktop_ubuntu_build.sh

指定tags: [ubuntu-runner], 这样 job 就会在拥有 ubuntu 标签的 gitlab-runner 上运行.

scripts/demo_desktop_ubuntu_build.sh 的内容如下, 与 windows 的脚本没有太大差别, 但是 build 出来的安装文件格式会不一样.

1
2
3
4
5
6
7
8
9
10
11
12

#!/bin/bash
echo "building ubuntu desktop application"

echo "install npm packages"

cd ../demo

npm install

npm run tauri build

5.3. macOS gitlab pipeline job

修改项目的配置文件.gitlab-ci.yml, 添加一个新的 job 用于编译打包 macos desktop application.

1
2
3
4
5
6
7
8
9
10

demo_desktop_macos_build:
  stage: releaseBuild
  when: manual
  timeout: 3h
  tags: [macos-runner]
  script:
    - echo "description - job to build demo-desktop macOS tuari app"
    - ./scripts/demo_desktop_macos_build.sh

指定tags: [macos-runner], 这样 job 就会在拥有 macos 标签的 gitlab-runner 上运行.

scripts/demo_desktop_macos_build.sh 的内容如下, 与以上两个的脚本没有太大差别, 但是 build 出来的会是 pkg 和 dmg 两种安装包格式.

1
2
3
4
5
6
7
8
9
10
11
12

#!/bin/bash
echo "building macOS desktop application"

echo "install npm packages"

cd ../demo

npm install

npm run tauri build

6. 升级 App 到 Tauri 2.0 并配置 Tauri Mobile

升级 App 到 Tauri 2.0 并配置 Tauri Mobile

7. 关联阅读

创建 gitlab pipeline 打包 Tauri 跨平台应用程序

Tauri cli 详解

在 Linux 上配置 Tauri 环境

使用 Tauri 和 Angular 创建桌面应用程序

Tauri 开发环境配置

Tauri Mobile-使用 JavaScript 和 Rust 开发移动应用程序

8. TroubleShouting

问题一: 在 ubuntu 上执行npm run tauri build时, 报如下错误

1
2
3

Error failed to bundle project: error running appimage.sh

问题排查: 登录到 ubuntu 进入, 进入 project 目录, 执行命令并开启详细日志.

1
2
3

npm run tauri build -- --verbose

参数说明:
verbose 的字面意思是详述的意思, 在此是输出详细日志.

发现 appimage.sh 脚本试图从 githubusercontent 下载另外一个脚本 wget -q -4 -N https://raw.githubusercontent.com/tauri-apps/linuxdeploy-plugin-gtk/master/linuxdeploy-plugin-gtk.sh

最后的解决办法是将 appImage 格式从 target 中去除了. 修改 tauri.conf.json, 将 targets 修改如下.

注意: 这种办法只是暂时解决了打包脚本失败的问题, 并没有实质解决制作 appImage 格式安装包的问题.
关注我的博客原文, 后续我抽出时间会实质性的解决该问题.

1
"targets": ["deb", "nsis", "msi", "app", "dmg", "updater"],

问题二: windows 应用程序安装后, 启动时报错”WebView2Loader.dll was not found”

原因是没有正确的安装 tauri 依赖的环境. 详细原因请参考这个 issue

解决办法: 重新安装相关依赖

1
2
3
choco install visualstudio2019buildtools
choco install visualstudio2019-workload-vctools

9. 参考文档

Set up macOS runners

Tauri 开发一： Tauri 开发工具介绍