開発サーバー連携

開発時に Tauri がフロントエンド開発サーバーとどのように接続するか

開発サーバー連携

開発時、Tauri はバンドルされた静的ファイルではなく、ローカルの開発サーバーからフロントエンドを読み込む。これは Tauri の開発体験の根幹をなす仕組みであり、ホットリロード、高速なイテレーション、そして使い慣れたブラウザの DevTools をそのまま利用できる。

仕組み

Tauri の開発ワークフローは、tauri.conf.json 内の2つの設定フィールドに依存している。

• beforeDevCommand -- Rust バックエンドを起動する前に Tauri が実行するシェルコマンド（通常は開発サーバーの起動コマンド）

• devUrl -- 開発時に Tauri の WebView が読み込む URL

{
  "build": {
    "beforeDevCommand": "pnpm exec vite --config vite.config.ts",
    "devUrl": "http://localhost:37461"
  }
}

cargo tauri dev を実行すると、Tauri は以下の手順で動作する。

1. beforeDevCommand をサブプロセスとして実行

2. 開発サーバーが利用可能になるまで待機

3. Rust バックエンドを起動

4. devUrl を指す WebView ウィンドウを開く

このセクションのトピック

このセクションでは、開発サーバー連携に関する実践的なパターンと注意点を取り上げる。

• Vite 連携 -- Vite をフロントエンド開発サーバーとして設定する方法。CWD に関する注意点やマルチコンフィグ構成を含む

• SSE ライブリロード -- HMR ではなくフルリビルドを行う開発サーバー向けの、SSE ベースのカスタムライブリロードシステムの構築

• ウォッチャーループ -- ビルド出力が監視対象ディレクトリに書き込まれる際の無限リビルドループの防止

開発モードと本番モードの違い

主なアーキテクチャ上の違いは以下の通りである。

const IS_DEV: bool = cfg!(debug_assertions);

if IS_DEV {
    // Dev server is already running via beforeDevCommand
} else {
    // Production: spawn your own server or use bundled assets
}