Help us understand the problem. What is going on with this article?

WSL2 + Docker(ubuntu18.04) からchromeを起動する

目的

windows subsystem for linux2(wsl2)のdocker環境にchromeを入れるときに嵌ったので忘備録として残します。

参考にさせて頂いた記事

https://hnakamur.github.io/blog/2018/05/04/install-chrome-using-apt-on-ubuntu-18.04/
https://blog.cles.jp/item/10821
https://review-of-my-life.blogspot.com/2017/11/pythonbash-on-windowswindows-subsystem.html

作業環境

  • Windows10 Home Insider Preview
    • バージョン:2004
    • OSビルドバージョン:19564
  • WSL2 Ubuntu18.04
    • Remote-WSL(VSCode)
  • docker(ubuntu)
    • 以下のDockerfileから作成されたコンテナを使用。
FROM ubuntu:18.04
ENV DEBIAN_FRONTEND=noninteractive
ENV LANG ja_JP.UTF-8

RUN apt-get update && apt-get install -y \
    sudo \
    python3 python3-pip \
    git \
    language-pack-ja \
    vim \
    xserver-xorg \
    x11-apps \
    openssh-server \
    curl \
    zip \
&& apt-get clean \
&& rm -rf /var/lib/apt/lists/*

RUN apt-get -qq update
RUN apt-get -qq -y install curl

RUN pip3 install flake8 black

手順

コンテナにchromeをインストール

Chromeのリポジトリを追加します。

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

chromeをインストール

$ sudo apt update
$ sudo apt install google-chrome-stable -y

これでchromeはインストールできました。

Ubuntuでライブラリ,パッケージのインストールと設定

今回は事前にインストールされている為不要(Dockerfileにxserver-xorgをinstallする記載があります。)ですが、事前にインストールを行わない場合は以下を実施してインストールしておきます。x11-appsはxeyesコマンドなどのテスト用です。

$ sudo apt-get install xserver-xorg x11-apps

windows上にX-windowサーバを導入

wsl2のコンテナ上でchromeを起動してもwindows上には表示できない為、X-windowサーバを導入する必要があります。
以下を参考にさせて頂きました。
https://estuarine.jp/2017/11/wsl-x-window/
https://necojackarc.hatenablog.com/entry/2019/10/09/080908

VcXsrvのインストール

X Window serverはVcXsrvを利用する。Windows10上でダウンロードし、ダブルクリックしてデフォルトのままインストールします。ダウンロードは以下です。
https://sourceforge.net/projects/vcxsrv/
インストール中にwindowsのファイアウォールを許可するか聞かれるので許可します。

XLaunchの起動

スタートメニューからXLaunchを起動して設定を行います。
ほとんどデフォルトで良いが以下をチェックしないとGUIが表示されない為、ここにはチェックを付けます。
image.png

設定が完了したらセーブし、そのまま起動するとタスクバーの右下に以下の赤枠が表示されます。
image.png

セーブしたXLaunchファイルを毎回起動することが面倒であればスタートアップに追加しておきましょう。

DISPLAY設定を実施する

chromeを実行する前にGUIが起動するかどうか確認してみます。

$ xeyes
Error: Can't open display: 0:0

X displayの設定がうまくいっていないようなので/etc/resolve.confのnameserverからIPをとってきてDISPLAYに設定します。

$ LOCAL_IP=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}')
$ export DISPLAY=$LOCAL_IP:0

そしてもう一度xeyesを実行すると、以下のGUIが表示されます。
image.png

google-chromeの起動

chromeを起動するが以下のようなエラーが発生します。

$ google-chrome
[2664:2664:0220/133551.864270:ERROR:zygote_host_impl_linux.cc(89)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.

--no-sandboxを付けないとダメなようです。
詳細はエラーにあるように以下のページを参考にします。
https://bugs.chromium.org/p/chromium/issues/detail?id=638180

ということで上記オプションを付けて再度実施します。

$ google-chrome --no-sandbox
libGL error: No matching fbConfigs or visuals found
libGL error: failed to load driver: swrast
[2675:2694:0220/134407.629731:ERROR:bus.cc(393)] Failed to connect to the bus: Failed 
~省略~

色々エラーが出ますがchromeは起動します。但し、文字が化けています。
image.png

日本語が化けているので日本語フォントを以下のようにしてインストールし、再度上記コマンドを実施します。ライセンス的に問題がないtakaoフォントを使用します。(他の日本語フォントでも可)

$ sudo apt install fonts-takao
$ google-chrome --no-sandbox

image.png

文字化けについての参考ページは以下です。
https://qiita.com/MERIK/items/ef4ecf7a51f89c403e94

あとがき

chrome起動時のエラーとかは無視してますが、これで表題の環境からchromeは起動できるようになると思います。
間違っている個所などあれば指摘してください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした