WSL2環境で動作するDockerを使用してX Window SystemのGoogle Chromeブラウザを動作させる

前にmicro:bitの最新版をRaspberry Piで動作させましたが、Raspberry Piでは結構動作が遅く、起動までにかなりの時間がかかっていました。

本当はWindows10でも試してみようかなと思ったのですが、割とインストールした開発アプリの状況が汚いWindows10しかなかったこともあり純粋に手順としてメモをしておく意味はないかなと考え、今回はWSL2環境でのDockerをインストールしていることを思い出しました。

参考

uepon.hatenadiary.com

ただ、問題があってmicro:bitGitHub版最新開発環境導入にはGUI環境(ブラウザが立ち上がる必要があります)そのため、Dockerのコンテナ環境だけではなく、X Window SystemのアプリWindows10側でも見えるようにする必要があります。そこで、X Window Systemサーバーの設定も行っていこうと思います。情報では、今後WSL2(Windows Subsystem for Linux 2)Windows上のX Window Systemのサーバと連携するようになるという話もありったりしたので、来年以降でWindowsだけで別のアプリを入れることなく動作させることもできるかなと思っています。

news.mynavi.jp

そんな中、今回はWindows10のWSL2上にインストールを行ったDockerの環境(以後WSL2-Docker環境ということにします)を使用して、まずは環境整備を行ってみます。

次回はこの環境を使用してmicro:bitの最新版を動かしていくことにします。micro:bitの最新版の導入に関しては以前のエントリーとほとんど同じなのでそちらを参考にしてください。こちらではコマンドのみを記載するだけにとどめます。

参考

uepon.hatenadiary.com

Windows10にX Window Systemサーバアプリをインストールする

今回のX Window SystemのサーバになるアプリはVcXsrv Windows X Serverというものを使用します。 他にも同じようなアプリはあると思いますが、有料ではないのでこちらを使うことにしました。 以下からアクセスしてダウンロードを行ってください。

sourceforge.net

f:id:ueponx:20201229162601p:plain

ダウンロードしたファイルをクリックしてインストールしていきます。インストーラがついているものなので導入は割と簡単だと思います。ファイルをダウンロードすると以下のファイルが入手できます。これをダブルクリックすればOKです。

f:id:ueponx:20201229163155p:plain

インストーラが立ち上がると、オプション選択のダイアログが表示されますが、特別なことがなければそのままで【Next >】ボタンをクリックします。

f:id:ueponx:20201229163340p:plain

続いては、インストール先のフォルダ指定ですが、こちらもデフォルトで大丈夫です。【Install】ボタンをクリックします。

f:id:ueponx:20201229163343p:plain

するとインストール作業が行われます。細かなアプリケーションの設定はインストール後に行うことができる形となります。

f:id:ueponx:20201229163346p:plain

Completeと表示されたら、【Close】ボタンをクリックしてインストーラを終了させます。

f:id:ueponx:20201229163349p:plain

インストールが完了するとデスクトップにXLaunchというアイコンが表示されていると思います。これでVcXsrv Windows X Serverの設定を行っていきます。ここからアプリの常駐化などの設定ができるようになりますが、今回は使用するときのみに使用するスタイルで行きたいと思います。

f:id:ueponx:20201229163352p:plain

アプリを起動すると、Windowの表示モードを尋ねられます。1つのデスクトップウインドウを開いて、その中でアプリを起動するパターンも可能ですし、それぞれのアプリをその他のWindowsアプリと同様に開くパターンなどいろいろ設定が可能です。今回はMultiple Windowsというモードを選択しています。あとは【次へ】ボタンをクリックします。

f:id:ueponx:20201229163606p:plain

続いては起動のさせ方(常駐)モード選択になります。今回は都度起動とするため、デフォルトのままで大丈夫です。このまま【次へ】ボタンをクリックします。

f:id:ueponx:20201229163609p:plain

最後は追加設定になりますが、ここでは最後のチェックボックスにチェックを入れてください。アクセスコントロールのものなので、忘れていると使用できないかもしれません。必ず忘れずにチェックしましょう。 【次へ】ボタンをクリックします。

f:id:ueponx:20201229163613p:plain

これで、設定は完了となりますので、【完了】ボタンをクリックしてアプリを起動します。

f:id:ueponx:20201229163616p:plain

【完了】ボタンをクリックすると、Windowsファイアウォールのダイアログが表示されるので、設定を確認して【アクセスを許可する】ボタンをクリックしましょう。これで起動されます。

f:id:ueponx:20201229163619p:plain

念の為、起動しているかはタスクバーにアイコンが表示されますので、確認してみてください。

f:id:ueponx:20201229163622p:plain

これで、VcXsrv Windows X Serverが動作するようになりました。残るはDockerで動作するコンテナを準備していくことになります。

Dockerで動作するLinuxコンテナの準備をする

基本的には通常使うLinuxコンテナを準備します。今回はUbuntuを使っていきます。 作業としては以下のようになります。

  1. Linuxコンテナを準備
  2. X Window Systemに必要なパッケージのインストール
  3. 環境変数を設定

今回は以前インストールしていた環境があるのでDocker for Windowsを使用して作業をしますが、もちろんWindowsのCMDやPowerShellからでも同様のことはできます。

まずはUbuntuのイメージからコンテナを起動してみます。

Docker for Windowsのウインドウを開いて、左側にあるimagesをクリックして

f:id:ueponx:20201229223059p:plain

インストール済みのImageを確認します。Ubuntuがあったのでそれをクリックして、

f:id:ueponx:20201229223103p:plain

右側に【RUN】ボタンが表示されます。これをクリックして新しいコンテナを作成していきます。

f:id:ueponx:20201229223107p:plain

あとはコンテナ名とコンテナとホストのファイルを共有するパスを設定しておきます。これがあるとUSB接続ができないコンテナ側のOSとファイルの共有がスムーズになります。可能な限りやっておくといいと思います。設定が終わったら【Run】ボタンをクリックします。

f:id:ueponx:20201229222832p:plain

コンテナを起動したらコンソールを開いて(bashプロセスにアタッチでもOK)以下を行います。ここでインストールを行っているのはX11の環境とX11のアプリになります。

※今回は素のUbuntuのイメージを利用しているのでルートユーザで作業をしています。そのため、インストールなどの作業にはsudoを行っていませんのでご注意ください。

# apt update
# apt install xserver-xorg x11-apps

f:id:ueponx:20201229164550p:plain

Xのインストール時にタイムゾーンとキーマップを尋ねられるので、

タイムゾーンは【6. Asia】を選択し、

f:id:ueponx:20201229222653p:plain

リージョンは【79. Tokyo】にしておきます。

f:id:ueponx:20201229222700p:plain

キーマップは接続に合わせて設定することになりますが、

f:id:ueponx:20201229222707p:plain

f:id:ueponx:20201229222715p:plain

私は【55. Japanese】と選択して、

f:id:ueponx:20201229222722p:plain

レイアウトは【6. Japanese - Japanese(OADG109A)】を選択しておきました。

f:id:ueponx:20201229222729p:plain

インストールが完了するとX Window Systemが使用可能になります。テスト用のアプリもインストールされているので早速テストを行います。以下のようにX環境のGUIを持つアプリを起動してみます。

$ xeyes

すると以下のようなエラーが発生します。これはどこの環境でウインドウを開くか設定を行っていないためのエラーメッセージとなります。本来であれば、ローカル環境にウインドウを開くことになるのですが、ディスプレイがない設定のため、別途設定が必要になります。

f:id:ueponx:20201229164547p:plain

そのために必要になるのはDISPLAYという環境設定になります。この環境変数はネットワーク越しの設定も可能になるため、今回は表示させるのをDockerのホスト側にしたいと思うので、ホスト側のIPアドレスを指定し、設定を行います。

注意となりますが、ホスト側のIPアドレスWSLで使用される仮想アダプタで設定されているIPアドレスになります。ipconfigコマンドで確かめるときには、イーサーネットアダプター vEthernet(WSL)のものを確認して設定を行う点が注意となります。

今回の例では172.19.32.1となっていました。

f:id:ueponx:20201229182113p:plain

この場合の環境変数の設定方法は以下のようになります。合わせてxeyeの実行も行ってみます。

# export DISPLAY=172.19.32.1:0.0
# xeyes &

無事に実行が行われました。

f:id:ueponx:20201229164529p:plain

chromiumブラウザの導入を試す

Dockerコンテナ上にあるUbuntuにはWebブラウザはインストールされていないので、新規にインストールを行います。micro:bitGitHubにある最新版はサービス起動するとChromiumブラウザを起動しようとするのでそちらをインストールしていきます。

ブラウザのインストールは以下のように行います。

$ apt -y install chromium-browser-l10n
$ apt -y install chromium-browser

インストール後、起動すると以下のようなメッセージが表示されます。

$ chromium-browser
Command '/usr/bin/chromium-browser' requires the chromium snap to be installed.
Please install it with:

snap install chromium

snapというものでインストールせよという内容です。実は、最近はChromiumブラウザaptパッケージではなくsnapで配布がされているようです。

f:id:ueponx:20201229184911p:plain

そのため、chromium-browseraptコマンドでインストールを行っても、それはダミーインストール状態になっていてsnapを使用してインストールを行う必要があります。メッセージどおりにインストールを行うことになるのですが…

$ snap install chromium-browser
error: cannot communicate with server: Post http://localhost/v2/snaps/chromium: dial unix /run/snapd.socket: connect: no such file or directory

f:id:ueponx:20201229185536p:plain

こちらでもエラーが発生します。原因はDocker経由のコンテナではsystemctrlが使用できないためです。snapsnapdというサービスを経由して実行することになりますが、snapdサービスそのものが起動できないため、snapは動作させることができません。

現状はchromium-browsersnap経由でしかインストールできない状態のため、別の手段を考える必要があります。

そこで、純正のChromeブラウザをインストールして試してみたいと思います。(micro:bitの最新版はFirefoxではうまく動作しなかったのでこちらの方法をとっています)

Chromeブラウザのインストール

以下のコマンドでChromeブラウザをインストールを行っていきます。デフォルトでaptを使ったインストールができないので、以下のようにインストールしていきます。

参考

qiita.com

# apt install -y wget gpg
# wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
# sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
# apt update
# apt install google-chrome-stable -y

ここまでくれば、インストール完了です。あとはブラウザを起動するのですが、実行コマンドはgoogle-chromeとなっているので注意です。ただ、そのまま実行を行うとエラーが表示されます。

# google-chrome
[8725:8725:1229/191718.909795:ERROR:zygote_host_impl_linux.cc(90)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.

起動時のオプションで--no-sandboxをつけないと起動できないようになっているみたいです。以下の様に実行を行うと

# google-chrome --no-sandbox

デフォルトブラウザにするか、クラッシュレポートをGoogleに送るかなどのダイアログが表示され、【OK】ボタンをクリックすれば

f:id:ueponx:20201229192327p:plain

無事にWSL2-Docker環境GUI環境のGoogleChromeブラウザが起動するようになりました。

f:id:ueponx:20201229192330p:plain

おわりに

今回はWindows10上で動作するWSL2-Docker環境X Window systemGUIアプリを動作させてみました。わりと、簡単に実行できるようになるので、テストという位置づけであればかなり使えるかなと思います。

次回は更に、この環境にmicro:bitGitHub版最新開発環境をいれて動作できるかを試してみたいと思います。

/* -----codeの行番号----- */