FROM python:3
USER root

RUN apt-get update
RUN apt-get -y install locales && \
    localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8
ENV TZ JST-9
ENV TERM xterm

RUN apt-get install -y vim less
RUN pip install --upgrade pip
RUN pip install --upgrade setuptools

# project specific settings
RUN apt-get -y install graphviz
RUN pip install diagrams

参考にしたのは以下の記事である。

qiita.com

本命のDiagramsのインストールに加えて、構成図を描画するために必要なgraphvizというソフトウェアも合わせてインストールしている。

RUN apt-get -y install graphviz
RUN pip install diagrams

graphvizのインストールを行わない場合、以下のようなエラーが発生して構成図を出力できないので注意が必要だ。

Traceback (most recent call last):
  File "simple.py", line 7, in 
    ELB("lb") >> EC2("web") >> RDS("userdb")
  File "/usr/local/lib/python3.8/site-packages/diagrams/__init__.py", line 139, in __exit__
    self.render()
  File "/usr/local/lib/python3.8/site-packages/diagrams/__init__.py", line 174, in render
    self.dot.render(format=self.outformat, view=self.show)
  File "/usr/local/lib/python3.8/site-packages/graphviz/files.py", line 207, in render
    rendered = backend.render(self._engine, format, filepath,
  File "/usr/local/lib/python3.8/site-packages/graphviz/backend.py", line 206, in render
    run(cmd, capture_output=True, cwd=cwd, check=True, quiet=quiet)
  File "/usr/local/lib/python3.8/site-packages/graphviz/backend.py", line 162, in run
    raise ExecutableNotFound(cmd)
graphviz.backend.ExecutableNotFound: failed to execute ['dot', '-Tpng', '-O', 'web_service'], make sure the Graphviz executables are on your systems' PATH

また、Remote - Containersの設定として、devcontainer.jsonのextensionsは以下のようにpythonとgitの拡張機能を追加した。

// .devcontainer/devcontainer.json
{
	"name": "Docker from Docker",
	"dockerFile": "Dockerfile",
	"mounts": [ "source=/var/run/docker.sock,target=/var/run/docker-host.sock,type=bind" ],
	"settings": { 
		"terminal.integrated.shell.linux": "/bin/bash"
	},
	"extensions": [
		"ms-azuretools.vscode-docker",
		"ms-python.python",
		"editorconfig.editorconfig",
		"donjayamanne.githistory",
		"eamodio.gitlens"
	]
}

[VS Code上でクラウド構成図を書く]

ここまでの準備ができたら、以下の内容でsimple.pyという名前の新規ファイルを作成し、保存する。

from diagrams import Diagram
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB

with Diagram("Web Service", show=False):
    ELB("lb") >> EC2("web") >> RDS("userdb")

ターミナル上でpython simple.pyを実行すると、下の画像（web_service.png）が出力された。ファイル名は、Diagramクラスの引数をスネークケースにしたものが使われるらしい。

f:id:kidani_a:20200626020023p:plain