在线图表编辑工具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…

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

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

Zookeeper+Kafka概述

一 Zookeeper 1.1 Zookeeper定义 Zookeeper是一个开源的、分布式的,为分布式框架提供协调服务的Apache项目。 1.2 Zookeeper特点 Zookeeper:一个领导者(leader),多个跟随者(Follower)组成的…

视频内容的创作要领有哪些?

1. 垂直领域内容输出 作为视频发布者,我们需要确保动态内容与账号定位相匹配,并专注于垂直领域。通过长期稳定的内容输出,我们可以提高账户权重,吸引到更多且更为精确的粉丝流量。确保内容的质量和相关性,将有助于提高…

Python 黑名单IP绕过(127.0.0.1绕过)Payload代码

目录 需求 代码 需求 1. 绕过防护工具中设置的黑名单IP 2. IP包含各种外网IP、局域网IP、127.0.0.1 代码 import socket import structdef ip_default_local(ips, ip):ips.add("127.0.0.1")ips.add("0.0.0.0")ips.add("localhost")def ip_d…

haiku实现简单的dropout模块

Dropout是一种常用的正则化方法,用于减少神经网络的过拟合现象。它的基本思想是在训练神经网络的过程中,随机地将一部分神经元的输出值置为0,从而使得神经网络的结构变得不稳定,从而强制网络学习到更加鲁棒的特征表示。 haiku 自…

Java中使用lamda表达式进行foreach,优雅处理集合List为null的情况

Java中使用lamda表达式进行foreach,优雅处理集合List为null的情况 一:举例方法 在使用Java 8及以上版本的Stream API时,如果你想要优雅地处理可能为空的List,可以使用以下方法 1、提前检查 在调用stream之前,先检查…

基于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…

【笔记】Helm-2 如何使用-1 chart开发提示和技巧

chart开发提示和技巧 本指南涵盖了Helm chart的开发人员在构建生产环境质量的chart时学到的一些提示和技巧。 了解你的模板功能 Helm使用了 Go模板 将你的自由文件构建成模板。Go塑造了一些内置方法,我们增加了一些其他的。 template package - text/template - …

Vue项目里实现json对象转formData数据

平常调用后端接口传参都是json对象,当提交表单遇到有附件需要传递时,通常是把附件上传单独做个接口,也有遇到后端让提交接口一并把附件传递到后端,这种情况需要把参数转成formData的数据,需要用到new FormData()。json…

【Python】科研代码学习:一

【Python】科研代码学习:一 前言魔方方法 __dict__, __setattr__ , __getattr__ , __getattribute__hasattr(obj, name)super()类型注解解包 unpackingzip() 函数 前言 搞科研,最重要的还是得看懂别人的源代码。 这就意味着python不能太差 看到比较有用…

基于SpringBoot的教学管理系统

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

Go语言-无限可能的管道协程:解锁并发编程的新境界

Go语言-无限可能的管道协程:解锁并发编程的新境界 在Go语言中,协程(Goroutine)是一种轻量级的并发执行单位,它可以与其他协程并发执行,但不同于操作系统级别的线程。Go语言的协程由Go运行时(Go…

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

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

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

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

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

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