使用Docker本地安装部署Draw.io绘图工具并实现远程访问协作办公

前言

提到流程图,大家第一时间可能会想到Visio,不可否认,VIsio确实是功能强大,但是软件为收费,并且因为其功能强大,导致安装需要很多的系统内存,并且是不可跨平台使用。所以,今天给大家推荐一款更实用的流程图软件—— Draw.io在线绘图工具。

其实,除了写代码,画图也是每个程序员必备的技能之一,我们经常接触有流程图、架构图等等。而且Draw.io结合cpolar内网穿透工具还可以增加共享和协作功能,提升团队工作效率,那么本篇文章就来教大家如何在docker部署draw.io绘图工具并且实现公网远程访问。

Docker本地部署在线绘图工具Draw.io并实现公网远程访问

1. 使用Docker本地部署draw.io

启动docker,运行容器

docker run -it --rm --name="draw" -p 8080:8080 -p 8443:8443 jgraph/draw.io

c229b0b6b6281842248cfdb9e3076ad

启动 Web 浏览器会话到http://localhost:8080/?offline=1&https=0或https://localhost:8443/?offline=1

d7d23e3ca246263580b4b812a9dfd01

可以看到在docker本地部署了draw.io,进入到了绘画作图界面。

2. 安装cpolar内网穿透工具

上面我们在docker中成功安装了draw.io,并局域网成功访问,下面我们安装cpolar内网穿透工具,通过cpolar 转发本地端口映射的http公网地址,我们可以很容易实现远程访问,而无需自己注册域名购买云服务器.下面是安装cpolar步骤

cpolar官网地址: https://www.cpolar.com

  • 使用一键脚本安装命令
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
  • 向系统添加服务
sudo systemctl enable cpolar
  • 启动cpolar服务
sudo systemctl start cpolar

cpolar安装成功后,在外部浏览器上访问Linux 的9200端口即:【http://局域网ip:9200】,使用cpolar账号登录,登录后即可看到cpolar web 配置界面,结下来在web 管理界面配置即可

image-20230831171159175

3. 配置Draw.io公网访问地址

点击左侧仪表盘的隧道管理——创建隧道,创建一个Draw.io的cpolar 公网地址隧道

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复
  • 协议:选择http
  • 本地地址:8080 (局域网访问的端口)
  • 域名类型:免费选择随机域名
  • 地区:选择China

点击创建

56544a2956f6fd3f95376a73b85f62d

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网访问地址,有两种访问方式,一种是http 和https

0aae43287fc845a4b660a0ca8f5fac5

4. 公网远程访问Draw.io

使用上面的cpolar https公网地址在任意设备的浏览器访问,即可成功看到我们Draw.io的绘图界面,这样一个公网地址且可以远程访问就创建好了,无需自己购买云服务器,即可发布到公网访问。

1efafda6150f3fcc24d3b3b66fcf7f3

482a34eb28c000551eaf2a07e2270a0

由于以上使用cpolar所创建的隧道使用的是随机公网地址,24小时内会随机变化,不利于长期远程访问。

我一般会使用固定二级子域名,原因是我希望将网址发送给同事时,它是一个固定、易记的公网地址(例如:draw.io.cpolar.cn),这样更显正式,便于绘图交流协作。因此我们可以为其配置二级子域名,该地址为固定地址,不会随机变化【ps:cpolar.cn已备案】

注意需要将cpolar套餐升级至基础套餐或以上,且每个套餐对应的带宽不一样。【cpolar.cn已备案】

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称

image-20231113175903671

保留成功后复制保留成功的二级子域名的名称

image-20231113175932756

返回登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道,点击右侧的编辑

image-20231113175958164

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名

点击更新(注意,点击一次更新即可,不需要重复提交)

image-20231113180044175

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名

image-20231113180111047

最后,我们使用固定的公网地址访问,可以看到访问成功,这样一个固定且永久不变的公网地址就设置好了

image-20231113180137575

image-20231113180214595

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/222314.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

单元测试二(理论)-云计算2023.12-云南农业大学

文章目录 一、单选题1、三次握手、四次挥手发生在网络模型的哪一层上?2、互联网Internet的拓扑结构是什么?3、以下哪一种网络设备是工作在网络层的?4、以下哪种关于分组交换网络的说法是错误的?5、以下哪种协议是在TCP/IP模型中的…

电脑开机出现:CLIENT MAD ADDR (网卡启动系统)的解决办法

文章目录 前言步骤1、确定情况2、对症下药——关闭网卡启动 补充1、关于BIOS2、关于PXE 前言 最近给旧电脑重装系统安了下开发环境和常用软件啥的,之前还好好启动的电脑,开机突然需要额外加载一个页面,虽然最后正常启动了不影响使用&#xf…

linux 内核同步互斥技术之自旋锁

自旋锁 自旋锁用于处理器之间的互斥,适合保护很短的临界区,并且不允许在临界区睡眠。申请自旋锁的时候,如果自旋锁被其他处理器占有,本处理器自旋等待(也称为忙等待)。 进程、软中断和硬中断都可以使用自旋…

Qt5 CMake环境配置

Qt5 CMake环境配置 设置Qt路径 有两种方法 Qt5_DIR,使用这个变量,必须把路径设置到Qt5Config.cmake所在文件夹,也就是安装目录下的lib/cmake/Qt5CMAKE_PREFIX_PATH,只需要设置到安装目录就可以了,这个目录就是bin、…

OpenStack和Docker结合?为何现在流行?

为何现在流行OpenStack和Docker结合? 结合的好处 1、资源管理与调度灵活: OpenStack提供了完善的虚拟机管理能力,而Kubernetes(使用Docker作为容器运行环境)在容器调度方面非常高效。将两者结合,可以实现…

RNN介绍及Pytorch源码解析

介绍一下RNN模型的结构以及源码,用作自己复习的材料。 RNN模型所对应的源码在:\PyTorch\Lib\site-packages\torch\nn\modules\RNN.py文件中。 RNN的模型图如下: 源码注释中写道,RNN的数学公式: 表示在时刻的隐藏状态…

ES6学习(三):Set和Map容器的使用

Set容器 set的结构类似于数组,但是成员是唯一且不会重复的。 创建的时候需要使用new Set([])的方法 创建Set格式数据 let set1 new Set([])console.log(set1, set1)let set2 new Set([1, 2, 3, 4, 5])console.log(set2, set2) 对比看看Set中唯一 let set3 new Set([1, 1,…

职场记5:勇闯深圳,追梦职场

上一篇《职场记4:我在这家公司的美好时光》 为了追求更好的发展,我毅然决然地离开了令我感到无比安逸的工作环境,去大城市深圳闯一闯。这个城市对我来说充满了未知和挑战,但我相信只有勇敢地面对未知,才能找到更好的自…

多架构容器镜像构建实战

最近在一个国产化项目中遇到了这样一个场景,在同一个 Kubernetes 集群中的节点是混合架构的,也就是说,其中某些节点的 CPU 架构是 x86 的,而另一些节点是 ARM 的。为了让我们的镜像在这样的环境下运行,一种最简单的做法…

Rust语言基础语法使用

1.安装开发工具: RustRover JetBrains: Essential tools for software developers and teams 下载: RustRover: Rust IDE by JetBrains 下载成功后安装并启动RustRover 安装中文语言包插件 重启RustRover生效

vue3引入echarts正确姿势

echarts文档地址: echarts官网地址 echarts配置手册 echarts 模板地址 1、安装 (1)安装echarts包 npm install echarts --save 或者 cnpm install echarts --save(2)安装vue echarts工具包 npm install echart…

持续集成交付CICD:Jenkins使用基于SaltStack的CD流水线下载Nexus制品

目录 一、理论 1.salt常用命令 二、实验 1.SaltStack环境检查 2.Jenkins使用基于SaltStack的CD流水线下载Nexus制品 二、问题 1.salt未找到命令 2.salt简单测试报错 3. wget输出日志过长 一、理论 1.salt常用命令 (1)salt 命令 该 命令执行s…

Linux-----9、echo命令

# echo命令 echo会将输入的字符串送往标准输出,并在最后加上换行符。 可以理解为打印字符串。 常见选项: -n :不输出最后的换行符“\n” -e:解释转义字符(字符串中出现\n、\t等特殊字符,则特别加以处理&a…

蓝牙物联网智慧物业解决方案

蓝牙物联网智慧物业解决方案是一种利用蓝牙技术来提高物业管理和服务效率的解决方案。它通过将蓝牙技术与其他智能设备、应用程序和云服务相结合,为物业管理和服务提供更便捷、高效和智能化的支持。 蓝牙物联网智慧物业解决方案包括: 1、设备管理&#…

JupyterNotebook安装依赖 使用conda环境

怎么使用JupyterNotebook安装依赖?(使用conda环境?) 预装的jupyter中有conda,可以进入终端执行相关命令 预装的Jupyter,目标用户是轻度的Jupyter用户,如果想使用conda的多环境等高级功能&#x…

【PostgreSQL】从零开始:(五)认识数据库-数据的相关概念

【PostgreSQL】从零开始:(五)认识数据库-数据的相关概念 什么是数据库数据库包含哪些东西数据库技术构成数据库系统SQL语言数据库访问技术 在正式开始讲PostgreSQL内容之前,我们要先要了解数据的相关概念 什么是数据库 数据库由一批数据构成…

java基础知识③:反射和注解以及Java 8的新特性

目录 一、反射和注解 1、反射 2、注解 二、Java 8的新特性 1、Lambda 表达式: 2、Stream API: 3、函数式接口: 4、方法引用: 5、接口的默认方法和静态方法: 6、新的时间日期API(Date/Time API)&…

文心一言4.0使用指南

文心一言4.0使用指南 在线体验:体验地址 一、文心一言能力如何 不管百度公司如何,就AI大模型来说,文心一言和其他国内产品相比,还是具有相当大的优势的,可以说是在个人的使用方面,我认为是最顶级的。 但…

Unity中的ShaderToy

文章目录 前言一、ShaderToy网站二、ShaderToy基本框架1、我们可以在ShaderToy网站中,这样看用到的GLSL文档2、void mainImage 是我们的程序入口,类似于片断着色器3、fragColor作为输出变量,为屏幕每一像素的颜色,alpha一般赋值为…

微信小程序单图上传和多图上传

图片上传主要用到 1、wx.chooseImage(Object object) 从本地相册选择图片或使用相机拍照。 参数 Object object 属性类型默认值必填说明countnumber9否最多可以选择的图片张数sizeTypeArray.<string>[original, compressed]否所选的图片的尺寸sourceTypeArray.<s…