【完成版】MacでJupyterlabからPythonのGUIライブラリが使えるDockerの設定方法【Docker & Jupyterlab環境】

PythonのGUIライブラリをDocker Container内で稼働させようと模索して、よもやカスタマイズしたDocker Imageを作成するどころかDockerfileやらDocker Composeやらを書くことになる日がこんなに早く来るとは思っても見ませんでした。

習うより慣れろ

この言葉、やはり真理を突いています。

この言葉の真意、それは「インプットしたら即座にアウトプットしろ」。

真意を理解できた、そんな期間でした。



さて、

にて、Docker Container内に構築したPythonとGUIライブラリを、Jupyterlabを介して稼働させる方法を模索してきました。

改めて、何をしたいか、何が必要か、をまとめ、こちらの環境もまとめてから、完成したDockerfileとDocker Composeを公開し、どのようにしたかを解説していきます。



目次



開発環境

環境は、

  • マシン：MacBook Pro
  • OS：macOS Big Sur（11.6.1）
  • 仮想環境：Docker Desktop
  • エディタ：JupyterLab、Sublime Text

上記に追加で、予めXquartzの導入と設定が必要になります。
導入および設定の方法は、拙ブログの『1 MacにXQuartzをインストール』および『2 XQuartzの環境設定を開く』をご覧ください。



したいこと

  • PythonをDockerで動かしたい
  • Pythonは、同じくDockerに導入したJupyterlabで編集したい
  • PythonのGUIライブラリ（Tkinter、pillow、openpyxl）もJupyterlabで編集したい
  • PythonのGUIライブラリの結果はMacのデスクトップ上に表示したい
  • Jupyterlabで編集したPythonファイルはMacのデスクトップ上に保存したい
  • これらを一操作でおこなうためのDockerfileとDocker Composeを作成したい

つまり、Python、PythonのGUIライブラリ、Jupyterlab、その他必要なものをDocker Imageに入れ込み、それからDocker Containerを作成し、JupyterlabでPythonプログラミングをし、GUIの結果をMacのデスクトップ上に表示し、作成したPythonファイルをMacのデスクトップ上に保存する。

そんなDocker ImageおよびDocker Containerを構築するためのDockerfileとDocker Composeを作成したいのです。



階層構造

ファイルのディレクトリは以下の通りに予め設定します。

desktop
  └python_workフォルダ
  　　　　　├Docker Composeファイル
  　　　　　├Dockerfile
  　　　　　└workフォルダ
          └pythonファイル（jupyterlabで作成・編集）


Dockerfileの解説

FROM ubuntu:latest

LABEL version="2.0" \
      maintainer="eszett design" \
      description="Dockerで構築したJupyterlabからtKinterやopenpyxlなどを操作できるDocker imageとContainerを作成"

# TZを設定する adding in Feb. 3 2022
ENV TZ Asia/Tokyo
RUN apt-get update \
    && apt-get install -y tzdata \
    && rm -rf /var/lib/apt/lists/* \
    && echo "${TZ}" > /etc/timezone \
    && rm /etc/localtime \
    && ln -s /usr/share/zoneinfo/Asia/Tokyo /etc/localtime \
    && dpkg-reconfigure -f noninteractive tzdata
    
ENV DEBIAN_FRONTEND=noninteractive

RUN apt-get update && apt-get install -y \
		python3 \
		python3-pip \
		libx11-dev \
		python3-tk
        
RUN pip3 install jupyterlab \
		pillow \
		openpyxl \
		pandas

解説は、拙ブログの『Dockerfileを書く』でしていますが、ここで再度解説します。

1行目：FROMにはベースとなるDocker Image名を書きます。ubuntuの公式Imageを使用しました。

3〜5行目：LABELは、Dockerfileの情報を書きます。Dockerfileのバージョンと作成者、説明を書き込みました。

7〜15行目：タイムゾーンを設定します。※必要ならば入れてください。

17行目：これで、途中で地域名と都市名を尋ねてくる箇所を無視できます。（下記参照）

19〜28行目：RUNは、今回インストールするものを書きます。

20、21行目のpython3およびpython3-pipは、pythonをインストールします。

22行目のlibx11-devは、XQuartz用です。※Tkinterを使用する場合に必要です。事前作業としてXQuartzをPCに入れておいてください。

23行目のpython3-tkは、Tkinterです。※今回必要です。

25行目のjupyterlabは、jupyterlabをインストールします。

26行目のpillowは、画像処理ライブラリです。※必要ならば入れてください。

27行目のopenpyxlは、pythonでexcelを操作するモジュールです。※必要ならば入れてください。

28行目のpandasは、pythonでデータ解析を容易にするデータ解析ライブラリです。※必要ならば入れてください。


CMDを書いていませんが、こちらはDocker Composeに書いています。
（DockerfileにCMDを書いてみたが上手く作動しなかったので）


なお、『python3-tkがインストールできない問題と再build』にて、python3-tkがインストールできないことを書きましたが、17行目の

ENV DEBIAN_FRONTEND=noninteractive

を追加することで、途中で地域名と都市名を尋ねてくる箇所を無視してインストールできるようになります。



Docker Composeの解説

version: "3.8"
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      - DISPLAY=host.docker.internal:0.0
    volumes:
      - ./work:/work
    ports:
      - 8888:8888
    image: test:latest
    container_name: python_work
    command:
      jupyter lab
        --ip=0.0.0.0
        --allow-root
        --notebook-dir='/work'
        --LabApp.token=''

1行目：Composeのバージョンです。
'3'だけだと不具合が出るとか出ないとかという情報がありましたので、最新バージョンの'3.8'を指定しました。

2行目：必須です。
詳細は『Compose ファイル バージョン 3 リファレンス | Docker ドキュメント』をご覧ください。

3行目：必須ですが名前は任意です。
最初「jupyter」としましたが、ビルド時に警告が出ましたので、無難に参考サイトなどで使われる「web」にしました。

4〜6行目：ビルド時に必要なDockerfileの、Composeファイルから見たパスとファイル名を指定します。
前述の階層構造の通り、DockerfileはComposeファイルと同一階層にあるので、5行目contextは同一階層を表す「.」（ピリオド）を指定します。

7〜8行目：環境変数といいます。
これでContainer内でプログラムしたPythonのGUIを自分のPCで表示するために、自分のPCのIPアドレスを指定します。これを行うためにXquartzが必要になります。
自分のPCのIPアドレスを変数で指定する方法は、Docker for Macを使用していれば「host.docker.internal」で指定できます。

9〜10行目：自分のPC上の指定フォルダとContainer内のフォルダを接続します。
これにより、PythonファイルはContainer内で編集しつつ保存は自分のPC上の指定フォルダにされるようになります。
また逆に、Container側に読み込ませたいファイルをこのフォルダに入れると、Container側にアップロードしたかのようになります。

11〜12行目：自分のPCとContainerを接続します。
「自分のPC：Container」の順です。自分のPCは「8888」以外でも指定できます。

13行目：Containerを起動させるイメージ名の設定です。任意の名称です。
Docker ComposeでDocker Imageを新規作成する場合、ここで「イメージ名：タグ名」を指定すると、新規作成されるDocker Imageにイメージ名とタグ名が付与できます。
検索すると、Docker Imageに名前が付けられないということが多く見受けられましたが、これでもう大丈夫です。
イメージ名を指定しないと、作成されたイメージは＜none＞となり、いわゆる「dangling」状態となります。

14行目：新規作成するContainer名を設定します。任意の名称です。

15〜20行目：Dockerfileで指定するコマンドを上書きします。
DockerfileでCMDで書くより整理しやすいので、こちらで指定しました。
Jupyterlabを設定するコマンドになります。「 --notebook-dir='/work'」は、10行目の「：」の右側と同じ階層を指定します。「-LabApp.token=''」は、これがないと、ブラウザでJupyterlabにアクセスした時にTokenと呼ばれるものを入力するよう要求されますが、それを回避するものです。



ImageとContainerの作成

これでようやく自動でImageとContainerの作成ができるようになりました。

作成方法は、まずTerminalを起動し、TerminalにてDocker Composeのある階層に移動します。自分の場合は、Docker Composeはデスクトップ上のtestフォルダ内にあるので、Terminalに

$ cd ~/Desktop/python_work

と打ち込みpython_workフォルダ内に移動します。

次に、

$ docker-compose up -d --build

と打ち込むと、ImageとContainerの作成に進みます。
数分で作成が完了しますので、ImageとContainerが作成されているかを確認します。

新規にTerminalを立ち上げて、

$ docker images

と打ち込むと、作成済みのImageの一覧が現れます。ここに指定した名前のImageがあれば作成成功です。

次に、Terminalに

$ docker ps -a

と打ち込むと、作成済みのContainerの一覧が現れます。ここに指定した名前のContainerがあれば作成成功です。



また、Docker Desktopがバージョンアップしたことで、Docker DesktopのDashboardにてDocker ImgeおよびContainerの閲覧と削除が簡単に出来るようにもなりました。

Docker DesktopのDashboard上のDocker Imge


Docker DesktopのDashboard上のContainer

その他のコマンドは以下のエントリをご参照ください。



【2022.2.4追加】前回と同じImageとContainerを作成する時は…

Docker Desktopでimageとcontainerを削除してもう一度同じimageを作成する場合、前回のimageのキャッシュが残っているので、キャッシュは消去して最初からimageを作成したい場合は、以下の通りにします（キャッシュそのままで再作成の場合は前項のコマンドでOK）。

Terminalを起動し、TerminalにてDocker Composeのある階層に移動します。

$ cd ~/Desktop/python_work

と打ち込みpython_workフォルダ内に移動します。

次に、

$ docker-compose build --no-cache

と打ち込むと、前回のimageのキャッシュを消去して最初からImageとContainerを作成し直します。
数分で作成が完了しますので、ImageとContainerが作成されているかをDocker Desktopで確認します。

この時、containerは稼働していませんので、稼働させるには

$ docker-compose up -d

と打ち込むか、Docker Desktopの該当するcontainerのスタートボタンを押します。



【2022.2.4追加】Jupyterlabをブラウザで開きtkinterを稼働させる

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からのアクセスのみを許可も終了してしまいます。



Jupyterlabをブラウザで開く

ブラウザを開き、URL欄に

localhost:8888

と入力しJupyterlabを開きます。

または、Docker Desktop上の該当するcontainerの「Open in Browser」ボタンを押してJupyterlabを開きます。

あとは、Jupyterlabでtkinterを開くPythonを実行し、tkinterのウインドウが出たら成功です。
（詳細は、MacでPythonのGUIライブラリをDocker Container内のJupyterlabから稼働させる方法の「11-add」以降をご覧ください）



今後の課題

まだまだ知らないことだらけです。

  • Xauthorityの設定方法やセキュリティ上の問題
  • CMDの書き方
  • 詳細の理解

XQuartzへの安全な接続については、長いこと調べてようやく決着がつきました。

CMDは、一度書いて試してみましたが全く反応していないみたいで挫折しています。

ここで少しインプットしようと、書籍を購入しました。

継続は力なり、です。



参考サイト










コメント

コメントを投稿

よく読まれている記事

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 »