Zenn
🐳

Tauriでデスクトップアプリ開発に挑戦

に公開
Docker
Rust
WSL
Tauri
devcontainer
tech

はじめに

新年あけましておめでとうございます。
前回の投稿からバタバタしていてなかなか手が付けれず久しぶりの投稿になりました。
今回はGameEngine開発の息抜きに、自分のバイト先がシフトの管理を手書きで作成や修正を行っていたので、ちょっとでも助けになるようなデスクトップアプリケーションを作成しようと思い、Tauriに挑戦する話です。

今回やること

今回は開発環境の構築をします
環境にはWSLを使用し今回はDockerにチャレンジしてみようと思います

  • WSLのディストリビューション:Ubuntu-24.04.1LTS
  • ホストのOS：Windows
    • エディション：Windows 11 Pro
    • プロセッサ:Corei7-12700KF
    • RAM:32GB
  • IDE:VSCode

まずはディストリビューション選びから

今回の詰まったポイントの一つであるディストリビューション選び
自分は、はじめUbuntuのLTSならどれでもいいのかなと軽い気持ちでインストールしましたが、
WSLGなるものとの相性が悪いのか、GUIを表示できず苦しんだのち一番左のUbuntuとだけ書かれているものをinstallするとXServerなどを使わずともうまくいったので、お勧めです。

あとは、インストールしたUbuntuのアプリケーションを立ち上げてUserとパスワードの設定をするだけです。
今回はあくまでTauriのお話がメインなので細かいところは、割愛します

DockerのインストールとDevcontainer

Dockerのインストール

公式ドキュメント通りにやれば、うまくいくはずです
https://docs.docker.com/engine/install/ubuntu/

Devcontainerの作成

Devcontainerについて簡単に説明すると、Docker環境＋VSCodeの拡張機能などの設定を、チーム全体で共有できるようにするものです。
作成方法は、カレントディレクトリに.devcontainerフォルダを作成してその中に、devcontainer.jsonを配置するだけです
今回自分が作成したdevcontainer.jsonとDockerfileはこちらです

devcontainer.json
{
   "name": "ShiftBuilder",
   "build":{
        "dockerfile": "Dockerfile"
   },
   "remoteUser": "vscode",
   "mounts": [
        "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached"
    ],
    "features": {
        "ghcr.io/devcontainers/features/node:1": {
            "version": "20"
        },
        "ghcr.io/devcontainers/features/rust:1": {
            "version": "1.81.0",
            "profile": "minimal"
        }
    },
    "postCreateCommand": "/bin/sh ./.devcontainer/setup.sh"
}
Dockerfile
FROM mcr.microsoft.com/devcontainers/base:jammy

RUN sudo apt update

RUN sudo apt-get update

RUN sudo apt install libsoup2.4-dev -y

RUN sudo apt-get install javascriptcoregtk-4.1 libsoup-3.0 webkit2gtk-4.1 -y

RUN sudo apt-get install libjavascriptcoregtk-4.0-dev -y

RUN sudo apt install libwebkit2gtk-4.0-dev -y

RUN sudo apt install librsvg2-dev -y

#日本語入力用の設定
RUN apt-get update \
    && apt-get install -y language-pack-ja-base language-pack-ja fonts-noto-cjk fcitx-mozc \
    && im-config -n fcitx

ENV GTK_IM_MODULE=xim \
    QT_IM_MODULE=fcitx \
    XMODIFIERS=@im=fcitx \
    DefalutIMModule=fcitx

RUN locale-gen ja_JP.UTF-8  
ENV LANG=ja_JP.UTF-8 \
    LC_ALL=ja_JP.UTF-8
setup.sh
cargo install tauri-cli
npm install -g npm@11.0.0

簡単に解説すると

  • devcontainer.json

    • 開発環境の名前を"ShiftBuilder"と設定。
    • Dockerfileを使用して環境を構築。
    • RustとNode.jsの環境を追加。
    • 初回起動時にsetup.shを実行してTauri CLIやnpmの最新バージョンをインストール。

  • Dockerfile

    • ベースイメージにUbuntu 22.04（jammy）を使用。
      現在TauriではUbuntu24でも動くが、依存関係の解決などにすごく手間がかかるので2025年現在ではUbuntu22をお勧めします
      一応解決方法はこちらに書いてありました
      https://github.com/tauri-apps/tauri/issues/9662
    • Tauriの依存関係（libsoup, javascriptcoregtkなど）をインストール。

  • setup.sh

    • RustのTauri CLIをインストール
    • npmの現在の最新バージョンをインストール。

Tauriの初期化

今回の開発環境の作成の山場は超えました！
あとはTauriを初期化するだけです。

今回は、フロントエンドにReact,言語にTypescriptを使用し、パッケージマネージャは、npmを使用します。もちろんバックエンドはRustです。

まずこのコマンドを実行し、アプリケーションのテンプレートを作成します。

npm create tauri-app

対話型のコンソールになると思うので、先ほどの環境を指定していきます。

次に、

Template created! To get started run:
  cd ShiftBuilder
  npm install
  npm run tauri android init

For Desktop development, run:
  npm run tauri dev

For Android development, run:
  npm run tauri android dev

このように出てきたらこの指示に従っていきます。今回はAndroidは実装しないので無視します。

  1. 作業ディレクトリを作成したプロジェクトのディレクトリに移動
  2. npm installを実行 時間がかかるので持ちましょう
  3. npm run tauri devを実行ビルドが終わり下の画像が出たら成功です！！お疲れさまでした

最後に

今回は、WSL上にDockerを使用しTauriの開発環境を作成しました。
やっぱり環境構築は、楽しいですね。
しかし、公式ドキュメントに従ってもすんなりできないあたり、まだまだTauriは発展途上なのかなーと思ってしまいます。
試み自体は、すごく面白くてRustの可能性をぶち上げてくれそうなので、今後にすごく期待しています。
次回からは、本格的にTauriのほうに触れていこうと思います。

参考

https://zenn.dev/hkthirano/articles/122b36a6585120

https://gihyo.jp/article/2022/10/rust-monthly-topics-02

https://codezine.jp/article/detail/20539

公式ドキュメント
https://v2.tauri.app/

Discussion