tauri1.xのソースを2.xにし、androidのアプリとしてデバッグできるようにする #Tauri

tauriで、まだbetaでありながらandroid,iosアプリにできるようになっていたので、androidのアプリとしてビルドできるところまで試してみました

(また、tauriでビルドしたアプリも問題なくgoogleの審査を通すことができました
名前が公開されることを知らなかったので現在は非公開にしていますが...)

基本的には以下の二つだけでいいはずですがうまくいかなかったので、詰まった点も含めて書いていきます

0.環境
本来はwsl2上でビルドしたかったのですが、うまくいかなかったのでwindows上でビルドすることにしました

1.まず以下のコマンドを実行します

npm install @tauri-apps/cli@next @tauri-apps/api@next

2.次にsrc-tauri/Cargo.tomlに以下を追記します

src-tauri/Cargo.toml

[lib]
name = "app_lib"
crate-type = ["staticlib", "cdylib", "rlib"]

3.src-tauri/src/main.rs を src-tauri/src/lib.rsにリネームします

4.lib.rsのmain関数を以下のように書き換えます

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    // your code here
}

5.src-tauri/src/main.rsを作成し、以下の内容にします

src-tauri/src/main.rs

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
  app_lib::run();
}

6.以下のコマンドを実行し、プロジェクトをmigrateします

npm run tauri migrate

7.androidの開発環境を作り、エミュレーター上でデバッグできるようにします

npx tauri android init
npx tauri android dev

本来ならこれで正しくビルドできるはずですが、私のプロジェクトではうまくいかなかったので、追加でプロジェクトに変更を加えました

warning: output filename collision.

warning: output filename collision.
The lib target `app_lib` in package `proj_name v0.0.3 (D:\code\proj_name\src-tauri)` has the same output filename as the lib target `app_lib` in package `proj_name v0.0.3 (D:\code\proj_name\src-tauri)`.
Colliding filename is: D:\code\proj_name\src-tauri\target\x86_64-linux-android\debug\libapp_lib.rlib
The targets should have unique names.
Consider changing their names to be unique or compiling them separately.
This may become a hard error in the future; see <https://github.com/rust-lang/cargo/issues/6313>.

これはCargo.tomlのcrate-typeからrlibを消すとうまくいきました
しかし、なぜこれでうまくいくかは謎です...

src-tauri\Cargo.toml

- crate-type = ["staticlib", "cdylib", "rlib", "lib"]
+ crate-type = ["staticlib", "cdylib", "lib"]

自動migrationのスクリプトの問題？

/src/App.tsxでのimportがなぜか

import { invoke } from "core";

となっていたので、以下のように修正

import { invoke } from "@tauri-apps/api/core";

Warn Waiting for your frontend dev server to start on http://... で止まってしまう

まず、package.jsonに以下を追記します

package.json

/// ...
  "devDependencies": {
/// ...
+    "internal-ip": "^7.0.0"
  }
/// ...

そしてnpm iします

npm i

そしてvite.config.tsに以下を追記します

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
+ import { internalIpV4 } from "internal-ip";

+ const mobile = !!/android|ios/.exec(process.env.TAURI_ENV_PLATFORM);

export default defineConfig(async () => ({
  server: {
    // ...
+    host: mobile ? "0.0.0.0" : false,
+    hmr: mobile
+      ? {
+          protocol: "ws",
+          host: await internalIpV4(),
+          port: 1421,
+        }
+      : undefined,
+    watch: {
+      ignored: ["**/src-tauri/**"],
+    },
    
    // ...

}));