この記事でTauri V2をベタ褒めしましたが実際には開発でつまづく所もあったので解決方法含めて備忘録として残しておきます。
img src="..."でローカルファイルが参照できない。
タイトルの通りです。
TauriではElectronと同じようにhtmlをアプリ内のローカルホストを使って表示しているのですが、このローカルホスト内からパス表記のローカルファイルは参照できません。
下記の記述ではTauriの画面上で画像がリンク切れになります。
<img src="path/to/aaa.png" />
以下のような感じでコンソールから怒られています。
localhost/:1 Not allowed to load local resource: file:///Path/to/AAA.png
解決するにはTauriの標準機能「convertFileSrc」を使ってファイルパスをURIに変換してあげる必要があります。
import { convertFileSrc } from '@tauri-apps/api/core';
ImageURL = await convertFileSrc('Path/to/AAA.png')
ただし、この処理だけではtauri devした時のデバッグ画面では正常に表示されるものの、リリースした.exe上では接続拒否のエラーが出てやはり表示されません。
Failed to load resource: net::ERR_CONNECTION_REFUSED
これはブラウザのCSP(コンテンツセキュリティポリシー)にローカルURIの画像が違反しているため、アクセスが拒否されているのが原因です。
解決するにはsrc-tauri/tauri.conf.jsonに以下の設定を追加します。
"app": {
"security": {
"csp": {
"img-src": "'self' asset: http://asset.localhost blob: data:"
},
"assetProtocol": {
"enable": true,
"scope": ["**"]
}
}
}
画像以外のCSP設定も公式ガイドに載っているので、動画や外部CSS等を読み込む際につまづいたら参考にしてみてください。
fsプラグインでファイルやパスの読み書きができない
プラグインを導入しimportして問題なく処理を実装したのに実際の画面上ではエラーを吐くことがあります。
import { readFile } from '@tauri-apps/plugin-fs';
const file = await readFile('path/to/aaa.txt')
エラーメッセージはこんな感じ
Uncaught (in promise) forbidden path: path/to/aaa.txt
これはプラグインの機能に適切な権限のスコープ設定がされていないのが原因です。
解決するにはsrc-tauri/capabilities/default.jsonに下記のような権限スコープを追加します。
"permissions": [
"core:default",
"fs:default",
{
"identifier": "fs:allow-read-file",
"allow": [
{
"path": "**"
}
]
},
]
"allow"の"path"には権限が適用されるディレクトリ階層を指定します。
私は作っているツールがそれほど重要なリソースに触れるわけでもない単純な物なので「"**"」でフル権限を付与しましたが、
作るツールの用途に合わせて都度微調整してください。
実行exeのパスが取得できない
TauriのresourceDirで取得できます。
import { resourceDir } from "@tauri-apps/api/path";
await resourceDir()
ビルド時にインストーラー無しのexeだけ出力したい。
-no-bundleオプションを付けるだけ
bun tauri build --no-bundle
まとめ
結構触ってみたけど本当に困ったのはCSP周りの設定ぐらいですね。
ビルド時間も比較的早かったので不便さはありませんでした。