【05】Tauri 入门篇 - 跨平台编译
Tags: tauri, rust, web, desktop
Published: 2022-08-01 09:39:35

---
title: 【05】Tauri 入门篇 - 跨平台编译
published: true
description: 打造属于自己的下一代跨端应用
tags: tauri, rust, web, desktop
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntysfz398o4euuxpthn6.png
# Use a ratio of 100:42 for best results.
---

> 仓库：[lencx/OhMyBox](https://github.com/lencx/OhMyBox)
> 如果文章对你有所帮助，可以 [star](https://github.com/lencx/OhMyBox) 此项目，或转发给更多有需要的人。大家的支持也会给我更大的写作动力，感恩。

---

## 背景

Tauri 严重依赖原生库和工具链，因此目前无法在某一平台实现交叉编译。最佳选择是使用托管在 [GitHub Action](https://github.com/features/actions)、[Azure Pipelines](https://azure.microsoft.com/en-gb/services/devops/pipelines/)、[GitLab](https://docs.gitlab.com/ee/ci/index.html) 或其他选项上的 CI/CD 管道进行编译。管道可以同时为每个平台运行编译，使编译和发布过程更加容易。

为了便于设置，官方目前提供 [Tauri Action](https://github.com/tauri-apps/tauri-action)。这是一个 `GitHub Action`，可在所有支持的平台上运行，编译软件，生成应用程序安装包，并将发布到 [GitHub Releases](https://docs.github.com/en/repositories/releasing-projects-on-github/about-releases)。

## GitHub Action

> 从构思到生产，自动化工作流程

利用 GitHub Actions，在你的仓库中自动化、定制和执行你的软件开发工作流程。你可以发现、创建和共享操作，以执行你想要的任何工作，包括 CI/CD，并在一个完全定制的工作流程中组合操作。

## 使用 Action

### 创建 release.yml

在项目根路径下创建 `.github/workflows` 目录，在 `.github/workflows` 下创建 `release.yml`（文件名自定义） 文件。将以下内容复制到文件中：

```yml
# 可选，将显示在 GitHub 存储库的“操作”选项卡中的工作流名称
name: Release CI

# 指定此工作流的触发器
on:
  push:
    # 匹配特定标签 (refs/tags)
    tags:
      - 'v*' # 推送事件匹配 v*, 例如 v1.0，v20.15.10 等来触发工作流

# 需要运行的作业组合
jobs:
  # 任务：创建 release 版本
  create-release:
    runs-on: ubuntu-latest
    outputs:
      RELEASE_UPLOAD_ID: ${{ steps.create_release.outputs.id }}

    steps:
      - uses: actions/checkout@v2
      # 查询版本号（tag）
      - name: Query version number
        id: get_version
        shell: bash
        run: |
          echo "using version tag ${GITHUB_REF:10}"
          echo ::set-output name=version::"${GITHUB_REF:10}"

      # 根据查询到的版本号创建 release
      - name: Create Release
        id: create_release
        uses: actions/create-release@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tag_name: '${{ steps.get_version.outputs.VERSION }}'
          release_name: 'app ${{ steps.get_version.outputs.VERSION }}'
          body: 'See the assets to download this version and install.'
  
  # 编译 Tauri
  build-tauri:
    needs: create-release
    strategy:
      fail-fast: false
      matrix:
        platform: [macos-latest, ubuntu-latest, windows-latest]

    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@v2

     # 安装 Node.js
      - name: Setup node
        uses: actions/setup-node@v1
        with:
          node-version: 16

      # 安装 Rust
      - name: Install Rust stable
        uses: actions-rs/toolchain@v1
        with:
          toolchain: stable

      # 使用 Rust 缓存，加快安装速度
      - uses: Swatinem/rust-cache@v1

      - name: install dependencies (ubuntu only)
        if: matrix.platform == 'ubuntu-latest'
        run: |
          sudo apt-get update
          sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf

      # 可选，如果需要将 Rust 编译为 wasm，则安装 wasm-pack
      - uses: jetli/wasm-pack-action@v0.3.0
        with:
          # Optional version of wasm-pack to install(eg. 'v0.9.1', 'latest')
          version: v0.9.1

      # 可选，如果需要使用 rsw 构建 wasm，则安装 rsw
      - name: Install rsw
        run: cargo install rsw

      # 获取 yarn 缓存路径
      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"

      # 使用 yarn 缓存
      - name: Yarn cache
        uses: actions/cache@v2
        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      # 安装依赖执行构建，以及推送 github release
      - name: Install app dependencies and build it
        run: yarn && yarn build
      - uses: tauri-apps/tauri-action@v0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          releaseId: ${{ needs.create-release.outputs.RELEASE_UPLOAD_ID }}
```

具体可以参考 [OhMyBox/.github/workflows/release.yml](https://github.com/lencx/OhMyBox/blob/main/.github/workflows/release.yml)

### 触发 Action

> 使用 `GitHub Tag` 来触发 Action

```bash
# 创建 tag
git tag v0.1.0

# 推送 tag
git push --tag
```

![005-action-release](https://user-images.githubusercontent.com/16164244/175778548-43c4df93-f10b-4369-91bf-5a05051405f1.png)

![005-release](https://user-images.githubusercontent.com/16164244/175778949-efeb9c3e-6d0c-4a9b-bf8b-0cbe6e1789e9.png)

### 常见问题

#### Error: Resource not accessible by integration

`release.yml` 中的 GitHub 环境令牌​ `GITHUB_TOKEN` 由 GitHub 为每个运行的工作流自动颁发，无需进一步配置，这意味着没有秘密泄露的风险。但是，此令牌在默认情况下仅具有读取权限，在运行工作流时可能会收到 `Resource not accessible by integration`（资源无法通过集成访问）错误。如果发生这种情况，需要为此令牌添加写入权限。为此，请前往 GitHub 仓库 `Settings`，然后选择 `Actions`，向下滚动到 `Workflow permissions`（工作流权限）并选中 `Read and write permissions`（读取和写入权限）。

```bash
Settings -> Actions -> General -> Workflow permissions -> Read and write permissions
```

#### Action 意外终止

如果 Action 因某些原因（如缓存错误，依赖下载失败等）终止工作流，不需要重新创建 `tag` 来触发工作流，可以通过 `Re-run all jobs` 按钮来重新触发。