Rust 版 Electron の Tauri に入門する。プロジェクトのひな形を作るところまで。

前提

OS: Windows 11 Pro 21H2 ビルド 22000.556
Docker: Docker version 20.10.12, build e91ed57
WSL2 Kernel: 5.10.60.1-microsoft-standard-WSL2
WSLg で GUI アプリが実行できること
- See: Ubuntu 20.04 on WSL2 で GUI アプリケーション(mikutter) を動かす - mikoto2000 の日記
- See: Windows の Docker Desktop で、 GUI アプリを動かす - mikoto2000 の日記

node のコンテナを起動

WSL2 上の Ubuntu で、以下コマンドを実行。

docker run -it --rm -v "$(pwd):/work" --workdir "/work" --name node \
    -e  DISPLAY=:0 \
    -e  WAYLAND_DISPLAY=wayland-0 \
    -e  XDG_RUNTIME_DIR=/tmp/wslg/runtime-di \
    -e  PULSE_SERVER=/mnt/wslg/PulseServer \
    -v /tmp/.X11-unix:/tmp/.X11-unix \
    -v /mnt/wslg:/mnt/wslg \
    -v $HOME/.cargo:/home/node/.cargo \
    node bash

Docker Desktop で GUI を動かすために必要な設定
- -e DISPLAY=:0
- -e WAYLAND_DISPLAY=wayland-0
- -e XDG_RUNTIME_DIR=/tmp/wslg/runtime-di
- -e PULSE_SERVER=/mnt/wslg/PulseServer
- -v /tmp/.X11-unix:/tmp/.X11-unix
- -v /mnt/wslg:/mnt/wslg
Cargo からダウンロードしたものをキャッシュするディレクトリをマウントすることで、次回以降のプロジェクト作成時間短縮を図る
- -v $HOME/.cargo:/home/node/.cargo

Tauri の環境構築

システムの依存を apt コマンドでインストール

apt update
apt install -y libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    libssl-dev \
    libgtk-3-dev \
    libappindicator3-0.1-cil-dev \
    librsvg2-dev

node ユーザーへ切り替え

パッケージのインストールが完了したので、ここからは node コンテナに既に存在している node ユーザーで作業を行う。

su node

Rust のインストール

以下コマンドを実行し、インストーラーの指示に従ってインストール。

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs -o rustup-setup.sh
chmod u+x rustup-setup.sh
./rustup-setup.sh -y

インストールが完了したら、以下コマンドで rust 関連コマンドにパスを通す。

source $HOME/.cargo/env

Tauri アプリの作成

create-tauri-app コマンドで Tauri アプリのひな形を作る。

今回は、 Vanilla.js で作成。

# npx create-tauri-app
Need to install the following packages:
  create-tauri-app
Ok to proceed? (y) y

We hope to help you create something special with Tauri!
You will have a choice of one of the UI frameworks supported by the greater web tech community.
This tool should get you quickly started. See our docs at https://tauri.studio/

If you haven't already, please take a moment to setup your system.
You may find the requirements here: https://tauri.studio/docs/getting-started/setting-up-linux/

Press any key to continue...
? What is your app name? tauri-app-firststep
? What should the window title be? Tauri App Firststep
? What UI recipe would you like to add? Vanilla.js (html, css, and js without the bundlers)
>> Running initial command(s)
>> Installing any additional needed dependencies

added 2 packages, and audited 3 packages in 3s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

added 3 packages, and audited 6 packages in 5s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
>> Updating "package.json"
>> Running "tauri init"

> tauri
> tauri "init" "--app-name" "tauri-app-firststep" "--window-title" "Tauri App Firststep" "--dist-dir" "../dist" "--dev-pa
th" "../dist"

>> Updating "tauri.conf.json"
>> Running final command(s)

    Your installation completed.

    $ cd tauri-app-firststep
    $ npm install
    $ npm run tauri dev

Tauri アプリの実行

cd tauri-app-firststep
npm install
npm run tauri dev

これで、 Tauri アプリが起動する。

今回の手順を元に作った Docker イメージを以下に作成した。

以上。

mikoto2000 の日記

2022年3月22日火曜日

Docker の node コンテナで Tauri アプリに入門する

前提