Win11+WSL2でTauriを始める

## はじめに

Rustを勉強するにあたり、スマホアプリ作ってみるか～と思ってTauriに手を出したら環境構築でまあまあ苦しみました。私的な備忘録として、正解のプロセスを簡単に残しておきます。

## 環境
- Windows11
- WSL2 Ubuntu 22.04.3 LTS

特に断りが無い限り、本記事で登場するShellコマンドはすべてUbuntu上のものです。WindowsやMacOSの方もある程度は参考になるかも...？

## インストール

### Node.js

詳しくは[こちらの記事](https://qiita.com/nanbuwks/items/ed8adb2d4324c939a349 "Linux 環境に Node.js インストール")を。コマンドだけ要約するとこんな感じです。

~~~shell:Ubuntu
# 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

詳しくは[こちらの記事](https://qiita.com/yoshiyasu1111/items/0c3d08658560d4b91431 "UbuntuにRustをインストールする")を。特に拘りが無いのであれば、以下を実行してEnterキー連打でOKです。
~~~shell:Ubuntu
curl https://sh.rustup.rs -sSf | sh
~~~

最後に「cargoのbinディレクトリを環境変数に追加してね」と言われるので、ホームディレクトリの`.profile`ファイル（無ければ新規作成）に以下を書き足します。
~~~bash:.profile
export PATH=$PATH:/home/asumo/.cargo/bin
~~~

*上の記事ではターミナルからコマンドで追加する方法が紹介されており、まあどちらでも良いんですが、後ほど似たような操作が必要になるので本記事では直接書き込む方法を採用しています。*

### tauri-cli

cargoコマンドでtauri-cliというツールをインストールします。
~~~shell:Ubuntu
cargo install tauri-cli
~~~
本記事ではJavaScriptのパッケージに`npm`を使いますが、`pnpm`や`yarn`を使いたい場合はこのタイミングでインストールしておくのが良いようです。ただしコマンドが若干変わってくるので注意してください。

### バージョン確認

無事にインストールできたか確かめるためにバージョン表示を実施します。ツールによって`-v`と`-V`を使い分けます（なんで？）。
~~~shell:Ubuntu
rustc -V
node -v
npm -v
cargo-tauri -V
~~~
もし「見つかりません」的なことを言われたら、当該のフェーズをもう一度確認してみましょう。

## 追加のインストールなど

### プロジェクトの作成

cdコマンドで任意のディレクトリ（私はホームディレクトリにしました）に移動して、
~~~shell:Ubuntu
npm create tauri-app
~~~
を実行します。これにより`create-tauri-app@X.X.X`なるツールがインストールされます。

`?`で始まる行は質問なので、適宜答える必要があります。
とりあえず以下のように回答することにします。

- Project name: hoge
- package manager: npm
- UI template: react

全てに回答し終えると、現在のディレクトリ直下に`hoge`なるディレクトリが新たに作成されます。また、複数行にわたるメッセージの中にこんな表記が出ているはずです。
~~~shell:Ubuntu
Done, Now run:
    cd hoge
    npm install
    npm run tauri dev
~~~

やったー！と思ってこの通りに進めて、私は壁にぶち当たりました。

### 必要なパッケージ類

[こちらの記事](https://qiita.com/UBinKitte/items/84ff2565b8b0d3601e4a "UbuntuのRustでTauriを使おうと思ったら手こずった話")を参照しました。上述の`Done, Now run:`のメッセージ通りに実行して都度エラーメッセージを読んでも良いのですが、先人に肖って先回りしましょう。以下を順に実行します。

~~~shell:Ubuntu
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
~~~

これで一通り揃ったはずなので、満を持して以下を実行します。
~~~shell:Ubuntu
Done, Now run:
    cd hoge
    npm install
    npm run tauri dev
~~~

`npm install`にかなり時間がかかると思いますが、これはそういうものなので気長に待ちましょう。問題は`npm run tauri dev`で、ラッキーな方は何かしらTauriのウィンドウが開くものと思います。しかしながら`cannot open display:`と表示された方にはDLCが待っています。

## ディスプレイ設定

[こちらの記事](https://zenn.dev/naonaorange/articles/20210519_wsl_ubuntu#x-server%E3%81%A8%E3%81%97%E3%81%A6vcxsrv%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB "X ServerとしてVcXsrvをインストール")を参照しました。詳しいことは私も理解していませんが、WindowsとWSLの間でディスプレイ設定をする必要があるようです。

### .bashrcファイルの設定

さっきの`.profile`ファイルと同じ要領で、ホームディレクトリの`.bashrc`ファイルに
~~~shell:.bashrc
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0
~~~
と追記します。

### VcXsrvのインストール

[ここ](https://sourceforge.net/projects/vcxsrv/ "SOURCEFORGE")で**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を立ち上げて、以下を実行します。

~~~shell:Ubuntu
Done, Now run:
    cd hogehoge
    # npm install はもう不要です
    npm run tauri dev
~~~

何かしらウィンドウが立ち上がったらゴールです、お疲れ様でした。

## 備考など

私も随分と遠回りをしたので、文中で何かしら抜けている可能性があります。必要に応じてご指摘ください。