Docker で Tauri の環境構築する

環境

Windows10
Docker for Desktop
Rust + Next.js

Rust + Next.js を選択した理由

なんかかっこいいから
何も知らないので勉強したい

1. Tauri の公式を見る

2. ファイルの階層確認

tauri-app
├─docker
│  └─rust
│     └─Dockerfile
└─test
│  
└─docker-compose.yml

3. Dockerfile を作成する

フロントエンドに NextJS
バックエンドに Rust

Dockerfile

FROM rust:latest

RUN apt update -y
RUN apt install -y curl
RUN apt install -y gcc
RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
RUN apt update
RUN apt install -y nodejs
RUN npm install -g n
RUN n lts
RUN n prune
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt update
RUN apt install -y yarn

WORKDIR /var/www/ 
RUN cargo install tauri-cli
RUN apt install -y libdbus-1-dev
RUN pkg-config --libs --cflags dbus-1
RUN apt install -y software-properties-common
RUN apt update
RUN apt install -y libgtk-3-dev
RUN apt install -y build-essential
RUN apt install -y libssl-dev
RUN apt install -y libayatana-appindicator3-dev
RUN apt install -y librsvg2-dev
RUN apt install -y libwebkit2gtk-4.0-dev
# windows_host_ip を コンテナ内で Windows の ip に変更
RUN export DISPLAY=windows_host_ip:0.0 
RUN apt install -y mesa-utils
RUN apt install -y libgl1-mesa-glx
RUN export MESA_GL_VERSION_OVERRIDE=4.5

4. docker-compose.yml の作成

ポート3000以外で開てみたかったので4000を追加している

docker-compose.yml

version: "3.8"
volumes:
  db-store:
services:
  tauri:
    container_name: "tauri"
    build: ./docker/rust
    tty: true
    volumes:
      - ./test:/var/www
    ports:
      - 3000:3000
      - 4000:4000
    networks:
      - tauri-net

networks:
  tauri-net:
    driver: bridge

5. コンテナ起動

tauri-app の直下で起動

docker-compose up -d

6. VcXsrv のインストール

ディスプレイを使うために必要
https://sourceforge.net/projects/vcxsrv/

7. VcXsrv の起動

XLaunch を起動
Multiple Windows を選択で次へ
Start no client を選択で次へ
チェックを雑に四つつける
Additional parameters for VcXsrv に -nowgl を入れて次へ
完了

8. コンテナ内で公式にしたがってインストールなどしていく

コンテナに入る
- コマンドはすべて /var/www で実行する
```
docker exec -it tauri bash
```
このときにプロジェクト名を設定
```
yarn create next-app --typescript
```

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

package.json に追記

ポートを 4000 にするので dev だけ変更

{
  "scripts": {
    "dev": "next dev -p 4000",
    "build": "next build",
    "export": "next export",
    "start": "next start",
    "tauri": "tauri",
    "lint": "next lint"
  },

tauri-cli をインストール
- dockerfile に入れてもいいかもしれない
- コンテナ削除すると入れ直し?
```
cargo install tauri-cli
```
プロジェクト作成
```
cargo tauri init
```
1. アプリ名を入力
2. メインウィンドウ名を入力
3. ../out を入力
4. http://localhost:4000 を入力(ポートに4000を指定するため)
5. npm run dev を入力
6. npm run build && npm run export を入力
tauri.conf.json の npm run build && npm run export のアンパサンドが変更されていないか確認

tauri.conf.json

"beforeBuildCommand": "npm run build && npm run export",

9. ディスプレイを設定する

Powershell で以下のコマンドを実行
powershell
```
ipconfig
```
イーサネットアダプターイーサネットの IPv4アドレスをメモ
コンテナ内で以下のコマンドを実行
- 忘れないために dockerfile 内に記述している
```
export DISPLAY=xxx.xxx.xxx.xxx:0.0 
```
アプリの起動(コンテナ内)
```
cargo tauri dev
```
うまく起動できない場合は複数 XLaunch が起動されていないか確認
- タスクバーの右側にある ^ マークを開いてみて閉じていく
- 自分の場合、試行錯誤していたときのものが間違って使用されていた

おまけ

ディスプレイの接続設定がうまくいっているかの確認をする
- ここで目のアプリが出てきたら成功しているはず
```
apt install x11-apps
xeyes
```

まとめ

環境構築するだけなのにくそでかになってしまった
Windows11 だともっと簡単らしい
WSL でのやりかたを参考にした
だれかのためになればと思う