Zenn
🕌

Mac で Docker コンテナで起動した Google Chrome の画面を表示する

2023/03/07に公開
macOS
XQuartz
tech

tl;dr

  • X11 Forwarding することで Docker 上で起動した Google Chrome をクライアントの Mac で確認できる
    • ローカルでは XQuarts と socat をインストールする
  • Docker コンテナでは環境変数 Display にローカルマシンの IP アドレスを指定する

状況

  • RSpec のテストで Chrome を Headfull にして画面をみたかった
    • コンテナには既に Chrome のセットアップが含まれており、別コンテナにはしない
    • 既存記事では Chrome を別コンテナにする記事はあったが参考にできず。例 1、例 2
  • 既存コードベースで E2E テストが利用できているが他の開発者は主に Windows 環境を利用
    • Windows & 既存コードに影響を与えず同じことがしたい
  • ググったが Docker & MacOS & RSpec(Capybara) でぴったりの記事がなかった
    • ので、記録をまとめました

ローカル側のセットアップ

必要なツールをインストールします

brew install socat
brew install --cask XQuartz

XQuartz の設定を変更するため XQuartz を起動して、XQuartz メニューの「設定…」を開きセキュリティタブに切り替えます。

  • 「接続を認証」のチェックを外す。
    当方の環境ではセキュリティリスクを許容し、設定をオフにしています。チェックを有効なまま利用する設定は下に補足しています。
  • 「ネットワーク・クライアントからの接続を許可」のチェックを付ける
接続を認証にチェックを付けた場合にすべきこと

Mac 上で生成された ~/.Xauthority を Docker の /root/.Xauthority にパーミッション 600 でコピーする必要があります。
コピーしてコンテナ上で xauth list をしてマジッククッキーのリストが出てくれば認証しての転送が可能となります。

xauth list

テストやコンテナの再作成のタイミングでコピーするのは煩雑になるので、実用するにはコンテナ定義を変更してボリュームがマウントできるようにすると良いと思います。こちらをご参考に。

XQuartz を再起動して、socat を待ち受けさせます。

socat TCP-LISTEN:6000,reuseaddr,fork UNIX-CLIENT:\"$DISPLAY\" &

ポートの待ち受け状況とローカルの IP アドレスを確認します。

sudo lsof -i:6000
# プロセスが確認できれば OK
ifconfig en0 | grep "inet " | cut -d " " -f2

ローカルの IP アドレスは後ほど利用しますので控えておきます。

コンテナ側セットアップ

次のパッケージがインストールされている想定です。

  • xserver-xorg
  • x11-apps
  • google-chrome-stable

$DISPLAY 環境変数としてローカル PC を指定します

DISPLAY=192.168.0.1:0

Google Chrome を単独で起動して確かめてみる

google-chrome-stable --no-sandbox

これで画面が立ち上がってくれば RSpec からでも起動可能となりました。

以上

X11 Forwarding を利用してコンテナで実行している Chrome の画面を表示する方法を確認しました。

参考にしたサイト

Discussion