Closed6

Tauri v2を使ったモバイルアプリ開発のハマりポイント[Apple Silicon Mac]

8beeeaaat8beeeaaat

公式ドキュメント で明記されていないハマりポイントをメモしておきます。
注. 2024/03/12 現在の最新リリース & Rust (Cargo)のセットアップが完了していることを前提とします

https://github.com/tauri-apps/tauri/releases/tag/tauri-v2.0.0-beta.11
https://github.com/tauri-apps/create-tauri-app/releases/tag/create-tauri-app-v3.13.11

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
8beeeaaat8beeeaaat

$ npm i && npm run dev でデスクトップアプリの開発版が立ち上がる。
ここまでは v1と同様。特に悩まず起動できるはず。

8beeeaaat8beeeaaat

続いて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からも覗けますね。優勝です。

8beeeaaat8beeeaaat

続いて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を起動できます。優勝ですね。


8beeeaaat8beeeaaat

2024/05/28 現在も状況は変わらず 😢

$ npm create tauri-app@latest -- --beta からのNPMでのパッケージ管理が現在でも鉄板かもしれません。

このスクラップは2ヶ月前にクローズされました