Webサーバーで公開していた資材(html, js)をTAURIで配布する

HTMLやJSで構成されたXHRを行うWebアプリをローカルで実行できるようにGitHub Actionsでtauriで固めて配布するという話です。

TAURI とは

Webのフロントエンド技術を使ってデスクトップアプリケーションを作れるフレームワークです。

今までであれば、Electronがその役を担っており、mattermostなどのクライアントアプリはElectron製でした。

Electronが動く仕組みとしては、配布ファイルにChromiumが同梱されており、それがフロントエンドの描画だったりバックエンドとの通信を行うものでしたが、 それには ブラウザが同梱されるゆえの配布サイズの肥大 といった問題がありました。

一方TAURIでは、スマホOSではお馴染みの「WebView」を使って描画や通信を行います。つまり、ユーザーが準備したブラウザを使用するので、配布ファイルは小さくなる利点があります。

フロントエンドだけの配布にも使える

TAURIもElectronも、Webフロントエンドのノウハウを活用しつつ、バックエンドと組み合わせることでローカルのファイルを操作したりといったデスクトップアプリを作れるものですが、 バックエンド実装はマストではないので、既存のサーバーに対して通信するフロントエンドのみを配布するのにも使用することができます。

今回はその方法をご紹介します。よってTAURIを使うとは言ってもRustの知識は不要です。

手順

今回は app-uc-unit-manager という、Personiumというサーバーのファイルマネージャアプリ（HTML + jQuery）をTAURIで配布できるようにしてみます。

github.com

GitHub Actionsでビルドする

TAURIを利用するにはRustの環境を準備する必要があって・・・と、二の足を踏んでいる人もいるかもしれませんが、 tauri-action は GitHub Actions を使って TAURI アプリケーションをビルドできるとっても便利なactionです。

しかも、TAURIアプリのビルド用のファイルが無ければ自動で生成してくれる便利機能付きです。

tauri-action の使い方

使い方はGitHubのリポジトリを見てください。

github.com

tauri-action を使ってハマったポイント

ハマったポイントを書いていきます。

identifier の設定エラー

2022年5月25日現在、以下のエラーが出ます

Error You must change the bundle identifier in tauri.conf.json > tauri > bundle > identifier. The default value com.tauri.dev is not allowed as it must be unique across applications.

コチラについては既に対処されていて（Commit ee5ed527812fe6037c0dd322649f1c9d93d4325e）、tauri-actionを実行するときに bundleIdentifier オプションを設定すればよいみたいです。 公式のチュートリアルに加筆して以下のように設定しました。

      - uses: tauri-apps/tauri-action@ee5ed527812fe6037c0dd322649f1c9d93d4325e
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tagName: app-v__VERSION__
          releaseName: "App v__VERSION__"
          releaseBody: "See the assets to download this version and install."
          releaseDraft: true
          prerelease: false
          distPath: ../dist-tauri
          bundleIdentifier: 'io.personium.app-uc-unit-manager'

distPathがわかりづらい

Webフロントエンドの生成物が格納されているフォルダを指定するオプション distPath ですが、それの仕様がわかりづらかったです。

自分の例では、 dist-tauri というディレクトリをリポジトリの直下に掘っておいて、そこに同梱したいHTMLやJSの資材を配置してactionを実行することで同梱させていました。

なので distPath には安直に dist-tauri とか ./dist-tauri と書いていたのですが、以下のようなエラーが出てしまいました。

Error running CLI: Unable to find your web assets, did you forget to build your web app? Your distDir is set to ""./dist_tauri"".

actionで実行されているコマンドを手でたたいてみると、以下のようなことがわかりました。

• actionの中で src-tauri というフォルダが作成される
• distPath の値はどうも src-tauri フォルダの tauri.conf.json の distDir に該当するらしい
• tauri.conf.json の distDIr には src-tauri からの相対パスで指定する

よって、distPath には ../dist-tauri と記載するのが正しかったようです。

完成！

リリースに実行可能ファイルが

インストーラー

app-uc-unit-manager起動

終わりに

tauri-action を既存のWebサイトに対して適用することで、Webサーバーをローカルに立てなくても外部と通信可能な状態で配布できるようになりました。

ただ、スクリーンショットにもある通り、インストーラー（MSI）形式となってしまって利用のハードルはElectronでビルドしたものよりも高くなってしまった気がします。MSIではなくexeで配布する方法もあるとは思うんですが、そうなると依存関係を手動で構築してもらう必要があるのでちょっと大変かななどと思います。