Visual Studio Code で Docker Desktop(Mac)のTensorflowコンテナの開発環境を構築(グラフ表示、コード補完)手順

TensorFlowで学ぶ機械学習・ニューラルネットワークなる書籍を購入し、検証環境としてTensorFlow DockerイメージをUbuntuに構築し他ホストから接続するようにした。

それはそれとして、Jupyter notebook でコード書くより、VSCodeで書いたほうが捗るのかなという思いもあり、Dockerコンテナにopensshサーバー入れて、Visual Studio Code からリモートにSSH経由で接続するプラグインで接続すればよいかななどと一瞬考えたけど、ちょっと違和感あり。VSCodeなら、Dockerのコンテナに直接接続する拡張くらいありそうだと少ししらべらら、ありました。

1.Visual Studio CodeをDcokerコンテナに接続する Remote Containers 拡張

こいつをインストール

インストールおわると、ウィンドウの左下に以下のようなマークが表示されるのでクリック

2.Mac に Docker Desktop をインストールしてコンテナを動かしておく

っと、クリックする前に、Mac に Docker Desktop をインストールして、Docker コンテナとしてTensorflowをインストール起動しておく

3.コンテナに接続

再度画面の左下をクリックすると、以下のような選択ができるプルダウンが表示されるので、「Attach to Running Container」 を選択する。

起動しているコンテナが表示されるので、選択。

接続された。Terminarlを表示すると、プロンプトなどで確認できる。

しかしこれは便利すぎる。

一時的な開発環境は、Mac のDocker Desktop のコンテナとして構築すれば環境を汚さずにすむし、提供されれているコンテナイメージが使えれば環境構築も不要じゃないか。

4.試しにサンプルコードとグラフ

 

あと、グラフを出してみる。

TensorflowのDockerイメージには、matplotlib ほか、必要なものはインストール済み。

4.1 グラフをファイルに出力

savefig() でファイルに書き出してみる。

from pylab import *
from numpy import *
x = arange(–3,3,.1)
y = [y1**3 for y1 in x]
plot(x,y)
plt.savefig(“/root/workspaces/tf/fig.png”)

4.2 グラフをブラウザに出力

use(“WebAgg”) として、show()　すると、ブラウザが立ち上がりそちらにグラフが描画される

import matplotlib
matplotlib.use(“WebAgg”)
import numpy as np
import matplotlib.pyplot as plt
import random
fig,ax = plt.subplots()
ax.bar(np.arange(10),[random.randrange(0,10) for x in range(10)],1)
plt.show()

4.3 グラフをVSCodeに出力

画面最下段のアイコンをクリックして、ポートマッピングの一覧を表示、VSCodeのWebビューに表示することもできた。

5.Pythonコード補完

あと、jupyter notebook だとコード補完が効かないのがやはり物足りない。

Python Language Server の設定を Microsoftに変更

VSCode上でコード補完OK

なかなか学びが多かったな。