Docker で Tauri の環境構築する

新しく同じような記事を書きました

• https://qiita.com/Ritz/items/883337f711a48663cf64

環境

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

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

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

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 のアンパサンドが変更されていないか確認

tauri.conf.json

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

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

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

   ipconfig
   

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

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

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

   cargo tauri dev
   

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

おまけ

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

   apt install x11-apps
   xeyes
   

まとめ

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