【WSL 2】dockerコンテナでGUIアプリを実行してWindowsで表示させたい

GUIのアプリを開発してdockerコンテナ内で実行し、ホストのWindowsで表示したいと思いました。軽くやり方を調べたところ、WSL、Xサーバーなど色々な用語が出てきて混乱してしまったので自分なりにまとめてみました。

この記事は以下の環境で検証しています。

WSLはWindows Subsystem for Linuxの略で、Windows上でLinuxを動かすための分離された環境です。WSLを使うことでWindowsに複数のLinuxディストリビューション（Ubuntuなど）をインストールでき、それぞれのLinuxに入ってコマンドを実行したりできるようになります。WSLという環境の中に、独立した複数のLinuxが存在できるというイメージです。

WSLを使用するためにはインストールが必要ですが、コマンドを1行実行するだけという非常に簡単な手順となっています。

WSLにはバージョンがあり、WSL 1とWSL 2があります。機能の違いについては以下ドキュメントを参照してください。

WSLでの操作をいくつか確認してみます。ここでの操作はPowerShell（管理者モード）で実行しています。

WSLでは複数のLinuxディストリビューションが存在できるということで、現在何が入っているのかを確認します。

PS C:\windows\system32> wsl --list --verbose

現在私のWindowsには以下の2つのLinuxディストリビューションが存在しているようです。

※WSLのインストールをした場合は、おそらくUbuntuがインストールされていると思われます。

  NAME                    STATE           VERSION
* rancher-desktop-data    Running         2
  rancher-desktop         Running         2

デフォルトのディストリビューションにアクセスするには以下のコマンドを実行します。

PS C:\windows\system32> wsl

このようにプロンプトが変わり、Linuxに入ったことがわかります。ちなみに、これはPowerShellでのカレントディレクトリをLinuxから見たときのパスです。

/mnt/c/windows/system32 #

ここで通常のLinuxコマンドが実行できます。

※ただしディストリビューションによっては通常のLinuxコマンドが使えない場合があります。例えば上記の rancher-desktop-data では sudo や ls などのコマンドが使えませんでした。

-d オプションでディストリビューションを指定することでその環境にアクセスすることができます。

PS C:\windows\system32> wsl -d rancher-desktop

-s オプションで名前を指定することでデフォルトを変更することができます。よく使うディストリビューションに設定しておけば wsl だけでアクセスできるので便利です。

PS C:\windows\system32> wsl -s rancher-desktop

ではいよいよGUIアプリの実行を試してみます。

ただし、ここではdockerコンテナ内でGUIアプリを実行するのではなく、まずはWSL上にあるLinuxでGUIアプリを実行し、ホストであるWindowsに表示させてみます。

まずは wsl コマンドを使って目的のLinuxに入ります。

GUIアプリをインストールしますが、まずはインストールするコマンドを調べる必要があります。Ubuntuなどであれば問題ないですが、ベースとなるディストリビューションが分からない場合は以下のように調べます。

# cd /etc
alpine-release        ethertypes            localtime（以下略）

〇〇-releaseから、Alpineであることがわかりました。よって、 apk コマンドを使います。

※Ubuntuであれば公式サイトにあるコマンドが使えます。

簡単なGUIアプリということで、xclockをインストールして確認してみます。

# sudo apk add xclock

実行します。

# xclock

Linux上で実行されたGUIアプリをWindowsで表示することができました。

ここからがこの記事でやりたかったことです。

Windowsでアプリの開発を行う⇒dockerイメージをビルドする⇒dockerコンテナでアプリを起動する⇒Windowsで表示する

という流れになります。

検証用GUIアプリはPythonでturtleのScreenを表示するだけのものです。

from turtle import Screen
screen = Screen()
screen.setup(width=600, height=600)
screen.exitonclick()

Dockerfileです。

FROM python:3
WORKDIR /usr/src

docker-compose.ymlです。

version: "3.9"
services:
    build:
      dockerfile: ./Dockerfile
    volumes:
      - ./src:/usr/src
      # WSL
      - /tmp/.X11-unix:/tmp/.X11-unix
      - /mnt/wslg:/mnt/wslg
    tty: true
    environment:
      #- DISPLAY=:0
      #- WAYLAND_DISPLAY=wayland-0
      #- XDG_RUNTIME_DIR=/mnt/wslg/runtime-dir
      #- PULSE_SERVER=unix:/mnt/wslg/PulseServer
      - DISPLAY=$DISPLAY
      - WAYLAND_DISPLAY=$WAYLAND_DISPLAY
      - XDG_RUNTIME_DIR=$XDG_RUNTIME_DIR
      - PULSE_SERVER=$PULSE_SERVER

ここでは、コンテナ内のGUIアプリとWIndowsが通信できるようにするために、以下2つの設定を行います。

前述のとおり、WSL 2のGUIサポートの機能を使っていれば、ホストのWindows側にはXサーバーなどをインストールする必要はなく、環境変数 $DISPLAY などもWSL環境に既に設定されている状態となります。そのため、LinuxでGUIアプリを実行するとWindowsに表示されました。

コンテナで同じようにするためには、コンテナにも同じ環境変数を設定する必要があるので、ここで設定しています。

ただし、WindowsからはWSL内の環境変数は直接取得できません。もし docker-compose コマンドをWindowsのまま（ wsl コマンドでLinuxに入らない）実行するのであれば、 $DISPLAY などには何も値が入っていないので、一度Linuxに入って環境変数を調べて直接設定するなどします。

wsl コマンドでLinuxに入ってから docker-compose コマンドを実行すれば、 $DISPLAY などの表記で大丈夫です。

以下コマンドを順に実行していきます。

$ wsl
# docker-compose up -d
# docker ps
CONTAINER ID   IMAGE                   COMMAND                   CREATED     
651b09a9969c   python-docker-gui-app   "python3"                 5 seconds ag
# docker exec -it 651 /bin/bash
# python main.py