TAURI 勉強用リポジトリ

プロジェクトの雛形作成

基本的には下記の公式マニュアルに沿って環境構築を進めれば良い

• 必要事項
• プロジェクトの作成

ここでは, ぼくが実際に進めた手順を記載しておく

Tauri のマニュアルセットアップ を参考にフロントエンドのプロジェクト雛形を構築する

npx create-next-app@latest tauri-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
✔ What import alias would you like configured? … @/*

cd tauri-app
yarn add -D @tauri-apps/cli@latest

yarn tauri init

yarn run v1.22.22
✔ What is your app name? · tauri-app
✔ What should the window title be? · tauri-app
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ..
✔ What is the url of your dev server? · http://localhost:3000
✔ What is your frontend dev command? · yarn dev
✔ What is your frontend build command? · yarn build

Next.js のビルド周りを修正

下記を参考に ./tauri-app/package.json の script に tauri コマンドを追加

til-tauri/tauri-app/package.json

Line 10 in 28fbc69

"tauri": "tauri"

下記を参考に ./tauri-app/next.config.ts を修正

til-tauri/tauri-app/next.config.ts

Lines 1 to 14 in 28fbc69

	import type { NextConfig } from "next";
	const isProd = process.env.NODE_ENV === "production";
	const nextConfig: NextConfig = {
	reactStrictMode: true,
	swcMinify: true,
	images: {
	unoptimized: true,
	},
	assetPrefix: isProd ? "" : `http://localhost:3000`,
	output: "export",
	};
	export default nextConfig;

ビルド可能であることを確認

yarn build

プロジェクトの起動確認

export CC=clang && yarn tauri dev

Apple Silicon の場合, export CC=clang を指定しなければビルドに失敗してしまう

iOS 開発環境の構築

iOS 開発ができるように下記コマンドを実行して初期化する

# `./tauri-app/` で実行
yarn tauri ios init

起動確認する

yarn tauri ios dev

シミュレータがダウンロードされていない場合は, コマンド実行中にダウンロードが始まってしまうので, 先に済ませておいた方が良い
シミュレータが起動した後も Tauri のバンドルが時間がかかる（体感１０分くらい待った）ので, シミュレータ起動後何も動いていないように感じても気長に待つ必要がある

Android 開発環境の構築

# `./tauri-app/` で実行
yarn tauri android init

起動確認する

yarn tauri android dev

シミュレータがダウンロードされていない場合は, エラーになってしまうので, 先に済ませておく Tauri の対応 Java バージョンが 17 なので,　ビルド時に Java17 が指定されていないとエラーになってしまう

ユニットテスト実行環境の構築

Vitest を用いたフロントエンドユニットテスト

基本的には下記の Next.js 公式ドキュメントを参考に進める

• Setting up Vitest with Next.js

# `./tauri-app/` で実行
yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths

./tauri-app/vitest.config.mts を作成する

til-tauri/tauri-app/vitest.config.mts

Lines 1 to 13 in d17b12a

	import { defineConfig } from "vitest/config";
	import react from "@vitejs/plugin-react";
	import tsconfigPaths from "vite-tsconfig-paths";
	export default defineConfig({
	plugins: [react(), tsconfigPaths()],
	test: {
	name: "unit",
	environment: "jsdom",
	exclude: ["**/node_modules/**", "**/e2e/**"],
	include: ["src/**/*.test.?(m)[jt]s?(x)"],
	},
	});

下記を参考に ./tauri-app/package.json の script に test:front コマンドを追加

til-tauri/tauri-app/package.json

Line 12 in d17b12a

"test:front": "vitest --run --project=unit",

下記コマンドでテストを実行する

yarn test:front

フロントエンドテストで IPC(Inter-Process Communication) をモック化したい場合

# `./tauri-app/` で実行
yarn add -D @tauri-apps/api @testing-library/user-event

下記のように mockIPC を用いて IPC(Inter-Process Communication) をモック化することができる

til-tauri/tauri-app/src/components/sample-components.test.tsx

Lines 13 to 17 in 46c48e0

	mockIPC((cmd, arg) => {
	if (cmd === "rust_fn" && arg && "a" in arg && "b" in arg) {
	return `${arg.a} ${arg.b}`;
	}
	});

cargo test を用いたバックエンドのユニットテスト

Cargo には標準でテスト機構が含まれているため, 特別な環境構築は不要

下記コマンドでテストを実行する

# `./tauri-app/src-tauri/` で実行
cargo test

Vitest と cargo test を yarn test コマンドひとつにまとめる

下記を参考に ./tauri-app/package.json の script に test コマンドにフロントエンドテストとバックエンドテストをまとめる

til-tauri/tauri-app/package.json

Line 11 in 51f492f

"test": "vitest --run && cd src-tauri && cargo test",

下記コマンドでテストを実行する

# `./tauri-app/` で実行
yarn test

フロントエンドとバックエンドのテストもそれぞれ分けて実行できるように, 下記を参考に ./tauri-app/package.json の script に test:front コマンドと test:back コマンドをそれぞれ作成

til-tauri/tauri-app/package.json

Lines 12 to 13 in 51f492f

	"test:front": "vitest --run",
	"test:back": "cd src-tauri && cargo test",

e2e テスト実行環境の構築

Playright を用いた e2e テスト

基本的には下記の Playright 公式ドキュメントを参考に進める

Installation

下記のコマンドで Playwright をインストールする

# `./tauri-app/` で実行
yarn create playwright

# ...（中略）
✔ Where to put your end-to-end tests? · e2e
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'yarn playwright install')? (Y/n) · true

自動生成される ./tests-examples/demo-todo-app.spec.ts は削除してしまっても構わない

下記を参考に ./playwright.config.ts を編集

• レポートの出力先を ./playwright-report に指定し, ブラウザを起動しないように設定する

  • til-tauri/tauri-app/playwright.config.ts

    Line 25 in 6274a4c

    reporter: [["html", { outputFolder: "playwright-report", open: "never" }]],

• モバイル向けテストエージェントを活性化（コメントアウトを外す）する

  • til-tauri/tauri-app/playwright.config.ts

    Lines 52 to 60 in 6274a4c

    	/* Test against mobile viewports. */
    	{
    	name: "Mobile Chrome",
    	use: { ...devices["Pixel 5"] },
    	},
    	{
    	name: "Mobile Safari",
    	use: { ...devices["iPhone 12"] },
    	},

下記を参考に vitest のテスト対象から ./e2e/ 配下を外す

til-tauri/tauri-app/vitest.config.mts

Line 9 in 24def96

exclude: ["**/node_modules/**", "**/e2e/**"],

下記を参考に ./tauri-app/package.json の script に e2e コマンドを追加

til-tauri/tauri-app/package.json

Line 14 in 791877e

"e2e": "playwright test",

下記コマンドでテストを実行する

# `./tauri-app/` で実行
yarn e2e

UI カタログの構築

Storybook を用いた UI カタログ

基本的に下記の Storybook 公式ドキュメントを参考に進める

• Storybook for Next.js

下記のコマンドで Storybook をインストールする

# `./tauri-app/` で実行
yarn create storybook

# ...（中略）
What do you want to use Storybook for? # そのまま Enter

# ...（中略）
Do you want to migrate? … yes

自動生成される ./src/stories は不要なので削除

下記を参考に自動生成される ./.storybook/main.ts を修正

til-tauri/tauri-app/.storybook/main.ts

Line 4 in 86600f5

stories: ["../**/*.mdx", "../**/*.stories.@(js|jsx|mjs|ts|tsx)"],

下記を参考に自動生成される ./.storybook/preview.ts を修正

til-tauri/tauri-app/.storybook/preview.ts

Line 1 in 86600f5

import "./../src/app/globals.css";

下記を参考に ./postcss.config.mjs を修正

til-tauri/tauri-app/postcss.config.mjs

Lines 2 to 4 in 86600f5

	plugins: {
	"@tailwindcss/postcss": {},
	},

下記コマンドで Storybook を起動する

# `./tauri-app/` で実行
yarn storybook

CI 構築

husky の構築

Prettier の導入

基本的には下記の Next.js 公式ドキュメントを参考に進める

ESLint Plugin#With Prettier

# `./tauri-app/` で実行
yarn add -D prettier eslint-config-prettier

下記を参考に ./tauri-app/package.json の script に format コマンドを追加

til-tauri/tauri-app/package.json

Line 10 in f97e0dc

"format": "prettier --write .",

下記を参考に ./tauri-app/eslint.config.mjs に prettier を追加

til-tauri/tauri-app/eslint.config.mjs

Line 13 in f97e0dc

...compat.extends("next/core-web-vitals", "next/typescript", "prettier"),

./tauri-app/src-tauri をフォーマット対象から省くため下記を参考に ./.prettierignore を作成

til-tauri/tauri-app/.prettierignore

Line 1 in f97e0dc

src-tauri

husky の構築

# `./tauri-app/` で実行
yarn add -D husky

下記コマンドで husky を初期化する

# `./tauri-app/` で実行
npx husky init

下記を参考に自動生成される ./.husky/pre-commit を修正

til-tauri/tauri-app/.husky/pre-commit

Lines 1 to 10 in c585664

	cd tauri-app
	yarn format
	yarn lint
	yarn test:front
	cd src-tauri
	cargo fmt
	cargo clippy -- -D warnings
	cargo test
	cd ..
	git add .

[!TIP] > cargo fmt や cargo clippy が導入されていない場合は下記コマンドを実行して導入する

# rustfmt （cargo fmt）の導入
rustup component add rustfmt

# clippy （cargo clippy）の導入
rustup component add clippy

下記を参考に自動生成される ./tauri-app/package.json の script の prepare コマンドを修正

til-tauri/tauri-app/package.json

Line 13 in f97e0dc

"prepare": "cd .. && husky tauri-app/.husky"

下記コマンドを実行して, husky が参照する pre-commit ファイルを適応

# `./tauri-app/` で実行
yarn

storybook test の構築

基本的には下記の Storybook 公式ドキュメントを参考に進める

Test runner

yarn add -D @storybook/test-runner concurrently

下記を参考に ./tauri-app/package.json の script に storybook:test, storybook:build, storybook:ci コマンドを追加

til-tauri/tauri-app/package.json

Lines 18 to 20 in 7459247

	"storybook:test": "test-storybook",
	"storybook:build": "storybook build",
	"storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn storybook:build --quiet && npx http-server storybook-static --port 6006 --silent\" \"npx wait-on tcp:6006 && yarn storybook:test\""

下記を参考に ./.gitignore に storybook のビルド成果物が Git 管理下に含まれないように設定を追加

til-tauri/tauri-app/.gitignore

Line 51 in 7459247

/storybook-static

GitHub Actions の構築

フロントエンド CI のワークフロー構築

下記を参考に .github/workflows/integration-frontend.yml を作成

til-tauri/.github/workflows/integration-frontend.yml

Lines 1 to 59 in ac01169

	name: CI for Frontend
	on:
	push:
	branches:
	- main
	paths:
	- "./tauri-app/**"
	- ".github/workflows/integration-frontend.yml"
	pull_request:
	branches:
	- main
	paths:
	- "./tauri-app/**"
	- ".github/workflows/integration-frontend.yml"
	jobs:
	test:
	timeout-minutes: 10
	runs-on: ubuntu-latest
	defaults:
	run:
	working-directory: tauri-app
	steps:
	- name: Checkout
	uses: actions/checkout@v4
	- name: Install yarn
	run: npm install -g yarn
	- name: Setup Node.js
	uses: actions/setup-node@v4
	with:
	node-version: 20
	cache: "yarn"
	cache-dependency-path: "tauri-app/yarn.lock"
	- name: Install dependencies
	run: yarn --frozen-lockfile
	- name: Run Frontend Unit Tests
	run: yarn test:front
	- name: Install Playwright
	run: npx playwright install --with-deps
	- name: Run Component Tests
	run: yarn storybook:ci
	- name: Run Playwright tests
	run: yarn e2e
	- name: Upload Playwright report
	uses: actions/upload-artifact@v4
	if: ${{ !cancelled() }}
	with:
	name: playwright-report
	path: playwright-report/
	retention-days: 30

バックエンド CI のワークフロー構築

下記を参考に .github/workflows/integration-backend.yml を作成

til-tauri/.github/workflows/integration-backend.yml

Lines 1 to 43 in 366f3a6

	name: CI for Backend
	on:
	push:
	branches:
	- main
	paths:
	- "./tauri-app/src-tauri/**"
	- ".github/workflows/integration-backend.yml"
	pull_request:
	branches:
	- main
	paths:
	- "./tauri-app/src-tauri/**"
	- ".github/workflows/integration-backend.yml"
	jobs:
	test:
	timeout-minutes: 10
	runs-on: ubuntu-latest
	defaults:
	run:
	working-directory: tauri-app/src-tauri
	steps:
	- name: Checkout
	uses: actions/checkout@v4
	- name: install dependencies (ubuntu only)
	run: |
	sudo apt-get update
	sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
	- name: Install Rust
	uses: actions-rs/toolchain@v1
	with:
	toolchain: stable
	override: true
	components: clippy
	- name: Lint Rust Code
	run: cargo clippy -- -D warnings
	- name: Run Backend Unit Tests
	run: cargo test --verbose

CD の構築

GitHub Actions の構築

Storybook のデプロイ

下記を参考に .github/workflows/integration-frontend.yml に追記

• Storybook をビルド

  • til-tauri/.github/workflows/integration-frontend.yml

    Lines 58 to 87 in c4c0ecb

    	build:
    	needs: test
    	runs-on: ubuntu-latest
    	defaults:
    	run:
    	working-directory: tauri-app
    	steps:
    	- name: Checkout
    	uses: actions/checkout@v4
    	- name: Install yarn
    	run: npm install -g yarn
    	- name: Setup Node.js
    	uses: actions/setup-node@v4
    	with:
    	node-version: 20
    	cache: "yarn"
    	cache-dependency-path: "tauri-app/yarn.lock"
    	- name: Install dependencies
    	run: yarn --frozen-lockfile
    	- name: Build Storybook
    	run: yarn storybook:build
    	- name: Upload Storybook Documents
    	uses: actions/upload-pages-artifact@v3
    	with:
    	path: tauri-app/storybook-static

• Storybook を GitHub Pages にデプロイ

  • til-tauri/.github/workflows/integration-frontend.yml

    Lines 89 to 100 in c4c0ecb

    	deploy:
    	needs: build
    	runs-on: ubuntu-latest
    	permissions:
    	pages: write
    	id-token: write
    	environment:
    	name: github-pages
    	url: ${{ steps.deployment.outputs.page_url }}
    	steps:
    	- id: deployment
    	uses: actions/deploy-pages@v4

GitHub の設定ページから GitHub Pages を GitHub Action からデプロイするように設定

• このページ が参考になる