HTML5製のwebアプリをTauri 2.0でexe化する

### はじめに
HTML＋CSS＋JavaScriptで作ったwebアプリをデスクトップアプリ化したい。Electronだとnode.jsに加えてChromiumによるレンダリングはスペック盛りすぎだと思う。exeサイズが大きくなるのも好ましくない。

今回は、HTML5アプリを、Tauri 2.0でexe化して実行できるようにします。

---

### 1. HTML5プログラムを用意する

HTML5プログラムを作成し、1つのフォルダにまとめてフォルダ内のindex.htmlからブラウザで起動できるようにして、動作確認までしておきます。
例えば以下のようなもの。
![sp01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6824/d3e48f20-271e-4317-9a99-9abeea74b7e4.png)
ソースコードは以下から取得

https://github.com/cykod/AlienInvasion


---
### 2. Tauriをインストールする
下記Tauriのオフィシャルサイトに従い、以下3つの資材をインストールします。
・Microsoft C++ Build Tools
・Rust
・Node.js

https://v2.tauri.app/ja/start/prerequisites/#windows

### 3. アプリのexe化を実行する

#### 1 PowerShellを起動
Windows PowerShellを起動します。基本的にこのコンソール内でコマンドを入力していきます。作業用のフォルダを作っておいてディレクトリ移動しておきます。

![sc02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6824/f243db14-5705-4aa0-a3bc-36b02d6191d2.png)

```
PS C:\Users> cd f:\work\tauri
PS F:\work\tauri>
```
#### 2 プロジェクトの作成
今回はフレームワークなしの素のJavaScriptのプログラムでパッケージマネージャはnpmとします。AlienInvasionという名前でプロジェクトを作ります
```
PS F:\work\tauri> npm create tauri-app@latest
```
```
? Project name (tauri-app) › AlienInvasion              (入力してEnter)
? Package name (alieninvasion) › alieninvasion          (そのままEnter)
? Identifier (com.alieninvasion.app) ›                  (そのままEnter)
? Choose which language to use for your frontend ›
❯ TypeScript / JavaScript  (pnpm, yarn, npm, deno, bun) (選択してEnter)
  Rust
  .NET
? Choose your package manager ›
❯ npm                                   (選択してEnter)
  pnpm
  yarn
  deno
  bun
? Choose your UI template ›
❯ Vanilla                               (選択してEnter)
  Vue
  Svelte
  React
  Solid
  Angular
  Preact
? Choose your UI flavor ›
  TypeScript
❯ JavaScript                            (選択してEnter)

Template created! To get started run:
```
#### 3 npm install
F:\work\tauri\AlienInvasionというフォルダが作成されたので、フォルダ内に移動し必要なpackageをインストールします
```
PS F:\work\tauri> cd AlienInvasion
PS F:\work\tauri\AlienInvasion> npm install
```

#### 4 環境を確認
ここで一旦、開発モードでTauriの内部サーバを起動して動作を確認します。実行されるHTML5アプリはプロジェクト作成時にsrcに自動生成されたテンプレートファイル群です
```
PS F:\work\tauri\AlienInvasion> npm run tauri dev
```
```
> alieninvasion@0.1.0 tauri
　　　　：
   Compiling alieninvasion v0.1.0 (F:\work\tauri\AlienInvasion\src-tauri)
   Compiling open v5.3.2
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 2m 35s
     Running `target\debug\alieninvasion.exe`
```
![s03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6824/9c5b3ac5-ddbc-4b3b-9adb-ba840d60584c.png)
こんなWindowが表示されればOKです

#### 5 HTML5プログラムを配置する
srcの中身をExplorer等で目的のものに入れ替えます
![s05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6824/d78586e3-a069-4f75-9fce-c827f4309467.png)

再度、開発モードでTauriの内部サーバを起動して動作を確認します。
```
PS F:\work\tauri\AlienInvasion> npm run tauri dev
```
```
> alieninvasion@0.1.0 tauri
　　　　：
     Running DevCommand (`cargo  run --no-default-features --color always --`)
        Info Watching F:\work\tauri\AlienInvasion\src-tauri for changes...
   Compiling alieninvasion v0.1.0 (F:\work\tauri\AlienInvasion\src-tauri)
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 13.79s
     Running `target\debug\alieninvasion.exe`
```
![s06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6824/36e65ff7-0724-43b6-80d2-58ca66da4912.png)
問題なく動作しています

#### 6 リリースビルド
ビルドしてexeを作ります
```
PS F:\work\tauri\AlienInvasion> npm run tauri build
```
```
> alieninvasion@0.1.0 tauri
　　　　：
   Compiling alieninvasion v0.1.0 (F:\work\tauri\AlienInvasion\src-tauri)
    Finished `release` profile [optimized] target(s) in 3m 41s
       Built application at: F:\work\tauri\AlienInvasion\src-tauri\target\release\alieninvasion.exe
　　　　：
    Finished 2 bundles at:
        F:\work\tauri\AlienInvasion\src-tauri\target\release\bundle\msi\alieninvasion_0.1.0_x64_en-US.msi
        F:\work\tauri\AlienInvasion\src-tauri\target\release\bundle\nsis\alieninvasion_0.1.0_x64-setup.exe
```
F:\work\tauri\AlienInvasion\src-tauri\target\releaseフォルダにalieninvasion.exeという名前で実行ファイルができました。
また、同時にmsiやsetup.exeも作成されます。

```
-a----        2025/06/13     17:42        8925184 alieninvasion.exe
```
8.9MB程度のサイズですね。exeだけ適当なフォルダや別PCにコピーして実行してみます。

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6824/71181658-a65e-4bdb-906f-2ac4ba30a3e5.png)
![s07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6824/d3ee2080-d47f-4ca5-a454-9db01c1f7807.png)
良い感じ。
以上

---
### 参考 
Tauri 2.0 -- https://v2.tauri.app/ja/