はじめに
最近(私の中で)話題になっている GUI フレームワーク、Tauri。つい先日の 5 月 3 日には1.3.0
が発表されました。
そんな新しそうなものには、触ってみずにはいられないので今回はDocker
を使ってTauri
の環境づくりを行ってみます。
筆者の環境
- OS
- WSL(一部割愛)
- WSL バージョン: 1.0.3.0
- カーネル バージョン: 5.15.79.1
- WSLg バージョン: 1.0.47
- Distribution: Ubuntu 22.04
- Docker
- Docker Desktop 4.16.3
- Docker version 20.10.22
- Docker Compose version v2.15.1
最終的な構成
「俺は結果だけ知りたいんじゃ!」という方のために最終的な構成をここに置いておきます。
Tauri に必要な諸々の準備
Webkit などのインストール
今回は rust`の公式イメージをベースに作成します。公式サイトを見てみると C++コンパイラや Webkit 関連をインストールしなくてはならないようなので、これをインストールします。
https://tauri.app/v1/guides/getting-started/prerequisites#setting-up-linux
Node.js のインストール
続いてNode.js
もインストールします。これは前提条件に書かれていませんが、あとでVite
やNext.js
を使いたいのでここでもう入れておきます。
この段階でいったんコンテナを立ち上げて動かしてみます。
試しにRust
、Node.js
のバージョンを見てみます。
その他の設定
WSLg の設定
ここは Windows の方向けです。Mac や Linux の方は以下のような記事を見ながらやられるとうまくいくんじゃないかなと思います。
https://zenn.dev/hogenishi/articles/6bcffa389bcfb6
普通の Web 開発とは違い GUI を動かすためにWSLg
の設定を行います。
以前行ったようにDISPLAY
環境変数などをコンテナに渡します。
コンテナを起動しxeyes
を動かしてみます。
目玉が表示されていれば OK です。
開発用ユーザの追加
ちょっと蛇足ですがコンテナで利用しているユーザがroot
のために、すべて管理者権限で実行されるのが気に食わないので、開発用のユーザをここで追加しておきます。
sudo
は問題が起きるとつらそうなので必要なければ入れなくてもいいかもしれません
https://docs.docker.jp/engine/articles/dockerfile_best-practice.html#user
これは実施しなくとも問題ないと思います。もし、この設定を行う場合はコンテナをビルドしなおしておいてください。
Tauri のチュートリアルをやってみる
先ほどまでですべての準備が完了したので、実際にTauri
を動かしてみます。基本的には下の内容の通りに進め、これからのコマンドはすべてコンテナ内で実行します。
https://tauri.app/v1/guides/getting-started/setup/vite
公式がアプリを作るための scaffold を用意してくれているので、それを利用してアプリの雛形を生成します。今回は始めるのが簡単なReact
+Vite
で行きます。
表示されたコマンドの通りに実行します。はじめは諸々のインストールが行われるので時間がかかりますが、2 回目以降はかなり早く実行できます。
下のような画面が表示されれば成功です!
まとめ
本当はTauri Mobile
の実行もDocker
の中で行いたかったですがまだうまくいってません。
正直自己満足に近い記事ですが、誰かのお役に立てば幸いです。