在线图表编辑工具Draw.io本地部署并结合内网穿透实现远程协作办公

前言

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

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

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

1. 使用Docker本地部署Drawio

启动docker,运行容器

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

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小时内会随机变化,不利于长期远程访问。

我一般会使用固定二级子域名,原因是我希望将网址发送给同事时,它是一个固定、易记的公网地址(例如:drawio.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/613536.shtml

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

相关文章

PHP开发日志 ━━ 不同方法判断某个数组中是否存在指定的键名,测试哪种方法效率高

我们可以用isset($arr[a]) 或者 array_key_exists(a, $arr) 来判断a键名是否存在与$arr数组。 那么这两种方式哪个运行速度快呢? 不多废话了,现在我们写一段代码来测试一下: $array [a > 1, b > 2, c > 3];$start microtime(tru…

如何让软文获取更多流量?

软文推广作为大中小企业常用的推广方式,能够提高品牌形象,打造企业知名度、促进产品转化方面有着非常不错的效果,而且成本较低,风险较小。但有许多企业不清楚软文营销到底怎么做才能获得更多流量,今天媒介盒子就来和大…

基于JAVA的社团管理系统的设计与实现

🍅点赞收藏关注 → 私信领取本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验,陆续会更新更多优质的Java实战项目希望你能有所收获,少走一些弯路。🍅关注我不迷路🍅一 、设计说明 1.1 课题背景 互…

网络层详解

目录 前言 一、IP协议 1、IP协议报头 2、协议字段理解 (1)4位版本 (2)4位首部长度 (3)8位服务类型 (4)16位总长度 (5)标识、标志与片偏移 &#xf…

【ITK库学习】使用itk库进行图像分割(四):水平集分割

目录 1、水平集2、itkFastMarchingImageFilter 快速步进分割3、itkShapeDetectionLevelSetImageFilter 快速步进分割 1、水平集 水平集是跟踪轮廓和表面运动的一种数字化方法。基于图像的亮度均值、梯度、边缘特征的微分计算,进行水平集分割。在itk中,所…

STM32 ADC采样调试笔记

最近在搞STM32L051系列一个小MCU,要用这个去采集两路ADC作为输入。期间也碰到过一些问题,顺便记录下。 ADC采集原理不说了,主要采集电压,用数字进行细分,这样就可以知道输入电压多少了,网上也有很多相关文…

220v免驱动led驱动芯片:SM2082EDS适用于LED 球泡灯,筒灯

220V免驱动LED驱动芯片是一种电源管理芯片,它可以在接入220V交流电后,将电压转换为适合LED灯珠工作的直流电压,从而点亮LED灯珠。这种驱动芯片通常具有较高的转换效率和稳定性,能够有效地降低能耗和延长LED灯珠的寿命。 SM2082EDS…

基于SpringBoot的教学管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式 🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 &…

​软件测试面试:关键问题解析

在软件开发领域,测试是确保软件质量的重要环节。面试是评估软件测试人员技能和经验的关键时刻。在一个软件测试面试中,面试官通常会问一系列问题来评估面试者的知识、技能和解决问题的能力。本文将介绍一些常见的软件测试面试问题,并给出一些…

【2024最新版】接口自动化测试基础(基础篇)

接口自动化测试基础 目录 1、什么是接口自动化测试 2、接口自动化测试要素 3、常用的落地方案 什么是接口自动化测试 PART 01 1.1什么是接口自动化测试 接口自动化测试是一种通过编写脚本或使用工具来自动化执行应用程序接口来验证接口正确性的测试方法。接口自动化测试的…

在drawio中使用BPMN2.0绘制详细的业务流程图和编排模型

在drawio中使用BPMN2.0绘制详细的业务流程图和编排模型 drawio是一款强大的图表绘制软件,支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用,则直接输入网址draw.io或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功…

【Python】使用tkinter设计开发Windows桌面程序记事本(3)

上一篇:【Python】使用tkinter设计开发Windows桌面程序记事本(2)-CSDN博客 下一篇: 作者发炎 本文章与"记事本项目"的第一篇文章类似。这里是重新创建新的"页面设置"子窗口,进行开发设计。 那为…

自动化测试的三种等待方式

自动化测试的等待方式主要有三种:强制等待、隐式等待和显式等待。 1. 强制等待(Sleep) 通过在代码中使用Thread.sleep()方法来实现的,该方法会阻塞当前线程的执行,程序会暂停指定的时间。 这种方式没有条件判断&…

SpringMVC 域对象共享数据

文章目录 2、使用ModelAndView向request域对象共享数据3、使用Model向request域对象共享数据4、使用map向request域对象共享数据5、使用ModelMap向request域对象共享数据6、Model、ModelMap、Map的关系7、向session域共享数据8、向application域共享数据 1、使用ServletAPI向re…

钉钉java登录

获取token :API Explorer 获取部门列表:获取部门列表 - 钉钉开放平台

通过wireshark抓取的流量还原文件(以zip为例)

wireshark打开流量包,通过zip关键字查找 追踪流可查看详细信息 选中media Type右键, 点击导出分组字节流选项 将生成的文件进行命名,需要时什么格式就以什么格式后缀

leetcode:LCR 159. 库存管理 III(python3解法)

难度:简单 仓库管理员以数组 stock 形式记录商品库存表,其中 stock[i] 表示对应商品库存余量。请返回库存余量最少的 cnt 个商品余量,返回 顺序不限。 示例 1: 输入:stock [2,5,7,4], cnt 1 输出:[2]示例…

探秘人工智能大会:揭示未来技术发展趋势与学习之道

随着科技的飞速发展,人工智能(AI)已经逐渐渗透到我们生活的方方面面。 参加人工智能大会,不仅能够洞察到最前沿的技术动态,还能与业界专家、学者交流思想,共同探讨AI的未来发展。本文将带您探秘人工智能大…

nuxt pm2使用、启动、问题解决方案

pm2简介 pm2是一个进程管理工具,可以用它来管理node进程,并查看node进程的状态,当然也支持性能监控,进程守护,负载均衡等功能,在前端和nodejs的世界中用的很多 pm2安装 安装pm2: $ npm install -g pm2查看pm2的安装…

TinyLlama-1.1B(小羊驼)模型开源-Github高星项目分享

简介 TinyLlama项目旨在在3万亿tokens上进行预训练,构建一个拥有11亿参数的Llama模型。经过精心优化,我们"仅"需16块A100-40G的GPU,便可在90天内完成这个任务🚀🚀。训练已于2023-09-01开始。项目地址&#…