Docker で Tauri の環境を構築する(yew,WSLg)

Last updated at 2024-07-09Posted at 2024-07-09

はじめに

前回記事

https://qiita.com/Ritz/items/ecb4bc2d55a0d6967e6e

今回の記事を書くに至った理由

前回記事が古くなっている
人によっては動かない可能性がある
docker tauri で検索したら一番上にきて恥ずかしい気持ちになった
XLaunch を使用しないでよくなった

環境構築

参考記事

1.WSL のアップデート

ここが一番大事まである

Windows Powershell を管理者モードで起動する
以下のコマンドを入力して WSL を更新する
```
wsl --update
```
以下のコマンドを入力して WSL のバージョンを確認する
```
wsl --version
```

出力(これ見せてもいいやつか...?)

WSL バージョン: 2.2.4.0
カーネル バージョン: 5.15.153.1-2
WSLg バージョン: 1.0.61
MSRDC バージョン: 1.2.5326
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.26091.1-240325-1447.ge-release
Windows バージョン: 10.0.19045.4598

なぜ一番大事だと書いたか

WSL のバージョンが古いと WSLg に対応していない
自分が WSL のバージョンについてスルーして最後につまずいたため

2. WSL の環境変数設定

WSL のターミナルを立ち上げる
以下のコマンドで ~/.bashrc を編集
```
sudo vim ~/.bashrc
```

以下を末尾に追加する

export DISPLAY=:0
export WAYLAND_DISPLAY=wayland-0
export XDG_RUNTIME_DIR=/mnt/wslg/runtime-dir
export PULSE_SERVER=/mnt/wslg/PulseServer

この時点でいったん WSL から GUI アプリが起動できるか確認する(やらなくてもいい)
1. 以下のコマンドで x11-apps をインストールする(Ubuntu22.04)
```
sudo apt install x11-apps
```
1. 以下のコマンドで GUI アプリを起動する
```
xeyes
```

3. Docker container の構築

Dockerfile をいい感じに書く

参考

FROM rust:latest

RUN apt update && \
    apt install -y vim clang cmake libssl-dev build-essential \
    libwebkit2gtk-4.0-dev curl wget libssl-dev libgtk-3-dev \
    libayatana-appindicator3-dev librsvg2-dev x11-apps

RUN rustup component add rls rust-analysis rust-src rustfmt clippy && \
    cargo install cargo-edit cargo-watch cargo-make sqlx-cli tauri-cli trunk && \
    rustup install nightly && \
    rustup target add wasm32-unknown-unknown
RUN cargo install create-tauri-app --locked

ENV RUST_BACKTRACE=1

上記で本当に必要になる apt package は以下となる

build-essential
libwebkit2gtk-4.0-dev
curl
wget
libssl-dev
libgtk-3-dev
libayatana-appindicator3-dev
librsvg2-dev
x11-apps(動作確認用)

trunk は yew で使うため必要となる

docker-compose.yml をいい感じに書く

参考

docker-compose.yml

version: "3.8"

services:
  rust:
    container_name: rust_todo
    env_file:
      - .env
    environment:
      - DISPLAY=$DISPLAY
      - WAYLAND_DISPLAY=$WAYLAND_DISPLAY
      - XDG_RUNTIME_DIR=/tmp
      - PULSE_SERVER=$PULSE_SERVER
    build: .
    tty: true
    volumes:
      - .:/workspace
      - type: bind
        source: /tmp/.X11-unix
        target: /tmp/.X11-unix
      - type: bind
        source: "${XDG_RUNTIME_DIR}/wayland-0"
        target: /tmp/wayland-0

4. Docker Container を起動する

WSL を起動する
docker-compose.yml を書いた階層に移動する
以下のコマンドで docker container を起動する
```
docker-compose up -d
```

Windows から WSL の環境変数をもってくる設定みたいなのを仕込めば docker-compose は Powershell などから実行してもよい

5. Tauri を起動してみる

以下のコマンドを入力して docker container を起動する
```
docker exec -it rust_todo bash
```
- Docker Desktop から WSL 上の Docker にアクセスできるように設定しておけば Windows 上からでも同様に起動できる
以下のコマンドを入力して GUI アプリを起動してみる(無視してもよい)
```
xeyes
```
以下のコマンドを入力して tauri のアプリを初期化する
```
cargi create-tauri-app
```

以下の項目をそれぞれ入力する

✔ Project name · test(任意の名前を入れる、今回は test)
✔ Choose which language to use for your frontend · Rust - (cargo)
✔ Choose your UI template · Yew - (https://yew.rs/)

以下のコマンドを入力して tauri アプリのディレクトリに移動する
```
cd test
```
以下のコマンドを入力して tauri アプリを起動する
```
cargo tauri dev
```

おまけ

アプリをビルドして起動する

scr-tauri/tauri.conf.json の identifier を編集する(自分のメアドを逆にしたやつなど)

{
  "build": {
    "beforeDevCommand": "trunk serve",
    "beforeBuildCommand": "trunk build",
    "devPath": "http://localhost:1420",
    "distDir": "../dist",
    "withGlobalTauri": true
  },
  "package": {
    "productName": "rust-todo-frontend",
    "version": "0.0.0"
  },
  "tauri": {
    "allowlist": {
      "all": false,
      "shell": {
        "all": false,
        "open": true
      }
    },
    "windows": [
      {
        "title": "test",
        "width": 800,
        "height": 600
      }
    ],
    "security": {
      "csp": null
    },
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.tauri.dev", <- ここを任意のものに変更(なるべく一意に?)
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    }
  }
}

以下のコマンドを入力してビルドする
```
cargo tauri build
```

ビルドの最後の出力ログからパスを確認する

Finished 3 bundles at:
/workspace/target/release/bundle/deb/test_0.0.0_amd64.deb
/workspace/target/release/bundle/rpm/test-0.0.0-1.x86_64.rpm
/workspace/target/release/bundle/appimage/test_0.0.0_amd64.AppImage

deb ファイルをインストールする

dpkg -i /workspace/target/release/bundle/deb/test_0.0.0_amd64.deb

起動してみる(test ってコマンドかぶってないよね...?)
```
test
```

終わりに

お疲れさまでした
読んでいただいてありがとうございます

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up