Tauri 开发实践 — 使用 CI/CD 自动构建发布 Tauri 桌面端应用

简介: 本文介绍如何使用 CI/CD 自动构建发布 Tauri 应用。Tauri 是一个轻量级跨平台客户端框架,适合个人应用。文章首先概述了 CI/CD 的基本流程,并介绍了 GitHub Actions、GitLab CI 和 Jenkins 三种工具。最终选择了 GitHub Actions 进行配置。文中详细展示了使用 GitHub Actions 脚本实现 Tauri 应用构建的过程,并解决了权限和安全问题。项目源码可在 GitHub 上获取。

本文首发微信公众号:前端徐徐。

大家好我是徐徐。今天主题是如何使用 CI/CD  自动构建发布 Tauri 应用。

前言

Tauri 是一个跨平台的客户端框架,体积小而且很精悍,如果做个人应用,再合适不过了。不过要想丝滑的发布自己的应用,还需要想想办法,不可能每次发布都依赖自己的本地环境去做打包发布变更,主要原因是你很难做到同时拥有多种操作系统的设备。为了解决这个问题,最近研究了一下如何用 CI/CD 去打包构建和发布 Tauri 应用,让这种桌面客户端的发布如 Web 端的发布一样简单流畅。

CI/CD 流程概述

这里先简单概述一下 CI/CD 的流程,因为有的小伙伴不一定知道 CI/CD 。

上图是一个最简单的CI / CD的流程图,大概逻辑就是开发者提交代码之后版本控制系统(如 Git)触发CI / CD流程,通过代码检出,构建应用等关键动作自动化完成整个发布。当然在一些工程化的体系中还可能加很多其他节点,比如代码分析,各种测试(单元测试、集成测试、性能测试等),发布卡点设计,发布通知等,不过我们这里只实现最核心的流程节点。

选择 CI/CD 工具

上面讲到了 CI/CD 的基本流程,我们现在需要了解几个常见的 CI/CD 工具,然后根据自己的场景去选择合适的工具完成相应的工作,下面几个常见的工具可供大家选择。

GitHub Actions

  • 与GitHub仓库紧密集成
  • 配置简单,使用YAML文件
  • 免费计划对开源项目很慷慨
  • 支持多种操作系统,适合跨平台应用构建
  • 缺点:
  • 私有仓库的免费额度有限
  • 与GitHub绑定,不适合使用其他代码托管平台的项目

GitLab CI

  • 与GitLab平台无缝集成
  • 提供完整的DevOps生命周期工具
  • 可以自托管,也有云服务选项
  • 配置灵活,使用YAML文件
  • 缺点:
  • 学习曲线可能比GitHub Actions稍陡
  • 自托管时需要管理自己的运行器

Jenkins

  • 高度可定制,插件生态系统丰富
  • 可以处理复杂的构建和部署流程
  • 支持各种版本控制系统和构建工具
  • 完全自托管,适合对数据安全性要求高的场景
  • 缺点:
  • 设置和维护相对复杂
  • 需要自己管理服务器和资源
  • 用户界面相对陈旧

三个工具我都用过,用得最多的是 GitHub Actions,其余两个有会在工作中用到,企业级的应用基本都会用到Gitlab CI 或者 Jenkins。如果是个人应用或者开源项目,可以无脑选择 GitHub Actions,免费好用,支持的环境多样,而且配置门槛低,所以我选择 GitHub Actions。

为 Tauri 应用配置 CI/CD

在进行配置前,我们需要梳理一下整个构建的动作,这里的构建动作就跟我们本地开发一样,但是更加细致化一些,大概的流程如下。

上面提到的步骤,我们需要用 GitHub Actions 的脚本来实现,下面我们就来看看具体的实现。

name: Build and release
on:
  push:
    branches: [feature-testci]
  workflow_dispatch:
jobs:
  release:
    permissions:
      contents: write
      actions: write
      attestations: write
      deployments: write
      packages: write
      id-token: write
    strategy:
      fail-fast: false
      matrix:
        platform: [macos-latest, windows-latest]
    runs-on: ${{ matrix.platform }}
    steps:
      # 检出存储库
      - name: Checkout repository
        uses: actions/checkout@v4
      # 设置 rust 环境
      - name: Rust setup
        uses: dtolnay/rust-toolchain@stable
      # rust 缓存
      - name: Rust cache
        uses: swatinem/rust-cache@v2
        with:
          workspaces: './src-tauri -> target'
      
      # 设置 node 环境
      - name: Sync node version and setup cache
        uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'
      # 全局安装pnpm
      - name: Install pnpm
        run: npm install -g pnpm
      
      # 安装前端依赖
      - name: Install frontend dependencies
        run: pnpm install
      # 构建应用
      - name: Build the app
        uses: tauri-apps/tauri-action@v0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tagName: ${{ github.ref_name }}
          releaseName: 'XTools v__VERSION__'
          releaseBody: 'See the assets to download and install this version.'
          releaseDraft: true
          prerelease: false

我大概解释一下整个脚本的意思。

  • 名称和触发条件
name: Build and release
on:
  push:
    branches: [feature-testci]
  workflow_dispatch:

这个工作流的名称是 "Build and release"。它会在两种情况下触发:

  • 当推送的分支为 feature-testci 时
  • 通过手动触发(workflow_dispatch)
  • 作业定义
jobs:
  release:
    permissions:
      contents: write
      actions: write
      attestations: write
      deployments: write
      packages: write
      id-token: write
    strategy:
      fail-fast: false
      matrix:
        platform: [macos-latest, windows-latest]
    runs-on: ${{ matrix.platform }}

定义了一个名为 "release" 的作业。权限有6个写的权限,使用矩阵策略在 macOS 和 Windows 最新版本上运行。

  • 步骤:
  • 检出仓库:使用 actions/checkout@v4 action 来获取代码。
  • 设置 Rust 环境:使用 dtolnay/rust-toolchain@stable 来设置稳定版的Rust。
  • Rust 缓存:使用 swatinem/rust-cache@v2 来缓存Rust依赖,加速后续构建。
  • 设置 Node环境:使用 actions/setup-node@v4 来设置最新的LTS版本Node.js。
  • 安装 pnpm:全局安装pnpm包管理器。
  • 安装前端依赖:使用 pnpm安装项目的前端依赖。
  • 构建应用:使用 tauri-apps/tauri-action@v0 来构建Tauri应用。这一步也负责创建GitHub release,上传构建的应用作为release资产。
  • 发布配置:
env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
  tagName: ${{ github.ref_name }}
  releaseName: 'XTools v__VERSION__'
  releaseBody: 'See the assets to download and install this version.'
  releaseDraft: true
  prerelease: false

这部分配置了发布的详细信息,包括使用的 GitHub 令牌、标签名、发布名称、发布说明等,这里用作测试,创建一个草稿版本,不是预发布版本。

如果一切顺利的话,当你push feature-testci 这个分支的时候会出现如下两张图:

一张图是Action的构建过程,两个平台都构建完成了;一张图是生成的安装包,两个平台的包都有了。

常见问题

权限问题

其实这个里面有的时候会遇到一些问题,最主要的问题是权限的问题。GitHub 环境令牌,此令牌默认只有读取权限,在运行工作流时你可能会收到“Resource not accessible by integration”错误。

这个需要在设置里面配置相应的权限,在Action—General的最下方

生成应用的安全问题

CI/CD 生成的开源包一般都会被阻止打开,所以Windows 直接仍要运行就行,Mac 去隐私设置里面尝试再打开软件就可以,原因是没有证书签名的软件都会被拦截。

项目源码地址

https://github.com/Xutaotaotao/XTools/tree/feature-testci

结语

CI/CD 在前端开发中非常重要,本文简单的讲述了使用 CI/CD 自动构建发布 Tauri 桌面端应用的全过程,通过自动化的发布不仅能大大提高我们的发布效率,还能保证不同平台的一致性,如果是个人开发者或者开源项目,非常适合使用这种方式发布。

相关文章
|
运维 程序员 开发者
Docker凉了,国内镜像站全军覆没!
近期在使用Docker部署时,因网络问题导致镜像拉取失败。尽管尝试了阿里云、清华、中科大等国内镜像站均无效,最终找到仍可用的镜像源并分享解决方案。文中提供可正常访问的镜像地址及配置方法,帮助开发者快速恢复开发环境,解决燃眉之急。
6759 3
Docker凉了,国内镜像站全军覆没!
|
存储 Rust 前端开发
Tauri 开发实践 — Tauri 配置介绍
本文首发于微信公众号“前端徐徐”,主要讲解`package.json`、`Cargo.toml`及`tauri.conf.json`三个文件的配置。其中,`tauri.conf.json`最为复杂,涉及众多配置项。`package.json`用于配置前端依赖与脚本;`Cargo.toml`用于声明Rust应用依赖;`tauri.conf.json`则管理前端资源、API白名单等。这些配置对于Tauri应用的开发至关重要。
1537 5
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
20071 81
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
11月前
|
人工智能 Java API
Java Spring Boot 拥抱 AI 原生:从 API 调用到架构重构的进化之路
在AI时代,Java开发者需突破“调用API”的浅层模式,以Spring Boot为基石,推动从“菜单驱动”到“意图驱动”的范式变革。通过构建智能体为核心、工具化Service、记忆与安全可控的四层架构,结合工程化治理,实现AI原生应用的平滑演进。
415 0
|
Rust 前端开发 关系型数据库
Tauri 开发实践 — Tauri 集成本地数据库
本文介绍了在 Tauri 框架中集成本地数据库的几种方案,包括直接绑定 SQLite、使用第三方数据库库和使用 tauri-plugin-sql-api 插件。最终选择了 tauri-plugin-sql-api,因为它集成简单、支持多种数据库类型,并且与 Tauri 框架深度整合,提升了开发效率和安全性。文章详细介绍了如何安装和使用该插件,以及如何编写核心代码实现数据库操作。
1956 2
|
机器学习/深度学习 人工智能 自然语言处理
话说多模态大模型
多模态大模型是近年来人工智能的重要进展,能够处理和理解多种数据类型,如文本、图像、音频和视频。通过结合不同模态的信息,这些模型在图像识别、视觉问答、多模态检索和情感分析等场景中展现出强大的应用潜力。然而,数据标注、模态间协调和计算资源仍是其面临的挑战。未来研究将致力于提高模型效率和解释能力。
1620 3
|
设计模式 存储 缓存
C++ -- 单例模式
**摘要:** 单例模式确保一个类仅有一个实例,并提供全局访问点。为了实现单例,构造函数通常设为私有,通过静态成员函数来创建和返回实例。两种常见实现是饿汉模式(在类加载时创建实例,线程安全但可能导致不必要的内存占用)和懒汉模式(首次使用时创建,可能需线程同步)。拷贝构造函数和赋值运算符通常被禁用来防止额外实例的创建。单例模式适用于资源管理、缓存和线程池等场景。在C++中,静态成员变量和函数用于存储和访问单例实例,保证其生命周期与程序相同。
|
设计模式 前端开发 C#
WPF 项目中 MVVM模式 的简单例子说明
本文通过WPF项目中的加法操作示例,讲解了MVVM模式的结构和实现方法,包括数据模型、视图、视图模型的创建和数据绑定,以及命令的实现和事件通知机制。
|
安全 网络协议 5G
5G的核心协议有哪些?
【8月更文挑战第31天】
1973 0