【Tauri+Next.js】Rust+TypeScriptで作るデスクトップアプリケーション

2023年1月16日

TauriはバックエンドにRust、フロントエンドには従来のWeb開発技術(JavaScript+HTML+CSS,ReactやNext.jsなどのフレームワーク)を用いたデスクトップアプリケーションを開発するためのフレームワークです。

クロスプラットフォーム対応しておりWindowsでもMacでもLinuxでも動作します。
iOS/Androidへの対応も現在進行系で進んでおりAlpha Releaseとして公開されています。

そんなTauriですが2022年6月に待望のバージョン1.0がリリースされました。

ということで今回はTauri+Next.jsな環境を構築してみたいと思います。

この記事でできること

Tauri+Next.jsの開発環境構築
フロントエンド(TypeScript)からバックエンド(Rust)の処理を呼び出す

参考リンク

前提条件

本記事で紹介する環境は、Node.js(npm)およびRustが実行できることを前提としています。

Rustのインストールに関してはこちらの記事でも紹介していますのでご覧ください。

プロジェクトの作成

まずはじめにプロジェクト全体のセットアップをします。

STEP

ディレクトリの作成

mkdir projectname

STEP

初期処理

作成したディレクトリ内で下記コマンドを実行して初期化をしておきましょう。

npm init

設定は基本的にすべてデフォルトでOKです。

-zsh % npm init
...中略

package name: (sample) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC)

以降は上記にて作成したフォルダをルートフォルダとします。

フロントエンド(Next.js)の作成

次にフロントエンド部分（Next.js）を作成していきます。

STEP

Next.jsのセットアップ

下記のコマンドを実行してコード生成を行います。

npx create-next-app@latest --use-npm --typescript

入力項目は以下のようにします。

-zsh % npx create-next-app@latest --use-npm --typescript
✔ What is your project named? … next
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use `src/` directory with this project? … Yes
✔ Would you like to use experimental `app/` directory with this project? … No
Creating a new Next.js app in /sample/next.

...中略

Success! Created next at /sample/next

STEP

next.config.jsの修正

Tauri向けにnext.config.jsの設定を下記のように修正します。

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  // Note: This experimental feature is required to use NextJS Image in SSG mode.
  // See https://nextjs.org/docs/messages/export-image-api for different workarounds.
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

STEP

next/package.jsonの編集

スクリプトをnext/package.jsonに追加します。

{
...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start",
    "lint": "next lint"
  },
...
}

バックエンド(Tauri)の作成

続いて今回のメインであるバックエンド部分（Tauri）を作成します。

STEP

Tauriのインストール

ルートフォルダで以下コマンドを実行します。

npm install --save-dev @tauri-apps/cli

STEP

/package.jsonの編集

スクリプトを/package.jsonに追加します。

{
...
  "scripts": {
...
    "tauri": "tauri",
...
  },
...
}

STEP

Tauriの初期化

下記コマンドを実行してTauriの初期セットアップを行います。

npm run tauri init

コマンド実行後の質問に対しては以下のように答えていきます。

✔ What is your app name? · projectname (任意のアプリ名を入力)
✔ What should the window title be? · titile (任意のタイトルを入力)
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../out
✔ What is the url of your dev server? · http://localhost:3000
✔ What is your frontend dev command? · npm run dev
✔ What is your frontend build command? · npm run build && npm run export

STEP

tauri.conf.jsonの編集

ビルド関連の設定を修正します。

tauri.conf.jsonのbuild部分を以下のように修正します。

{
...
  "build": {
    "beforeBuildCommand": "npm run build && npm run export",
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:3000",
    "distDir": "../out"
  },
...
}

スクリプトの最終調整

STEP

/package.jsonの編集

以下のように/package.jsonを修正します。

{
...
  "scripts": {
    "build": "npm run build --prefix next",
    "dev": "npm run dev --prefix next",
    "export": "npm run export --prefix next",
    "tauri": "tauri"
  },
...
}

STEP

next/package.jsonの編集

以下のようにnext/package.jsonを修正します。

{
...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export -o ../out",
    "start": "next start",
    "lint": "next lint"
  },
...
}

動作確認

下記コマンドをルートで実行して動作すればひとまず問題なしです!!

npm run tauri dev

Rust部分でエラーが発生した場合、

Rustをアップデートする
stableバージョンを使う

などを行うと解消できる可能性が高いです。

参考）関連コマンド

rustup self update　　　・・・　rustupのアップデート
rustup default stable  ・・・　使用するRustのデフォルトバージョンをstableにする
rustup update　　　　　　・・・　使用中のRustバージョンをアップデートする

おまけ：Tauriフォルダ名の変更

Tauri部分のフォルダ名はデフォルトではsrc-tauriとなっています。

個人的に気になったのでtauriというフォルダ名に変更。

動作確認したところ正常に動作することも確認できました。

IDEのリファクタリング機能で簡単にできますので気になる方は変更しておきましょう。

フロントエンド(TypeScript)からバックエンド(Rust)のAPIコール

STEP

APIコール用パッケージのインストール

以下を/next配下へインストール

npm i @tauri-apps/api

STEP

バックエンド処理の追加

tauri/src/main.rsを以下のように編集

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

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

nextをビルドしていない場合に以下のエラーが出る場合があります。

The `distDir` configuration is set to `"../out"` but this path doesn't exist

その場合はルートフォルダで下記のコマンドを実行しましょう。

npm run export

STEP

APIコール

next/src/pages/index.tsxを以下のように編集します。

import {invoke, InvokeArgs} from '@tauri-apps/api/tauri';
import {useEffect} from 'react';

function callTauriApi(name: string, args: InvokeArgs) {
  const isClient = typeof window !== 'undefined'
  if (isClient) {
    invoke(name, args).then(console.log).catch(console.error)
  }
}

const Home = () => {
  useEffect(() => {
    callTauriApi('greet', { name: 'World' })
  }, [])

  return (
    <div>
      <label>api test</label>
    </div>
  )
}

export default Home

STEP

動作確認

ルートフォルダで以下コマンドを実行します。