如何在Docker本地搭建流程图绘制神器draw.io并实现公网远程访问

news2024/11/17 17:47:47

推荐

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站

前言

提到流程图,大家第一时间可能会想到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.coloradmin.cn/o/1376330.html

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

相关文章

PyPDF2 3.0.0更新,一些函数被弃用,需要重新写

1.PdfFileWriter is deprecated and was removed in PyPDF2 3.0.0. Use PdfWriter instead. 这错误表明你正在使用的 PyPDF2 版本中已经移除了 PdfFileWriter,并在版本 3.0.0 中被替代为 PdfWriter。这是因为在 PyPDF2 的更新中,一些 API 被重新组织和更…

目标检测脚本之mmpose json转yolo txt格式

目标检测脚本之mmpose json转yolo txt格式 一、需求分析 在使用yolopose及yolov8-pose 网络进行人体姿态检测任务时,有时需要标注一些特定场景的中的人型目标数据,用来扩充训练集,提升自己训练模型的效果。因为单纯的人工标注耗时费力&…

笔记软件内怎么查看文章字数 笔记查看字数的操作步骤

在记录生活点滴、工作要务时,你是否曾像我一样,为了知道写了多少字而犯愁?尤其是在需要精确控制字数时,那种焦虑感更是如影随形。 记得有一次,我为了一个项目报告苦思冥想,好不容易写了个初稿,…

0111qt

实现闹钟,并播报懒虫...~ daytest.pro: QT core gui texttospeechgreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c11# The following define makes your compiler emit warnings if you use # any Qt feature that has been marked deprecated (th…

堆叠线:实现高效连接和数据传输的利器

堆叠线是一种常见的网络连接解决方案,主要应用于数据中心和企业网络等领域。本文将介绍堆叠线的定义、分类、作用以及与光纤线的区别,同时提供详细的堆叠线接法和相关问题的解答。 第一部分:堆叠线是什么 堆叠线是一种用于连接网络设备的高…

mysql日志那些事

一、Mysql常见日志 MySQL有不同类型的日志文件,用来存储不同类型的日志,分为二进制日志、错误日志、通用查询日志、慢查询日志和中继日志,使用这些日志可以查看MySQL内部发生的事情。 二、慢查询日志(slow query log&#xff0…

windows安装RabbitMq,修改数据保存位置

1、先安装Erlang, Erlang和RabbitMQ有版本对应关系。 官网RabbitMQ与Erlang版本对应RabbitMQ Erlang Version Requirements — RabbitMQ 2、安装RabbitMQ。 3、修改数据保存地址。找到安装目录下的sbin文件夹,找到rabbitmq-env.bat,编辑文件…

初识Hadoop-概述与关键技术

一.大数据概述 1.什么是大数据 高速发展的信息时代,新一轮科技革命和变革正在加速推进,技术创新日益成为重塑经济发展模式和促进经济增长的重要驱动力量,而“大数据”无疑是核心推动力。 那么,什么是“大数据”呢&#xff1…

力扣hot100 二叉树的最近公共祖先 递归

Problem: 236. 二叉树的最近公共祖先 👨‍🏫 参考大佬题解 💖 图解 时间复杂度, 示例: O ( n ) O(n) O(n) 空间复杂度, 示例: O ( n ) O(n) O(n) 💖 AC code /*** Definition for a binary tree node.*…

在Java中正确使用Optional

Optional类是在Java 8中引入的,用于解决NullPointerException的问题。 java.util.Optional类是一个泛型类型的类,只包含一个类型为T的值。其目的是提供对可能为null的类型T的引用对象的更安全的替代方案。但是,只有在正确使用的情况下&#…

Discourse 访问统计数据的不一致

Discourse 如果使用网站跟踪程序,例如 Google Analytics 得到的网站访问数据和真实的网站访问数据是不一致的。 通常 Google Analytics 提供的数据更少,或者说是少很多。 这是因为 Discourse 的数据调用使用的是 API,在你的页面载入后&…

Java医院综合绩效考核系统源代码

医院绩效考核管理系统是采用B/S架构模式设计、使用JAVA语言开发、后台使用MySql数据库进行管理的一整套计算机应用软件。系统和his系统进行对接,按照设定周期,从his系统获取医院科室和医生、护士、其他人员工作量,对没有录入信息化系统的工作…

【C语言小游戏】贪吃蛇

文章目录 1.引言2.运行图2.涉及知识3 Windows API3.1 控制台3.2 控制台屏幕坐标3.3 操作句柄3.4 控制台屏幕光标3.5 监视按键 4. 设计说明5. 完整代码 1.引言 使⽤C语⾔在Windows环境的控制台中模拟实现经典⼩游戏贪吃蛇 实现基本的功能: 贪吃蛇地图绘制蛇吃⻝物的…

《BackTrader量化交易图解》第9章:回测结果分析

文章目录 9. 回测结果分析9.1 常用量化分析指标9.2 Analyzer 分析类9.3 Analyzer 分析模块架构图9.4 SQN 指数9.5 案例:回测数据基本分析9.6 案例:回测数据扩展指标分析 9. 回测结果分析 9.1 常用量化分析指标 使用BackTrader等量化软件做交易会生成大…

js(JavaScript)数据结构之字典

什么是数据结构? 下面是维基百科的解释: 数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装:一个数据结构可被视为两个函数之间的接口,或者是由数据类型联合组成的存储内容的访问方法封装。 我们每天的编码中都会…

审稿变慢?还疯狂拒稿?这本毕业神刊如今争议不断,还值得一投吗?

【SciencePub学术】 IEEE ACCESS 期刊评说 网友辣评 评说1:麻了,11月17收到外审,现在意见还没回来啊,神刊肿么了? 评说2:两个审稿人评审的,一个拒绝(最终意见大修)&…

代码随想录 Leetcode707. 设计链表

题目: 代码(首刷看解析 2024年1月11日): class MyLinkedList { private:struct ListNode{int val;ListNode* next;ListNode(int val):val(val),next(nullptr){}};int size;ListNode* dummyHead; public:MyLinkedList() {dummyHead new List…

序章 初始篇—转生到vue世界!

Vue.js 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项…

四、C++运算符(4)比较运算符

作用&#xff1a;用于表达式的比较&#xff0c;并返回一个真值或者假值 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<string> using namespace std; int main() {//int a 10;int b 20; //变量a重新赋值为100//cout << (ab) << end…

【Redis】Redis 进阶

文章目录 1. BigKey1.1 MoreKey1.2 BigKey 2. 缓存双写一致性更新策略2.1 读缓存数据2.2 数据库和缓存一致性的更新策略2.3 canal 实现双写一致性 3. 进阶应用3.1 统计应用3.2 hyperloglog3.3 GEO3.4 bitmap 4. 布隆过滤器5. Redis 经典问题5.1 缓存预热5.2 缓存穿透5.3 缓存击…