Docker部署在线绘图Drawio

本文参考：幽夜草博客

步骤一、Docker运行容器后删除，拷贝配置文件

运行容器

docker run -dit --name=drawio-test jgraph/drawio

创建配置文件存放路径，拷贝出配置文件到本机路径

mkdir /opt/drawio && cd /opt/drawio
docker cp drawio-test:/usr/local/tomcat/webapps/draw/js/PreConfig.js ./
docker cp drawio-test:/usr/local/tomcat/webapps/draw/js/PostConfig.js ./

停止并删除容器

docker rm -f drawio-test

步骤二、正式创建容器

docker run -dit --name=drawio \ 
-p 本机端口:8080 \ 
-v /opt/drawio/PostConfig.js:/usr/local/tomcat/webapps/draw/js/PostConfig.js \ 
-v /opt/drawio/PreConfig.js:/usr/local/tomcat/webapps/draw/js/PreConfig.js \ 
--restart=always jgraph/drawio

步骤三、修改配置文件

vim /opt/drawio/PreConfig.js

修改原配置文件中的

window.DRAWIO_CONFIG = null;

一行为

window.DRAWIO_CONFIG = {"defaultVertexStyle":{"fontSize":"14","strokeWidth":"1.5"},"defaultEdgeStyle":{"rounded":"1","fontSize":"14","strokeWidth":"1.5"}};

在配置文件的最后加上两行

urlParams['lang'] = 'zh'; //设置默认中文
urlParams['offline'] = '1'; //取消从模版创建

修改之前的配置文件

(function() {
  try {
	    var s = document.createElement('meta');
	    s.setAttribute('content', 'default-src \'self\'; script-src \'self\' https://storage.googleapis.com https://apis.google.com https://docs.google.com https://code.jquery.com \'unsafe-inline\'; connect-src \'self\' https://*.dropboxapi.com https://api.trello.com https://api.github.com https://raw.githubusercontent.com https://*.googleapis.com https://*.googleusercontent.com https://graph.microsoft.com https://*.1drv.com https://*.sharepoint.com https://gitlab.com https://*.google.com https://fonts.gstatic.com https://fonts.googleapis.com; img-src * data:; media-src * data:; font-src * about:; style-src \'self\' \'unsafe-inline\' https://fonts.googleapis.com; frame-src \'self\' https://*.google.com;');
	    s.setAttribute('http-equiv', 'Content-Security-Policy');
 	    var t = document.getElementsByTagName('meta')[0];
      t.parentNode.insertBefore(s, t);
  } catch (e) {} // ignore
})();
window.DRAWIO_BASE_URL = 'http://localhost:8080';
window.DRAWIO_SERVER_URL = window.DRAWIO_BASE_URL + '/';
window.DRAWIO_VIEWER_URL = '';
window.DRAWIO_LIGHTBOX_URL = '';
window.DRAW_MATH_URL = 'math/es5';
window.DRAWIO_CONFIG = null;
urlParams['sync'] = 'manual'; //Disable Real-Time
urlParams['db'] = '0'; //dropbox
urlParams['gh'] = '0'; //github
urlParams['tr'] = '0'; //trello
urlParams['gapi'] = '0'; //Google Drive
urlParams['od'] = '0'; //OneDrive
urlParams['gl'] = '0'; //Gitlab

修改后的配置文件

(function() {
  try {
	    var s = document.createElement('meta');
	    s.setAttribute('content', 'default-src \'self\'; script-src \'self\' https://storage.googleapis.com https://apis.google.com https://docs.google.com https://code.jquery.com \'unsafe-inline\'; connect-src \'self\' https://*.dropboxapi.com https://api.trello.com https://api.github.com https://raw.githubusercontent.com https://*.googleapis.com https://*.googleusercontent.com https://graph.microsoft.com https://*.1drv.com https://*.sharepoint.com https://gitlab.com https://*.google.com https://fonts.gstatic.com https://fonts.googleapis.com; img-src * data:; media-src * data:; font-src * about:; style-src \'self\' \'unsafe-inline\' https://fonts.googleapis.com; frame-src \'self\' https://*.google.com;');
	    s.setAttribute('http-equiv', 'Content-Security-Policy');
 	    var t = document.getElementsByTagName('meta')[0];
      t.parentNode.insertBefore(s, t);
  } catch (e) {} // ignore
})();
window.DRAWIO_BASE_URL = 'http://localhost:8080';
window.DRAWIO_SERVER_URL = window.DRAWIO_BASE_URL + '/';
window.DRAWIO_VIEWER_URL = '';
window.DRAWIO_LIGHTBOX_URL = '';
window.DRAW_MATH_URL = 'math/es5';
window.DRAWIO_CONFIG = {"defaultVertexStyle":{"fontSize":"14","strokeWidth":"1.5"},"defaultEdgeStyle":{"rounded":"1","fontSize":"14","strokeWidth":"1.5"}};
urlParams['sync'] = 'manual'; //Disable Real-Time
urlParams['db'] = '0'; //dropbox
urlParams['gh'] = '0'; //github
urlParams['tr'] = '0'; //trello
urlParams['gapi'] = '0'; //Google Drive
urlParams['od'] = '0'; //OneDrive
urlParams['gl'] = '0'; //Gitlab
urlParams['lang'] = 'zh'; //设置默认中文
urlParams['offline'] = '1'; //取消从模版创建

步骤四、开启宝塔面板反向代理

配置保持默认即可，无需特别配置

效果展示