如何在Docker本地搭建流程图绘制神器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/613988.shtml

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

相关文章

C++里main函数int main(int argc, char **argv)

C里main函数int main(int argc, char **argv), 这两个参数argc和argv分别是什么

Vue3组件库 -- element plus 树形选择器组件怎样显示已有的树形菜单?

<el-tree-selectv-model"form.topmneu":data"tableData":props"{ label: title, value: id }":render-after-expand"false"style"width: 100%"check-strictly/> 添加 :props "{ lable : 字段名 , value: 字段…

用python写个三子棋游戏

下面是一个简单的三子棋游戏的Python代码示例。在这个游戏中&#xff0c;玩家需要使用鼠标点击来放置棋子&#xff0c;并尽可能地使自己的三个棋子连成一线&#xff08;横、竖或斜&#xff09;。 python 复制代码 import pygame import random # 初始化pygame pygame…

iptables TEE模块测试小记

概述 因为公司项目需求&#xff0c;需要对服务器特定端口进行流量镜像&#xff0c;各种百度之后&#xff0c;发现TEE的模块&#xff0c;后来一番折腾&#xff0c;发现被转发的机器死活收不到数据&#xff0c;最后tcpdump一通了解到根源&#xff0c;博文记录&#xff0c;用以备…

极客时间-读多写少型缓存设计

背景 内容是极客时间-徐长龙老师的高并发系统实战课的个人学习笔记&#xff0c;欢迎大家学习&#xff01;https://time.geekbang.org/column/article/596644 总览内容如下&#xff1a; 缓存性价比 一般来说&#xff0c;只有热点数据放到缓存才更有价值 数据量查询频率命中…

力扣289. 生命游戏

模拟 染色 思路&#xff1a; 可以复制一个表格&#xff0c;然后根据规则两层循环模拟出结果&#xff0c;但是空间复杂度太高&#xff1b;可以复用原有数组&#xff0c;对其进行染色标记&#xff1b; 最终状态是活的标记值 > 1&#xff0c;还原标记值时可以使用规则 val &g…

MongoDB聚合:$bucketAuto

按照指定的表达式对输入文档进行分类后放入指定数字的桶中&#xff0c;跟$bucket不太一样&#xff0c;$bucketAuto可以指定分组的数量&#xff08;颗粒度&#xff09;&#xff0c;$bucketAuto会根据groupBy的值和颗粒度自动生成桶的边界。 语法 {$bucketAuto: {groupBy: <…

java基础之异常练习题

异常 1.Java 中所有的错误/异常都继承自 Throwable类&#xff1b;在该类的子类中&#xff0c; Error 类表示严重的底层错误&#xff0c; 对于这类错误一般处理的方式是 直接报告并终止程序 &#xff1b; Exception 类表示异常。 2.查阅API&#xff0c;完成以下填空&#xff1a;…

leetcode动态规划(零钱兑换II、组合总和 Ⅳ)

518.零钱兑换II 给定不同面额的硬币和一个总金额。写出函数来计算可以凑成总金额的硬币组合数。假设每一种面额的硬币有无限个。 示例 1: 输入: amount 5, coins [1, 2, 5] 输出: 4 解释: 有四种方式可以凑成总金额: 55 5221 52111 511111 示例 2: 输入: amount 3, coi…

【江科大STM32单片机】day1点亮LED灯流水灯蜂鸣器

知识点 推挽模式&#xff1a;高-》低、低-》高电平都能驱动 开漏模式&#xff1a;只能低-》高电平能驱动&#xff0c;高电平相当于高阻态 GPIO_WriteBit 操作单个 GPIO_ResetBits 操作同组 3-2 led闪烁 配置相关驱动 USE_STDPERIPH_DRIVER 配置输出文件格式debug配置slink勾选…

华为认证 | HCIE自学通过率有多高?

01 什么是HCIE认证&#xff1f; HCIE&#xff08;Huawei Certified ICT Expert 华为认证 ICT 专家&#xff09;是华为认证体系中最高级别的 ICT 技术认证&#xff0c;表示通过认证的人具有ICT 领域专业知识和丰富实践经验。 02 HCIE考试可以自学吗&#xff1f; HCIE考试可以自…

Leetcode242.有效的字母异位词

文章目录 原题链接思路1&#xff08;字符串排序后比较&#xff09;代码1思路2&#xff08;哈希表&#xff09;代码2 原题链接 Leetcode242.有效的字母异位词 思路1&#xff08;字符串排序后比较&#xff09; t 是 s 的字母异位词 等价于 将 t 和 s 排序后&#xff0c;两个字符串…

基于Springboot的课程答疑系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的课程答疑系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…

Python知识点(史上最全)

Python期末考试知识点&#xff08;史上最全&#xff09; python简介 Python是一种解释型语言 Python使用缩进对齐组织代码执行&#xff0c;所以没有缩进的代码&#xff0c;都会在载入时自动执行 数据类型&#xff1a;整形 int 无限大 浮点型 float…

小程序基础学习(组件化)

&#xff08;一&#xff09;创建 找到components文件夹下面创建新的文件夹 然后再文件夹内创建component格式的文件 创建后这样 我创建的是my-info的文件夹以及my-info的components文件&#xff0c;跟着普通的页面一样 &#xff08;二&#xff09; 注册组件 找到你需要使用组…

Android Debug Bridge(ADB)常用指令记录

ADB简介 Android Debug Bridge&#xff08;ADB&#xff09;是用于在计算机和 Android 设备之间进行通信和调试的命令行工具。它提供了一组命令&#xff0c;可以帮助执行各种与 Android 设备相关的操作&#xff0c;如安装应用程序、调试应用程序、访问设备的文件系统等。 下载…

392. 判定子序列

给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是"abcde"的一个子序列&#…

轴承故障诊断系统的需求说明,仅供参考使用

项目名称&#xff1a;轴承故障诊断系统 项目目标 开发一个自动化系统&#xff0c;用于测试和诊断工业轴承的潜在故障。系统将通过分析从轴承收集的振动数据来检测异常模式&#xff0c;以预测故障并提供维护建议。 硬件需求 传感器&#xff1a;高精度振动传感器&#xff0c;…

微信小程序-----宿主环境(组件介绍和代码编写)

目录 前言 宿主环境简介 1. 什么是宿主环境 ​编辑 2.小程序的宿主环境 3. 小程序宿主环境包含的内容 一、通信模型 1. 通信的主体 2. 小程序的通信模型 二、运行机制 1.小程序启动的过程 2.页面渲染的过程 三、组件 常用的视图容器类组件 1.view 组件 2.scroll-…

RK3399平台入门到精通系列讲解(驱动篇)eventpoll结构体详解

🚀返回总目录 文章目录 一、eventpoll 结构体二 、epitem 结构体三、eppoll_entry 结构体eventpoll 结构体:eventpoll 结构体是 epoll 在内核中的核心结构epitem 结构体:epitem 结构体用于表示 epoll 实例中的事件项eppoll_entry 结构体:它的作用就是关联Socket等待队列中…