catalinaの備忘録

ソフトウェアやハードウェアの備忘録。後で逆引きできるように。

tauriを試してみる

お久しぶりです。tauriというものを試してみようと思います。かたりぃなです。

tauriとはweb技術を使ってデスクトップアプリを開発するフレームワーク的なやつらしいです。 https://tauri.app/

似たような話でelectronがありますが、electronはブラウザ(Chromium)を内包しているのに対し、tauriはwebviewを使うという点が違うらしいです。

どうしてtauri?

一年ほど前からUWPをひっそりと縮小していくという話がありました。SDKが変わるのはよくある話なのですが、果たしてこのまま付いていっていいのかなという疑問が自分の中で出てきました。

私はHololensのアプリを作るためにUnityとUWP(C++/CX, +DirectX)から入りましたが、C++/CXは終了しWinRTになりました。 DirectXもバージョンアップを繰り返していて、大昔にDirectX5を触ったころは固定機能パイプラインだけだったのですが、DirectX11ではシェーダーを自力で書く必要があって、楽しいながらも骨の折れる作業だった記憶があります。

そしてUWP縮小の話を見ていると、このまま趣味でMS技術を追っていくことは時間リソース的に不可能なのではと思い始めました。もっと効率のいい開発方法が欲しいわけで、最近のデスクトップアプリ開発ってどんなだろうと見てるとtauriがあがってきたわけです。

RustとJSという組み合わせも、ちょうど興味があったところです。

Rustについて色々調べてみたところ、Linuxカーネル側にも利用していくくらいに信頼ができてきています。 また、tauriの技術要素であるJavascriptに関して言えば、3Dレンダリングくらいは普通にできて、ライブラリも充実しています。 となれば、まあ趣味でやっていくぶんにはこれでいいんじゃないかなと思った次第です。

開発環境を作る

Windowsの開発環境づくりというのはいつもはVisualStudioに任せっきりだったので、実際どういう構成にするのが正解なのかよくわかりません。 たぶんマニュアル通りにやれば行けそうな気がしますが、自信ないです。

開発環境づくりで躓いて諦めるという王道パターンは踏みたくないので、慣れてる環境を拡張する方向でいきます。

幸いXWindowシステムといってGUIを転送する手段があります。 雑にいうとアプリケーション単位でのリモートデスクトップみたいなものです。

Linux上でtauriアプリを起動し、その画面をXWindowシステムでWindowsに転送してみることにします。

環境は以下の通りです。

  • ホストOS : WIndows10 pro
  • W-Windowサーバ : vcxsrv
  • 仮想環境 : Docker Desktop for windows
  • エディタ : VS-code

vcxsrv(https://sourceforge.net/projects/vcxsrv/)はあらかじめwindowsにインストール済みとします。

dockerでLinux環境を作る

作業ディレクトリを作ってVS-codeで開き、2つのファイルを作ります。 - dockker-compose.yml - docker/app.dockerfile

それぞれのファイルの中身は以下のようにします。

app.dockerfile

FROM ubuntu:latest

ENV DEBIAN_FRONTEND noninteractive

RUN sed -i.org -e 's|ports.ubuntu.com|jp.archive.ubuntu.com|g' /etc/apt/sources.list \
    && apt-get update && apt-get install -y \
        # xwindow
        x11-apps \
        # node.js
        curl nodejs npm \
        # TAURI
        libwebkit2gtk-4.0-dev build-essential wget libssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

# Rust install
ENV RUST_HOME /usr/local/lib/rust
ENV RUSTUP_HOME ${RUST_HOME}/rustup
ENV CARGO_HOME ${RUST_HOME}/cargo
RUN mkdir /usr/local/lib/rust && \
    chmod 0755 $RUST_HOME
RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs > ${RUST_HOME}/rustup.sh \
    && chmod +x ${RUST_HOME}/rustup.sh \
    && ${RUST_HOME}/rustup.sh -y --default-toolchain nightly --no-modify-path
ENV PATH $PATH:$CARGO_HOME/bin

docker-compose.yml

version: '3'
services:
  rust:
    build: 
      context: ./docker
      dockerfile: app.dockerfile
    tty: true
    environment:
      - CARGO_BUILD_TARGET_DIR=/work/rust-targetdir
    volumes:
      - ./project-dir:/work/project-dir
      - node_volume:/work/project-dir/node_modules
      - rust_volume:/rust-targetdir

volumes:
  node_volume:
    driver: local
  rust_volume:
    driver: local

あとは docker-compose build すればOKです。

中に入って作業するために、VS-codeの「Ctrl+Shift+P」から remote-container: open folder in container で開いて作業していきます。

ここからはdockerコンテナ上での作業になります。

xwindowの動作確認

起動したらまずxwindowの動作確認をします

windows側でxwindowサーバ起動し、設定画面で以下2つを設定しておきます。

  • Access Control=Disable」にチェック
  • AccessControlすぐ下のオプションパラメータに「-nowgl」を入力

xwindowサーバ起動後、vscode上のターミナルから

export DISPLAY=<windowsPCのIP>:0.0
xeyes

を入力し、Windows上にxeyesのアプリが表示されることを確認します。

tauriの環境構築

アプリを作る前に、追加モジュールのインストールをします。

cd /work/project-dir
cargo install tauri-cli
npm install -g yarn

jsのフレームワーク(vueとかreactとか)がうまく入らないことがあるのでnodeを最新版にします。 このあたりのことはまだよくわかってないです。

npm install -g n
n lts

tauriアプリを作る

これでやっとアプリを作れます。

cd /work/project-dir
yarn create tauri-app

色々質問が出るので、お好みで。今回はfrontはreact-js, backはrustにしました。

# yarn create tauri-app
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-tauri-app@3.1.2" with binaries:
      - create-tauri-app
✔ Project name · tauri-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm)
✔ Choose your package manager · yarn
✔ Choose your UI template · React - (https://reactjs.org/)
✔ Choose your UI flavor · JavaScript

Please follow https://tauri.app/v1/guides/getting-started/prerequisites to install the needed prerequisites, if you haven't already.

Done, now run:
  cd tauri-app
  yarn
  yarn tauri dev

Done in 13.38s.

ビルド前にやること

このままビルドするとめっちゃ時間かかります。 node-modulesをwindows側に見せると重くなるためです。

windows側に見せない設定のディレクトリを/work/project-dir/node-modulesに用意しているので、/work/project-dir/に作成したtauriアプリのコード一式をもってきます。

cd /work/project-dir
mv tauri-app/* .
mv tauri-app/.* .
rmdir tauri-app

やっとアプリを起動です。

  cd /work/project-dir
  yarn
  yarn tauri dev

tauriアプリが起動しました。 何かしらの物が出てくるとモチベーションあがりますね。 少しづつ色々ためしていこうと思います。

コードをざっと眺めてみると、 - srcディレクトリの下がjsで作られたui - src-tauriの下がrustで書かれたバックエンド

という構成のようです。

今回のポイント

単にビルドするだけですが、工夫しておかないと重くて使い物にならないということがわかりました。 具体的には

  • node_modulesはコンテナ内で閉じておく
  • rustの出力先もコンテナ内で閉じておく

の2つが今回のポイントです。

なお、rustのビルド成果物の出力先を変更しているので、デバッガの設定するときなどは気をつけないといけないかもしれませんね。

感想と今後の展望

アプリの開発環境ができたので色々試してみようと思います。 - Rustのデバッグ設定をする - CライブラリをRustから利用する - Windows向けリリースパッケージを作る - JSで画面を作っていってみる などなど、試してみたいことはたくさんあります。

それでは今回はこれくらいで。