はじめに
Rustを勉強するにあたり、スマホアプリ作ってみるか～と思ってTauriに手を出したら環境構築でまあまあ苦しみました。私的な備忘録として、正解のプロセスを簡単に残しておきます。
環境
- Windows11
- WSL2 Ubuntu 22.04.3 LTS
特に断りが無い限り、本記事で登場するShellコマンドはすべてUbuntu上のものです。WindowsやMacOSの方もある程度は参考になるかも...？
インストール
Node.js
詳しくはこちらの記事を。コマンドだけ要約するとこんな感じです。
# node.jsとnpmをインストール
sudo apt install -y nodejs npm
# しかしこれはUbuntu標準で古いので、バージョン管理ツール"n"をインストール
sudo npm install n -g
# 最新版をインストール
sudo n stable
# 最初にインストールした古いバージョンをアンインストール
sudo apt purge -y nodejs npm
sudo apt autoremove -y
# node.jsとnpmをそれぞれバージョン確認
node -v
npm -v
Rust
詳しくはこちらの記事を。特に拘りが無いのであれば、以下を実行してEnterキー連打でOKです。
curl https://sh.rustup.rs -sSf | sh
最後に「cargoのbinディレクトリを環境変数に追加してね」と言われるので、ホームディレクトリの.profileファイル（無ければ新規作成）に以下を書き足します。
export PATH=$PATH:/home/asumo/.cargo/bin
上の記事ではターミナルからコマンドで追加する方法が紹介されており、まあどちらでも良いんですが、後ほど似たような操作が必要になるので本記事では直接書き込む方法を採用しています。
tauri-cli
cargoコマンドでtauri-cliというツールをインストールします。
cargo install tauri-cli
本記事ではJavaScriptのパッケージにnpmを使いますが、pnpmやyarnを使いたい場合はこのタイミングでインストールしておくのが良いようです。ただしコマンドが若干変わってくるので注意してください。
バージョン確認
無事にインストールできたか確かめるためにバージョン表示を実施します。ツールによって-vと-Vを使い分けます（なんで？）。
rustc -V
node -v
npm -v
cargo-tauri -V
もし「見つかりません」的なことを言われたら、当該のフェーズをもう一度確認してみましょう。
追加のインストールなど
プロジェクトの作成
cdコマンドで任意のディレクトリ（私はホームディレクトリにしました）に移動して、
npm create tauri-app
を実行します。これによりcreate-tauri-app@X.X.Xなるツールがインストールされます。
?で始まる行は質問なので、適宜答える必要があります。
とりあえず以下のように回答することにします。
- Project name: hoge
- package manager: npm
- UI template: react
全てに回答し終えると、現在のディレクトリ直下にhogeなるディレクトリが新たに作成されます。また、複数行にわたるメッセージの中にこんな表記が出ているはずです。
Done, Now run:
cd hoge
npm install
npm run tauri dev
やったー！と思ってこの通りに進めて、私は壁にぶち当たりました。
必要なパッケージ類
こちらの記事を参照しました。上述のDone, Now run:のメッセージ通りに実行して都度エラーメッセージを読んでも良いのですが、先人に肖って先回りしましょう。以下を順に実行します。
sudo apt install libsoup2.4-dev
sudo apt-get install javascriptcoregtk-4.1 libsoup-3.0 webkit2gtk-4.1 -y
sudo apt-get install libjavascriptcoregtk-4.0-dev
sudo apt install libwebkit2gtk-4.0-dev
これで一通り揃ったはずなので、満を持して以下を実行します。
Done, Now run:
cd hoge
npm install
npm run tauri dev
npm installにかなり時間がかかると思いますが、これはそういうものなので気長に待ちましょう。問題はnpm run tauri devで、ラッキーな方は何かしらTauriのウィンドウが開くものと思います。しかしながらcannot open display:と表示された方にはDLCが待っています。
ディスプレイ設定
こちらの記事を参照しました。詳しいことは私も理解していませんが、WindowsとWSLの間でディスプレイ設定をする必要があるようです。
.bashrcファイルの設定
さっきの.profileファイルと同じ要領で、ホームディレクトリの.bashrcファイルに
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0
と追記します。
VcXsrvのインストール
ここでVcXsrvなるものをWindows側にインストールします。
デフォルト設定のままインストールを完了すると、デスクトップ画面にXLaunchなるショートカットが作成されます。名前が違ってややこしいですが、こいつがVcXsrvです（そうなのか？）。
立ち上げて次へを2回選択すると、Extra settingsの画面になります。ここでAdditional parameters for VcXsrvの欄に-ac -nowglと入力します。
さらに次へを選択するとFinish configurationの画面になります。PCを起動するたびに今のような設定をするのは面倒なので、Save configurationをクリックして"C:\Users\username\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup"のフォルダにconfig.xlaunchを保存して完了です。
エラーウィンドウが表示されるかもしれませんが、無視して閉じて、一度PCを再起動します。
動作確認
またUbuntuを立ち上げて、以下を実行します。
Done, Now run:
cd hogehoge
# npm install はもう不要です
npm run tauri dev
何かしらウィンドウが立ち上がったらゴールです、お疲れ様でした。
備考など
私も随分と遠回りをしたので、文中で何かしら抜けている可能性があります。必要に応じてご指摘ください。