はじめに

前回記事

• https://prgrm.work/archives/1238
  

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

• 前回記事が古くなっている
• 人によっては動かない可能性がある
• XLaunch を使用しないでよくなった

環境構築

参考記事

• https://www.tunamaguro.dev/articles/tauri-docker/
• https://www.tunamaguro.dev/articles/docker-gui-setting/
• https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/gui-apps

1.WSL のアップデート

• ここが一番大事まである
  1. Windows Powershell を管理者モードで起動する
  2. 以下のコマンドを入力して WSL を更新する

     wsl --update

  3. 以下のコマンドを入力して 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 の環境変数設定

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

   sudo vim ~/.bashrc

3. 以下を末尾に追加する

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

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

      sudo apt install x11-apps

   2. 以下のコマンドで GUI アプリを起動する

      xeyes

      ---

3. Docker container の構築

1. 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 で使うため必要となる

2. 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 を起動する

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

   docker-compose up -d

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

5. Tauri を起動してみる

1. 以下のコマンドを入力して docker container を起動する

   docker exec -it rust_todo bash

   • Docker Desktop から WSL 上の Docker にアクセスできるように設定しておけば Windows 上からでも同様に起動できる
2. 以下のコマンドを入力して GUI アプリを起動してみる(無視してもよい)

   xeyes

3. 以下のコマンドを入力して tauri のアプリを初期化する

   cargi create-tauri-app

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

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

5. 以下のコマンドを入力して tauri アプリのディレクトリに移動する

   cd test

6. 以下のコマンドを入力して tauri アプリを起動する

   cargo tauri dev

おまけ

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

1. 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"
         ]
       }
     }
   }

2. 以下のコマンドを入力してビルドする

   cargo tauri build

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

   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

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

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

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

   test

   終わりに

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