MacでPythonのGUIライブラリをDocker Container内のJupyterlabから稼働させる方法

【2022.2.2追記】

docker composeとdockerfileで設定する完全版の方もご覧ください。
【完成版】MacでPythonのGUIライブラリが使えるDockerの設定方法



現在Pythonを勉強中です。

環境は、

  • マシン：MacBook Pro
  • OS：macOS Catalina（10.15.7）
  • 開発環境：Docker Desktop
  • エディタ：JupyterLab、Sublime Text

DockerにUbuntu公式のImageを使用、それから作成したContainerにPythonやJupyterlabを入れ、Tkinterを使えるようにしたい。

というのは、現在Pythonの教科書として、森 巧尚 著『Python 1年生 体験してわかる！会話でまなべる！プログラミングのしくみ』を使用中。

この本は簡潔丁寧に解説してくれているので、本当の初心者には良いが、少しかじった人だとクドく感じるかもしれない。（Amazonだと試し読みできるので確認してみるのも良い）

進んでいくと、アプリを作る項目に入ります。
その時にTkinterをインポートすることになりますが、Docker内にPythonを入れている状況だとTkinterは稼働しないことが判明。
調べたところによると、X11をMacにインストールして、Dockerにも何かしらインストールしなければならないようです。

結論から申し上げると、2日かけて無事Docker Container内でJupyterlabからTkinterを稼働させることに成功しました。

では、DockerでJupyterlabからTkinterを稼働させる方法を、順に説明していきます。



目次



1 MacにXQuartzをインストール

XQuartzをXQuartz.orgからdmgファイルをダウンロード、ダブルクリックするとインストール画面になるので、それに従って行けばMacにXQuartzをインストールすることができます。



2 XQuartzの環境設定を開く

XQuartzはアプリケーション/ユーティリティ フォルダに格納されます。
XQuartzを立ち上げ、ファイルメニュー→環境設定→セキュリティで、「接続を認証」のチェックを外し入れ、「ネットワーク・クライアントからの接続を許可」のチェックを入れます。
このあと、XQuartzを必ず再起動させます（再起動させないと設定が反映されないため）。

本当は、「接続を認証」のチェックをしてセキュリティを維持した方が良いのですが、チェックをするとJupyterlabにてpythonを実行するとエラーになるので「接続を認証」のチェックを外しています。
この辺については自己責任でお願いいたします。



3 Docker Imageを導入

Docker Hubに会員登録（無料）し、Docker Desktopを入れて起動していることが前提になります。

今回はUbuntuの公式Imageを導入することにします。

Docker Hubのサイトの一番上の検索窓に「ubuntu」と入れ検索すると、ubuntuの「Official Image」が出てくると思います。
ここからダウンロードしても良いのですが、Terminalに

$ docker run -it ubuntu bash

と打ち込むと、自動的にDocker HubからubuntuのImageを入れ込んでくれます。
そしてrunしたので、Containerも一緒に作成されています。



４ Containerを作成

既に3で、Containerも作成されていますので割愛します。



5 Containerの中に入る

Terminalで

$ docker ps -a

と打つと、作成されたContainerの一覧が出てきます。
該当するContainerのSTATUSが「Exited 〜」の場合、

$ docker restart コンテナ名またはID

でSTATUSを「Up 〜」にします。

その後、Terminalに

$ docker exec -it コンテナ名 bash

と打ち、Containerの中に入ります。

Terminalの表示が、「root@コンテナID:/#」に変わります。これがContainerの中に入っている証拠になります。



6 ContainerにPythonをインストール

Terminalに

# apt-get update

と入れ、Containerの中をアップデートします。
次に

# apt-get install -y python3 python3-pip

と打ち、pythonをインストールします。
pythonとpython3-pipのインストーラなどを事前に用意する必要はありません。上記コマンドを実行すると自動で探してきてインストールしてくれます。以下のインストールでも同様です。
（python3-pipは後に必要になるので、一緒に入れます）

テキストラインが多めに出てきますが気長に待ちましょう。
Terminalの最終行に「root@コンテナID:/#」が現れたら、インストール終了です。



7 libx11-devのインストール

X11に関するもののようですが、正体は理解していません！
Terminalに

# apt-get update

と入れ、Containerの中をアップデートします。
次に

# apt-get install libx11-dev

と打ち、libx11-devをインストールします。

途中で、Terminal上に「〜[Y/n]〜」が出ていたら、「Y」と打ちreturnキーを押してください。インストールが進みます。

【2022.2.4追記】これを自動的にスルーする方法をDockerfileにて記述することが出来ます。
詳細は、【まとめ】MacでPythonのGUIライブラリが使えるDockerの設定方法をご覧ください。



8 python3-tkをインストール

Tkinterに関係するものらしいですが、こちらも正体が分かりません。

Terminalに

# apt-get update

と入れ、Containerの中をアップデートします。
次に

# apt-get install python3-tk

と打ち、python3-tkをインストールします。

途中で、Terminal上に「〜[Y/n]〜」が出ていたら、「Y」と打ちreturnキーを押してください。
その後、地域一覧が出て来て現在の居住地域を尋ねてくるので、今お住いの地域の数字を入れreturnキーを押してください。
次に、現在の居住地に近い都市名（ほぼ首都名）が出てくるので、今お住いの地域近い都市の数字を入れreturnキーを押してください。インストールが進みます。
（以上は、日本に居住の場合、地域はAsia、都市はTokyoで良いと思います）

【2022.2.4追記】これを自動的にスルーする方法をDockerfileにて記述することが出来ます。
詳細は、【まとめ】MacでPythonのGUIライブラリが使えるDockerの設定方法をご覧ください。



9 Jupyterlabをインストール

Terminalに

# pip3 install jupyterlab

と打ち、Jupyterlabをインストールします。

以上で、Container内には必要なものが入りました。



10 ContainerをDocker Imageに変換する

pythonからJupyterlabまでをインストールしたContainerをDocker Imageに変換します。

Containerのままですと、Jupyterlabが上手く稼働しない（接続できない）のと、このContainerを保存するためです。

もしContainer内に入っている場合（Terminalの最終行が「root@コンテナID:/#」）は、

# exit

と打ってContainerから出ます。（Terminalの最終行が「皆さんのMacの名前:~ ユーザ名$」となります）

Terminalに

$ docker commit 変換したいコンテナ名 新しいイメージ名

と打つと、新しいDocker Imageが作成されます。

新しいDocker Imageを確認するには、Terminalに

$ docker images

と打つと、Docker Imageの一覧が現れますので、これで確認します。



11 新しいDocker ImageからContainerを作成

実行するに当たって、まず皆さんのMacのIPアドレスを調べてください。
アップルメニュー→システム環境設定→ネットワークのウインドウ内にIPアドレスが小さな文字で書かれていると思います。
あとでコピペします。

Terminalに以下のコマンドを入力します。長いですが1行で書いてください。

$ docker run -e DISPLAY="皆さんのIPアドレス:0.0" -v ~/Desktop/work:/work -p 8888:8888 --name 新しいコンテナ名 イメージ名 jupyter lab --ip=0.0.0.0 --allow-root --NotebookApp.token=""

「皆さんのIPアドレス」は、先程調べたものです。「新しいコンテナ名」は適宜つけてください。「イメージ名」は前項10で名付けた「新しいイメージ名」と同じです。

実行したら、Terminalで

$ docker ps -a

と打つと、作成されたContainerの一覧が出てきます。
該当するContainerのSTATUSが「Exited 〜」の場合、

$ docker restart コンテナ名またはID

でSTATUSを「Up 〜」にします。

また、XQuartzが立ち上がっているか確認してください。



【2022.2.4追加】11-add XQuartzに接続する

XQuartzに接続します。
XQuartzが立ち上がっていてもいなくても構いません。最初のxhostコマンドを打つと自動的にXQuartzが立ち上がります。

最初に、XQuartzへのすべてのアクセス制限を復活させます。

$ xhost -

アクセス制限を復活したかを確認します。以下の「access control〜」の1文のみ出力されたら成功。

$ xhost
access control enabled, only authorized clients can connect

次に、localhostからのアクセスのみを許可します。「localhost being added〜」が出れば成功です。

$ xhost + localhost
localhost being added to access control list


因みに、

$ xhost +

は、接続全開放なので、安全上あまりよろしくないとのこと。



XQuartzは立ち上がったままにしてください。
XQuartzを終了すると、localhostからのアクセスのみを許可も終了してしまいます。



12 Jupyterlabをブラウザで開く

ブラウザを開き、URL欄に

localhost:8888

と入力し、Jupyterlabを開きます。（画像はlocalhost:1111になっていますが気にしないでください）



13 JupyterlabでPythonを実行する

Jupyterlabの画面左のサイド画面から「work」フォルダをダブルクリックします。

メイン画面の「Notebook」の「Python 3」ボタンを押すと、新規ファイルが開き、「work」フォルダに格納されます。

このファイルに、以下のコマンドを入力します。

import tkinter as tk
root = tk.Tk()
root.mainloop()

と打ってshift＋returnで実行します。

上記のようなウインドウが出たら成功です。



【2022.2.4追加】13-add コンテナを終了したあとは…

コンテナを終了したあとは、Terminalにて必ず以下の処理をしてください。

$ xhost - localhost
localhost being removed from access control list

でれで、XQuartzへのすべてのアクセス制限が復活されます。



1４ おわりに―今後の課題

一応Docker内でTkinterを稼働させることができましたが、セキュリティ関係はまだ手付かずです。
Xauthorityの設定方法を調べねばなりません。
コレを今後の課題としまして、精進していく次第です。



参考サイト










コメント

コメントを投稿

よく読まれている記事

CSSボタンでテキストを天地中央に揃えるとき、なぜボタン高と行高を一緒にするのか

イメージ
表題の件が気になり調べたものを共有した方がイイかなと思い公開してみる。 自身の中でまだよく噛み砕けていないので判りづらい箇所があるかと思うが、そこはご寛恕を。 参考 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification（日本語訳） Eric A. Meyer著. 株式会社クイープ訳. CSS完全ガイド第2版 . オライリージャパン, 2010 インライン要素とは何か 文書構造を構成するブロックレベル要素内の特定箇所にある特定の機能や論理的な意味を付加する要素をいう。それ自身の前後に改行を生成しない。例としては、a要素、em要素、span要素など。 インライン要素には非置換要素と置換要素とがある。今回は置換要素には触れない（置換要素の代表例はimg要素）。 非置換要素とは何か 要素に囲まれた内容がそのまま表示される要素。HTMLやXHTMLの要素の大半は非置換要素である。 インライン非置換要素の特徴 widthとheightは適用されない。 背景はコンテンツエリアとpaddingに適用される。 上下marginは、事実上適用されない。 左右paddingは、要素の先頭と末尾のみに適用される。 上下paddingは、要素の背景を上下に伸ばすが、行の高さに影響しないため、背景色がある場合は上下の行（実際は上の行）に重なってしまう。 line-heightは何を制御しているか 行高を指定するline-heightは単純に行間を制御しているのではなく、 leadingという、コンテンツエリアの上下にある余白を制御 している。 leadingはline-heightとfont-sizeとの差 であり、 この差を等分 して コンテンツエリアの上下に加えることによって行間が決まる （コンテンツエリア＋leadingをインラインボックスという）。 コンテンツエリアとは、インライン非置換要素では、要素内の全ての文字を繋ぎ合わせたボックスでfont-sizeの値と同じ高さになる。 図解すると以下の通り。 つまり、line-heightが設定され...
Read more »

FullCalendarの導入からカレンダー毎の色指定まで

イメージ
2012年7月の拙サイト改装2回目時に既に導入している「 FullCalendar 」について、導入からGoogleカレンダーの複数読込み、カレンダー毎の色指定までをおさらい。基本的な流れはFullCalendarサイトの解説を踏襲。 デフォルト状態 下記改修を施した後 1. ダウンロード Downloadページ から「fullcalendar-1.5.3.zip」をダウンロードして解凍後、自サーバーへアップ。 2. fullcalendarのCSSとJSを読込む <head> タグ内に以下を記述。 <link rel="stylesheet" type="text/css" href=" fullcalendar.css " /> <script type="text/javascript" src=" fullcalendar.js "></script> <script type="text/javascript" src=" fullcalendar.min.js "></script> <script type="text/javascript" src=" gcal.js "></script> 赤字部分は各自の階層に合うように適宜変更。 3. FullCalendarにGoogleカレンダーを読込むためのjQueryを <head> タグ内に記述 必ず <script> タグで囲むこと。 <script type="text/javascript"> $(document).ready(function() { $(' #calendar ').fullCalendar({ // あとでここに色々追記 }) }); </script> 4. <body> タグ内のFullCalendarを挿入したい箇所にID属性を挿入 <...
Read more »

FacebookページのフィードURLを取得しウォールを自サイトに表示

イメージ
結局未採用だけど、折角調べて試してみたので記録しておく。 参照サイトは jQueryでFacebookページのウォールを自分のサイトに表示する方法（簡易バージョン） | webOpixel FacebookページのフィードURL取得は（取得ツール付き） FacebookページのフィードURLを取得してフィードリーダーで購読する方法: 小粋空間 以上、深謝。 自分のFacebookページのフィードURLを取得 上記参照サイトでは、自FacebookページのID確認方法について書かれているが、小粋空間さんのページに「自FacebookページのフィードURL取得ツール」があるので、自FacebookページのURLを入力すれば、フィードURLを表示してくれる。但しフォーマットはAtom1.0なので、RSS2.0フォーマットは以下のように変更する。 小粋空間さんの取得ツールで取得したフィードURL https://www.facebook.com/feeds/page.php?format= atom10 &id= [取得したID] RSS2.0フォーマットに変更後 https://www.facebook.com/feeds/page.php?format= rss20 &id= [取得したID] jQueryを自サイトに貼込み webOpixelさんからjQueryをを拝借し、自サイトに貼り込む。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { var formatData = function(date) { var d = new Date(date); return (d.getFullYear() + '.' + ("0"+(d.getMonth()+1)).slice(-2) + '.' ...
Read more »