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

# はじめに
## 前回記事
- https://qiita.com/Ritz/items/ecb4bc2d55a0d6967e6e
## 今回の記事を書くに至った理由
- 前回記事が古くなっている
- 人によっては動かない可能性がある
- docker tauri で検索したら一番上にきて恥ずかしい気持ちになった
- 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. 以下を末尾に追加する
    ```shellscript
    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 をいい感じに書く
    - [参考](https://www.tunamaguro.dev/articles/tauri-docker/)
    ```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 をいい感じに書く
    - [参考](https://www.tunamaguro.dev/articles/tauri-docker/)
    ```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 を起動する
1. WSL を起動する
2. docker-compose.yml を書いた階層に移動する
3. 以下のコマンドで 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
    ```
3. 以下の項目をそれぞれ入力する
    ```
    ✔ Project name · test(任意の名前を入れる、今回は test)
    ✔ Choose which language to use for your frontend · Rust - (cargo)
    ✔ Choose your UI template · Yew - (https://yew.rs/)
    ```
4. 以下のコマンドを入力して tauri アプリのディレクトリに移動する
    ```
    cd test
    ```
5. 以下のコマンドを入力して tauri アプリを起動する
    ```
    cargo tauri dev
    ```

# おまけ
## アプリをビルドして起動する
1. scr-tauri/tauri.conf.json の identifier を編集する(自分のメアドを逆にしたやつなど)
    ```json
    {
      "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
    ```
# 終わりに
- お疲れさまでした
- 読んでいただいてありがとうございます