【Tauri】DevContainerで開発中のTauriアプリをLinux GUIで確認するための環境構築

概要

私は DevContainer が大好きです。 (突然の)

開発が好きなので色々なものに手を出しますが、開発環境1つにしても色々なものを入れる必要があります。
面倒くさい、OSを汚したくない、再現が大変、管理が大変、そういった理由から絶対に「1開発1コンテナ」に閉じ込めて行います。
また、開発はLinuxでしたいという思いもあります。
特に最近では生成AIはマストであり、生成AIを動かすサンドボックス環境としても理にかなっていてとても良きです。

Tauri のアプリ開発もその一つです。
Tauriで作りたいアイデアがいくつかあったのですが、環境構築が億劫になってしまい開発を始められていない状態でした。

その最たる理由がGUIの表示です。

Windows + DevContainer であれば、実は WSLg のおかげで何の苦労もなくアプリのメインウィンドウを Windows 側に表示できます。
しかし、Tauriアプリの開発ではメインウィンドウだけでなく、タスクバーへの統合やシステムトレイなど、OSのデスクトップ環境に深く関わる機能が必ずついて回ります。

以前挑戦した時は、Lightweightだったり、Cinnamonだったり、いろいろ試行錯誤して結局うまくできませんでした。

今回再挑戦し、Lubuntuのデスクトップ環境をコンテナ内に立て、リモートデスクトップ経由でGUI確認ができる開発環境 の構築に成功しました。

構成

.devcontainer/
├── Dockerfile
└── devcontainer.json

DevContainerを起動するだけで以下が揃います。

• TauriのビルドとLinux GUI確認ができるデスクトップ環境
• Rust（バックエンド）
• Node.js + bun（フロントエンド）

私はこのDockerfileをさらに自分用にカスタムしたImageをビルドして使用しています。
devcontainer.jsonもそれに合わせて変更を加えています。
これらは生成AIに最小構成にリライトしてもらったもので、動作確認はしていません。

Dockerfile

# VS Code が公式に提供している Ubuntu 22.04 (Jammy) ベースの DevContainer 用イメージ
FROM mcr.microsoft.com/devcontainers/base:jammy

ENV DEBIAN_FRONTEND=noninteractive

# [Tauri公式ドキュメント](https://tauri.app/start/prerequisites/#linux)が定めるLinux向けの依存パッケージ群
RUN apt-get update && apt-get install -y \
    lubuntu-desktop \
    xrdp \
    xorgxrdp \
    libwebkit2gtk-4.1-dev \
    build-essential \
    curl \
    wget \
    file \
    libxdo-dev \
    libssl-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev \
    && apt-get autoremove -y \
    && apt-get clean -y \
    && rm -rf /var/lib/apt/lists/*

RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - \
    && apt-get install -y nodejs \
    && rm -rf /var/lib/apt/lists/*

# Windowsリモートデスクトップ、xrdp両方のデフォルトポートが3389なので変更する
RUN sed -i 's/^port=3389$/port=3390/' /etc/xrdp/xrdp.ini

# RDP接続時のパスワード。開発用途のため `vscode` / `vscode` で固定。
RUN echo "vscode:vscode" | chpasswd

USER vscode

# bunは好みによる。Linuxのターミナル(bash)からビルドコマンドなどを使用するためにパスを通しておく
RUN curl -fsSL https://bun.sh/install | bash \
    && echo 'export BUN_INSTALL="$HOME/.bun"' >> ~/.bashrc \
    && echo 'export PATH="$BUN_INSTALL/bin:$PATH"' >> ~/.bashrc

# リモートデスクトップでどのデスクトップ環境を起動するか
RUN echo 'startlxqt' > ~/.xsession && chmod +x ~/.xsession

USER root

EXPOSE 3390

devcontainer.json

{
  "name": "your-tauri-app",

  "build": {
    "dockerfile": "Dockerfile"
  },

  "runArgs": ["--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined"],

  "features": {
    "ghcr.io/devcontainers/features/rust:1": {
      "version": "latest"
    }
  },

  "forwardPorts": [1420, 3390],
  "portsAttributes": {
    "1420": { "label": "Vite Dev Server" },
    "3390": { "label": "LUbuntu Desktop (RDP)" }
  },

  "customizations": {
    "vscode": {
      "extensions": [
        "tauri-apps.tauri-vscode",
        "rust-lang.rust-analyzer"
      ],
      "settings": {
        "npm.packageManager": "bun"
      }
    }
  }
}

使い方

1. まずは bun create tauri-app でTauri のプロジェクトを適当に作成しておきます

2. 上記の DevContainer の設定をそのプロジェクトに配置し、VSCodeから開発コンテナで起動します

   この時点でVSCodeから bun tauri dev すると WSLgによってWindows側からアプリの起動が確認できます
   

3. リモートデスクトップから localhost:3390 に接続しDockerfileで設定しているID・パスでログインします

   

4. LinuxのGUIでターミナルを起動し、workspaces/reponame に移動して bun tauri dev を実行します

   

   これで、Linux上で動いている実際のアプリの様子が確認できます
   

まとめ

私は DevContainer が大好きです。

それ故に、コンテナ内で解決できないTauriをどうしても触れない病気にかかっていました。
これでゴリゴリ開発を進めていきたいと思います。

一応実際にビルドしたImageも貼っておきます。

Dockerfileをそのまま使用するのも良いですが、Lubuntuのインストールなどがリビルドの度に毎回行われるのは流石に重いです。
Imageをビルドして使用することをおすすめします。