作図Webアプリ「draw.io」をLAN上に構築する

draw.ioはUML、ネットワーク図、ポンチ絵他、様々な図を掛けるWebツールで、最近はOfficeの代替お絵かきツールとしても活用が増えています。

www.draw.io

Flowchart Maker & Online Diagram Software

https://www.draw.io

draw.io is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams

依存度が高くなるにつれて、インターネットサイトなだけにいつか無くなるんじゃないか、サーバがダウンしたら資料作れなくなるかも、と心配になってくるので、ローカルに構築してインターネットに出て行かなくても使えるようにしておきます。

1 構築手段を調べる
2 環境
3 構築
4 使ってみる
5 作成データの保存先は今後も増える

構築手段を調べる

draw.ioはgithubでソース公開されています。javaのWebアプリとして作られていてTomcatを入れればデプロイ出来ます。

GitHub

jgraph/drawio

https://github.com/jgraph/drawio

Source to www.draw.io. Contribute to jgraph/drawio development by creating an account on GitHub.

しかし世の中マイクロサービスの時代、構築もビルド無しのdocker一発で済ませたいのが楽をしたい人の性です。Docker Hubにdockerイメージが公開されているのでこれを利用します。

hub.docker.com

Docker Hub

https://hub.docker.com/r/fjudith/draw.io/

環境

docker-ceをインストール済みのCentOS7上にコンテナイメージを入れてHTTP:8080でアクセス出来るようにします。この図もdraw.ioで描いています。

構築

Docker Hubで公開されている情報通りコンテナイメージを入れます。OpenJDK8、Tomcat9が同梱されたコンテナイメージになっています。

[root@spock]# docker run -it --rm --name="draw" -p 8080:8080 -p 8443:8443 fjudith/draw.io
Unable to find image 'fjudith/draw.io:latest' locally
latest: Pulling from fjudith/draw.io
e7c96db7181b: Pull complete
f910a506b6cb: Pull complete
b6abafe80f63: Pull complete
d8c966ddef98: Pull complete
15b754e99755: Pull complete
4227393eb352: Pull complete
b0f94db3e314: Pull complete
d689649f37fb: Pull complete
38fe4a3e83e7: Pull complete
616291d692d1: Pull complete
Digest: sha256:2bfaf447d3d1a7b523efb3e2674f2144a619b7d5ff162f2eaf9830c01b165fc7
Status: Downloaded newer image for fjudith/draw.io:latest
Generating Self-Signed certificate
Keystore type: PKCS12
Keystore provider: SUN

Your keystore contains 1 entry

      (snip)

Append https connector to server.xml
Using CATALINA_BASE:   /usr/local/tomcat
Using CATALINA_HOME:   /usr/local/tomcat
Using CATALINA_TMPDIR: /usr/local/tomcat/temp
Using JRE_HOME:        /usr/lib/jvm/java-1.8-openjdk/jre
Using CLASSPATH:       /usr/local/tomcat/bin/bootstrap.jar:/usr/local/tomcat/bin/tomcat-juli.jar
13-Jun-2019 12:52:27.301 WARNING [main] org.apache.catalina.core.StandardContext.setPath A context path must either be an empty string or start with a '/' and do not end with a '/'. The path [/] does not meet these criteria and has been changed to []
13-Jun-2019 12:52:29.272 INFO [main] org.apache.catalina.startup.VersionLoggerListener.log Server version name:   Apache Tomcat/9.0.20
13-Jun-2019 12:52:29.272 INFO [main] org.apache.catalina.startup.VersionLoggerListener.log Server built:          May 3 2019 22:26:00 UTC
13-Jun-2019 12:52:29.272 INFO [main] org.apache.catalina.startup.VersionLoggerListener.log Server version number: 9.0.20.0
13-Jun-2019 12:52:29.273 INFO [main] org.apache.catalina.startup.VersionLoggerListener.log OS Name:               Linux

      (snip)

13-Jun-2019 12:52:47.825 INFO [main] org.apache.catalina.startup.Catalina.start Server startup in [14,942] milliseconds

無事Tomcat9が起動し8080ポートで待機し始めました。ホスト側のCentOS7で8080ポートを開けておきます。

# firewall-cmd --add-port=8080/tcp --zone=public --permanent
# firewall-cmd --reload

使ってみる

http://インストールしたCentOS7のIP:8080にブラウザアクセスしてみます。いつも使っている見慣れた画面が出てきました。

Languageをクリックすると日本語設定も出来ます。

新規作成画面。

画像保存画面。

http://www.draw.ioで使っているのと変わらない機能をローカルLAN上に構築することが出来ました。

作成データの保存先は今後も増える

コンプラ的に保存先としてgithubが使えない会社さんもあると思います。draw.io、GitLab両方のコミュニティでインテグレーションの議論があるようなので、いつかオンプレ構築したGitLabにも保存出来る日が来るかも知れません。