Docker で Tauri の環境構築する

環境

• Windows10
• Docker for Desktop
• Rust + Next.js

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

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

1. Tauri の公式を見る

https://tauri.app/v1/guides/getting-started/setup/next-js

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 の起動

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

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

https://tauri.app/v1/guides/getting-started/setup/next-js

1. コンテナに入る

   • コマンドはすべて /var/www で実行する

     docker exec -it tauri bash

2. このときにプロジェクト名を設定

   yarn create next-app --typescript

3. 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

4. package.json に追記

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

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

5. tauri-cli をインストール

   • dockerfile に入れてもいいかもしれない
   • コンテナ削除すると入れ直し?

     cargo install tauri-cli

6. プロジェクト作成

   cargo tauri init

   1. アプリ名を入力
   2. メインウィンドウ名を入力
   3. ../out を入力
   4. http://localhost:4000 を入力(ポートに4000を指定するため)
   5. npm run dev を入力
   6. npm run build && npm run export を入力
   7. tauri.conf.json の npm run build && npm run export のアンパサンドが変更されていないか確認

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

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

1. Powershell で 以下のコマンドを実行

   ipconfig

2. イーサネット アダプター イーサネット の IPv4アドレスをメモ
3. コンテナ内で以下のコマンドを実行
   • 忘れないために dockerfile 内に記述している

     export DISPLAY=xxx.xxx.xxx.xxx:0.0

4. アプリの起動(コンテナ内)

   cargo tauri dev

5. うまく起動できない場合は複数 XLaunch が起動されていないか確認
   • タスクバーの 右側にある ^ マークを開いてみてXLaunchが複数ある場合閉じていく
   • 自分の場合、試行錯誤していたときのものが間違って使用されていた

おまけ

1. ディスプレイの接続設定がうまくいっているかの確認をする
   • ここで目のアプリが出てきたら成功しているはず

     apt install x11-apps
     xeyes

まとめ

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