はじめに
これまでのシリーズでは、Tauri × Next.js を使って、ローカルファイル保存機能付きのTodoアプリを開発してきました。
今回はその最終回として、このアプリをmacOSとWindowsで実行形式(.app / .msi)にビルドし、配布できる状態にする手順を解説します。
簡単に他の人に渡せる形にするところまでが、Tauriの魅力でもあります。
ビルド前の準備
Tauriでは、ビルド時にNext.jsのアセットが必要になるため、まずはWeb部分をビルドしておく必要があります。
# Webアプリ部分をビルド(Next.js)
npm run build
この結果、.output/public
や .next
ディレクトリ(構成による)に静的アセットが生成されます。
Tauri 側の tauri.conf.json
または tauri.conf.ts
で、ビルド時の dist パスがこの場所に設定されているか確認しましょう。
// src-tauri/tauri.conf.json の例
{
"build": {
"distDir": "../out",
"devPath": "http://localhost:3000"
}
}
macOSでのビルド
macOSでは、Tauriは .app 形式 のアプリを生成します。Apple Developer署名なしでも自己署名されたアプリとしてローカルで実行可能です。
# Tauri CLIからリリースビルド
npm run tauri build -- --bundles app
実行結果:
src-tauri/target/release/bundle/macos/TodoApp.app
が生成されます- Finderでダブルクリックすれば起動可能です
- 初回起動時に「未確認の開発元」の警告が出ることがあります
実行すると開発時は左下にあったnextのアイコンが消えていますね。これでリリース版のアプリが作成できました。
Windowsでのビルド
Windowsでは、.msi または .exe 形式でアプリが出力されます。
今回は、特にこだわりはないのでデフォルトであるmsi形式で出力します。
ビルドコマンド
npm run tauri build
実行結果:
src-tauri/target/release/bundle/nsis/TodoApp_0.1.0_x64-setup.exe
が生成されます。- ダブルクリックでインストーラが起動し、C:\Program Files にアプリがインストールされます。
成果物の配布方法
- 自己利用:メールやSlackなどで
.app
/.exe
を共有 - 公開配布:GitHub Releases にアップロード
- Web経由:独自ドメインからZIP形式で配布
また、公開時には、README
や CHANGELOG
をつけると信頼性も上がります。
まとめ
今回は、TauriアプリをmacOSとWindowsそれぞれの環境でビルドし、実行可能な形式で配布する手順を紹介しました。
これで、開発したTodoアプリは他の人にも使ってもらえる状態になりました。
次は、アプリのUX向上として「通知機能」や「起動時の初期UI改善」など、より完成度を高めるステップに進んでいきましょう。
🔗 関連記事:
✅ 第1回:Tauriとは?環境構築とプロジェクト初期化
✅ 第2回:Todoリスト画面を作成
✅ 第3回:期限付きタスクの追加・削除
✅ 第4回:ローカルファイル保存機能