使用Docker本地安装部署Drawio绘图工具并实现公网访问

目录

前言

1. 使用Docker本地部署Drawio

2. 安装cpolar内网穿透工具

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

4. 公网远程访问Draw.io


前言

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java封装一个根据指定的字段来获取子集的工具类

工具类 ZhLambdaUtils SuppressWarnings("all") public class ZhLambdaUtils {/*** METHOD_NAME*/private static final String METHOD_NAME "writeReplace";/*** 获取到lambda参数的方法名称** param <T> parameter* param function functi…

【LeetCode】挑战100天 Day11(热题+面试经典150题)

【LeetCode】挑战100天 Day11&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-132.1 题目2.2 题解 三、面试经典 150 题-133.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&…

Mybatis中limit用法补充

limit a,b a是从第a1条数据开始&#xff0c;b是指读取几条数据 例如&#xff1a;select * from table limit 0,10 这句sql语句是说从表中获取第1条开始的10条记录 前端将page:页码    pageSize:每页多少条    这两个参数&#xff0c;传到后台。    通过这两个参数&am…

实力爆发 | 国民品牌大运新能源亮相广州车展

2023第二十一届广州国际汽车展览会将于11月17日至26日在广州琶洲广交会展馆拉开大幕&#xff0c;本届广州车展以“新科技新生活”为主题&#xff0c;将汇集国内外车企的多款重磅新车及前沿新能源出行技术。 &#xff08;2023广州国际汽车展览会&#xff09; 随着环保意识的提高…

个人类型小程序已支持申请微信认证

小程序申请微信认证 政府、媒体、其他组织类型账号&#xff0c;必须通过微信认证验证主体身份。企业类型账号&#xff0c;可以根据需要确定是否申请微信认证。已认证账号可使用微信支付权限。 个人类型小程序已支持微信认证&#xff08;审核大约需要1-3个工作日&#xff09; …

Unity中Shader的矩阵加减法

文章目录 前言一、什么是矩阵矩阵就是一组数的阵列 二、矩阵的加法三、矩阵的负值四、矩阵的减法五、矩阵的表示 前言 Unity中Shader用到的矩阵加减法&#xff0c;以及矩阵的一些基础常识 一、什么是矩阵 矩阵就是一组数的阵列 1 2 3 4 5 6 二、矩阵的加法 两个矩阵相加就是…

专题解读|Graph Fairness代表性工作介绍

1. 图上的公平性问题 图在现实世界中无处不在&#xff0c;例如知识图谱&#xff0c;社交网络和生物网络。近年来&#xff0c;图神经网络( graph neural networks&#xff0c;GNNs ) 在图结构数据建模方面表现出了强大的能力。一般地&#xff0c;GNNs采用消息传递机制&#xff…

SOME/IP学习笔记3

目录 1.SOMEIP Transformer 1.1 SOME/IP on-wire format 1.2 协议指定 2. SOMEIP TP 2.1 SOME/IP TP Header 3.小结 1.SOMEIP Transformer 根据autosar CP 相关规范&#xff0c;SOME/IP Transformer主要用于将SOME/IP格式的数据序列化&#xff0c;相当于一个转换器。总体…

Cesium 展示——绘制圆的几种方式

文章目录 需求分析需求 总结绘制圆的几种方式 分析 使用圆形几何体(CircleGeometry):var circle = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees

七个合法学习黑客技术的网站,让你从萌新成为大佬

大家好我是若风&#xff0c;一个8年网络安全攻防经验的白帽黑客。 合法的学习网站&#xff0c;以下这些网站&#xff0c;虽说不上全方位的满足你的需求&#xff0c;但是大部分也都能。能带你了解到黑客有关的技术&#xff0c;视频&#xff0c;电子书&#xff0c;实践&#xff0…

Git 安装配置

目录 Linux 平台上安装 Debian/Ubuntu Centos/RedHat 源码安装 Windows 平台上安装 Mac 平台上安装 Git 配置 用户信息 文本编辑器 差异分析工具 查看配置信息 在使用Git前我们需要先安装 Git。Git 目前支持 Linux/Unix、Solaris、Mac和 Windows 平台上运行。 Git …

AR人脸道具SDK,打造极致用户体验

为了满足企业在AR领域的应用需求&#xff0c;美摄科技推出了一款领先的AR人脸道具SDK&#xff0c;旨在帮助企业快速、高效地开发出具有丰富玩法体验的AR应用&#xff0c;从而提升企业的竞争力和市场份额。 一、丰富的AR人脸道具&#xff0c;满足多样化需求 美摄科技AR人脸道具…

【Python图像超分】Real-ESRGAN图像超分模型(超分辨率重建)详细安装和使用教程

1 前言 图像超分是一种图像处理技术&#xff0c;旨在提高图像的分辨率&#xff0c;使其具有更高的清晰度和细节。这一技术通常用于图像重建、图像恢复、图像增强等领域&#xff0c;可以帮助我们更好地理解和利用图像信息。图像超分技术可以通过多种方法实现&#xff0c;包括插值…

ebSocket connection to ‘wss://xxx.xxxxxxx.xxx/‘ failed:

目录 1&#xff1a;网络连接问题&#xff1a;检查您是否已连接到互联网&#xff0c;您的网络是否稳定。您还可以尝试重置您的Internet连接或切换到另一个网络。 排除方法&#xff1a;直接打开个网址就知道了&#xff0c;这应该不用教了吧 2&#xff1a;防火墙或代理设置&…

Postgresql数据类型-数据类型转换

PostgreSQL数据类型转换主要有三种方式&#xff1a;通过格式化函数、CAST函数、::操作符&#xff0c;下面分别介绍。 通过格式化函数进行转换 PostgreSQL提供一系列函数用于数据类型转换&#xff0c;如表所示。 通过CAST函数进行转换将varchar字符类型转换成text类型&#xf…

JavaScript基础入门05

目录 1.操作结点 1.1新增节点 1.1.1. 创建元素节点 1.1.2. 插入节点到 dom 树中 1.2删除节点 2.代码案例: 猜数字 2.1预期效果 2.2代码实现 3.代码案例: 表白墙 3.1预期效果 3.2创建页面布局 3.3调整样式 3.4实现提交 3.5实现点击按钮的动画效果 4.代码案例: 待办…

简单描述下微信小程序的相关文件以及类型?

目录 前言 相关文件类型 1. JSON 配置文件 2. WXML 文件 3. WXSS 文件 4. JavaScript 文件 图片、音频、视频等资源文件 小程序配置文件&#xff08;project.config.json&#xff09; 理解 优缺点 优点&#xff1a; 缺点&#xff1a; 总结 结尾 前言 微信小程序…

Live800:高效工作,客服人必学的10种时间效率管理术

客服人员是企业与客户沟通的桥梁&#xff0c;需要在繁忙的工作环节中保持高效率。只有提高时间效率才能更好地服务客户&#xff0c;满足客户的需求&#xff0c;提升客户满意度。因此&#xff0c;客服人员需要掌握时间效率管理术来提高工作效率。 1、制定工作计划 在开始工作之…

C# DirectoryInfo类的用法

在C#中&#xff0c;DirectoryInfo类是System.IO命名空间中的一个类&#xff0c;用于操作文件夹&#xff08;目录&#xff09;。通过DirectoryInfo类&#xff0c;我们可以方便地创建、删除、移动和枚举文件夹。本文将详细介绍DirectoryInfo类的常用方法和属性&#xff0c;并提供…

车间安灯呼叫看板的功能与优势介绍

现在的工厂车间的管理变得越来越复杂&#xff0c;生产过程中可能会出现各种问题&#xff0c;如设备故障、物料短缺、工人伤病等。为了提高生产效率、优化生产管理&#xff0c;许多工厂引入了车间安灯呼叫看板系统。本文将介绍车间安灯呼叫看板的功能与优势。 一、功能介绍 1. 实…
最新文章