Tauri v2を使ったモバイルアプリ開発のハマりポイント[Apple Silicon Mac]
8beeeaaat公式ドキュメント で明記されていないハマりポイントをメモしておきます。
注. 2024/03/12 現在の最新リリース & Rust (Cargo)のセットアップが完了していることを前提とします
create-tauri-app を使ってセットアップを開始します。
$ npm create tauri-app@latest -- --beta
-- オプションがとても大事。これを外すとv2としてセットアップされません。
v2としてセットアップが進行していれば最後にモバイル向けにセットアップを行うか確認されます。
✔ Would you like to setup the project for mobile as well? · yes
Template created! To get started run:
cd tauri-app
npm install
npm run tauri android init
npm run tauri ios init
For Desktop development, run:
npm run tauri dev
For Android development, run:
npm run tauri android dev
For iOS development, run:
npm run tauri ios dev
$ npm i && npm run dev でデスクトップアプリの開発版が立ち上がる。
ここまでは v1と同様。特に悩まず起動できるはず。
8beeeaaat続いてiOSビルド。
Xcodeのインストールとシミュレータのセットアップは事前に済ませておきましょう。
$npm run tauri ios init && npm run tauri ios dev するとXcodeのシミュレータに登録されている中からどれを利用するか聞かれます。
ここでは例として [5] iPhone 15 を選択してみます。
進行すると指定したシミュレータが起動してiOSが立ち上がります。
そのままiOSビルドが動作すると思いきや、
xcodebuild: error: Found no destinations for the scheme 'tauri-app_iOS' and action build.
Error command ["xcodebuild"] exited with code 70
ひゃあぁ。destinationが指定されていない？
おもむろに src-tauri/gen/apple/[% project %].xcodeproj からXcodeを立ち上げてみます。
なるほど、確かにビルドボタンが打消しアイコンになっている。
どうやら最新のシミュレータのインストールが必要。シミュレータは7GBほどあるのでひたすら待ちましょう。
インストール完了後。無事ビルドできそうな雰囲気を醸し出しているので、一度立ち上がったシミュレータをkillして再度 $ npm run tauri ios dev してみましょう。
（killしておかないと立ち上げたシミュレータとtauriが接続できずエラーとなります）
立ち上がりました。
Safariのdevtoolからも覗けますね。優勝です。
8beeeaaat続いてAndroid。
こちらもAndroid Studioなどのインストールやセットアップを済ませておきましょう。
おもむろに実行してみます。
$ npm run tauri android init && npm run tauri android dev
Error Have you installed the Android SDK? The `ANDROID_HOME` environment variable isn't set, and is required: environment variable not found: environment variable not found
環境変数が足りていない。 .zshrc あたりに
export ANDROID_HOME=~/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools
を追加してみます。
Error Have you installed the NDK? The `NDK_HOME` environment variable isn't set, and is required: environment variable not found: environment variable not found
今度は ndkの環境変数...。
Android Studioの Settings > Languages & Frameworks > Android SDK > SDK Tools タブから NDK / Android Emulatorあたりを選択してインストールしましょう。
NDKのインストールが完了すると % ls $HOME/Library/Android/sdk/ndk/ でインストールされたNDKのバージョンがわかります。
環境変数に export NDK_HOME=$HOME/Library/Android/sdk/ndk/26.2.11394342 といった形で NDK_HOME を追加します。（バージョンは環境に合わせてください）
これで起動できましたが、デスクトップ / iOS向けのdevサーバプロセスが立ち上がっているとポートの重複で怒られてしまいますので終了しておきましょう。
同一ソースで各種クライアント開発がHotReloadで出来る利点がスポイルされるので若干もにょりますが、そのうち解消されるでしょう...。まだbeta版ですしね。
問題なく立ち上がれば chrome://inspect/#devices など Chromium系のデバッグメニューからdevtoolを起動できます。優勝ですね。
8beeeaaat2024/03/16 現在
bun でセットアップするとiOSのビルドに失敗するので注意。
path設定に誤りが生じる為、ライブラリの生成に失敗する。
8beeeaaat2024/05/28 現在も状況は変わらず 😢
$ npm create tauri-app@latest -- --beta からのNPMでのパッケージ管理が現在でも鉄板かもしれません。
