3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

WindowsのDocker環境でRust GUIアプリを動かす

Last updated at Posted at 2023-08-05

やりたいこと

  • RustでGUIアプリ開発をしたい
  • 手元にはWindowsマシンしかない

Windows10のWSL(WSLg)でGUIアプリが動くようになった(投稿日 2022年11月26日)

とのことなので、WindowsのDocker Desktop環境でRustのGUIアプリを動かす

この記事の内容

  1. まずはWSL2のdockerでGUIが動かせるか確認する(Rustは関係ない)
  2. Rust GUIのライブラリ gtk-rs を使って、Rust製GUIアプリを動かす

GTKは画像編集で有名なGIMPの実装のために作られたツールキットらしい
※GTK = The GIMP Toolkit

前提条件

  • OSは Windows 11 Home 22H2
  • Ubuntu on WIndows がインストールされている
  • Docker Desktop がインストールされている

image.png

Ubuntu on Windows でGUIアプリを起動する

まずはRustとは関係なしに、そもそもWLS2からLinux GUIアプリを起動することができるか確認する

Microsoftのドキュメントが参考になる
Linux 用 Windows サブシステムで Linux GUI アプリを実行する

  1. コマンドプロンプトを開いてubuntuと入力する
  2. 入力待ちの部分が root@{pcname}になったら、以下のコマンドを実行する
sudo apt install gedit -y
gedit

以下のようなテキストエディタが表示されれば成功です

image.png

WSL2のDockerでGUIアプリを起動する

次に、WLS2からdockerコンテナを起動してGUIアプリが起動するか確認する

  1. 先ほどと同様に、コマンドプロンプトを開いてubuntuと入力する
  2. 任意のフォルダにDockerfileを作成する
  3. そのフォルダでgedit Dockerfile
  4. DockerGuiTest/notCompose/ 内で、コマンドを実行」を参考にDockerfileを編集し、dockerコマンドを実行する

Dockerfileの内容

image.png

Ubuntu on Windows で実行するコマンド2つ

# イメージをビルドする
docker build --build-arg DISPLAY=$DISPLAY --build-arg PULSE_SERVER=$PULSE_SERVER --build-arg WAYLAND_DISPLAY=$WAYLAND_DISPLAY --build-arg XDG_RUNTIME_DIR=$XDG_RUNTIME_DIR . -t image-name 

# コンテナを起動する
docker run -v /mnt/wslg:/mnt/wslg -v /tmp/.X11-unix:/tmp/.X11-unix -it --rm image-name

成功すれば、以下のような画面が起動する

image.png

これでdocker環境からもGUIを使えることがわかった

WSL2でdockerが使えない場合の対処

自分の場合は、Docker Desktopの設定を変更することで、使えるようになりました

image.png

参考:wsl上のubuntuでdockerが使用できない

RustのGUIアプリをDockerで起動する

RustのGUIライブラリ「gtk-rs」

上記記事を参考に、Ubuntu on Windowsターミナルでdockerコンテナを起動し、Rust製GUIアプリを動かす

docker-compose.yml

  1. Ubuntu on Windowsを起動し、任意のフォルダを作成する
  2. 作成したフォルダの中に docker-compose.ymlを作成する
  3. ファイルの中に以下の内容を記述する
docker-compose.yml
version: "3.9"
services:
  mylinux:
    build: ./linux-container
    container_name: mylinux
    hostname: mylinux
    working_dir: /work
    tty: true
    stdin_open: true
    volumes:
      - /tmp/.X11-unix:/tmp/.X11-unix
      - /mnt/wslg:/mnt/wslg
    environment:
      - DISPLAY=$DISPLAY
      - PULSE_SERVER=$PULSE_SERVER
      - WAYLAND_DISPLAY=$WAYLAND_DISPLAY
      - XDG_RUNTIME_DIR=$XDG_RUNTIME_DIR

次に、./linux-containerフォルダの中にDockerfileをつくる

Dockerfile

docker-compose.ymlファイルがある階層に、linux-containerフォルダをつくる
そのフォルダの中にmain.rsDockerfileつくる

  • ベースイメージはUbuntu:22.04
  • Rustをインストールし、パスを通す
  • /workフォルダにRustプロジェクトを作成する
Dockerfile
FROM ubuntu:22.04
RUN apt update && apt install -y libgtk-4-dev build-essential

# Rust install
ENV RUST_HOME /usr/local/lib/rust
ENV RUSTUP_HOME ${RUST_HOME}/rustup
ENV CARGO_HOME ${RUST_HOME}/cargo
RUN mkdir /usr/local/lib/rust && chmod 0755 $RUST_HOME
RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs > ${RUST_HOME}/rustup.sh \
    && chmod +x ${RUST_HOME}/rustup.sh \
    && ${RUST_HOME}/rustup.sh -y --default-toolchain nightly --no-modify-path
ENV PATH $PATH:$CARGO_HOME/bin

# Rust build
RUN mkdir /work
WORKDIR /work
RUN cargo new hello-gtk
WORKDIR /work/hello-gtk
RUN cargo add gtk4@0.6.6 --rename gtk
COPY main.rs /work/hello-gtk/src/
RUN cargo build

hello-gtkプロジェクト(ビルド済み)が入ったDockerイメージが完成した
main.rsの内容は、先述の記事にあるmain.rsと同じにする

hello-gtkを実行する

docker-compose.ymlの階層でdocker comose upをして、コンテナを起動する
さらにexecでコンテナの中に入る

docker compose up -d
docker compose exec mylinux bash

最初のフォルダは/workになっている

pwd
/work

hello-gtkフォルダに移動して、cargo runする
すでにcargo buildを終えているので、すぐにGUIが起動する

cd hello-gtk

cargo run
    Finished dev [unoptimized + debuginfo] target(s) in 1.07s
     Running `target/debug/hello-gtk`
Clicked!
Clicked!
Clicked!

以下のような画面が立ち上がる
Click me!を押した分だけ、コンソールにClicked!とメッセージが表示される

image.png

以上でWindowのDocker環境でRustのGUIアプリが起動した

おわりに

Windows、Docker、gtk-rsを組み合わせて
WindowsマシンでRustのGUIアプリを起動して動作することを確認した

VSCodeのターミナル(PowerShell)ではなく、Ubuntu on Windowsのターミナルから
コンテナを起動する必要させなければならないのが手間なので
ここを解消したい

追記_VSCodeのターミナルをWSLにする

VSCodeのターミナルの種類をWSLにするのは簡単だった
ターミナルを開いて + を押すと、ターミナルの種類を選択できる

image.png

cargo runすると、画面が表示される
クリックすると、ログがVSCodeのターミナルに表示される

Animation2.gif

自分の環境ではデフォルトでpwsh(PowerShell 7系)だったが
ほかにも Git や コマンドプロンプトも選べるらしい

参考

【Docker】Rustをインストール

wslのDockerでGUI操作

糸冬了!!

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?