Docker で Tauri の環境構築する

# Docker で Tauri の環境構築する
## 新しく同じような記事を書きました
- https://qiita.com/Ritz/items/883337f711a48663cf64
## 環境
- 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

```Dockefile: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を追加している
```yml: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 のアンパサンドが変更されていないか確認
```json:tauri.conf.json
"beforeBuildCommand": "npm run build && npm run export",
```

### 9. ディスプレイを設定する
1. Powershell で 以下のコマンドを実行
    ```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 でのやりかたを参考にした
- だれかのためになればと思う