使用Docker本地安装部署Draw.io绘图工具并实现远程访问协作办公

news2024/11/14 19:56:31

前言

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

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

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

1. 使用Docker本地部署draw.io

启动docker,运行容器

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

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

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

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

相关文章

docker小白第三天

docker小白第三天 docker为什么会比虚拟机快 1、docker有着比虚拟机更少的抽象层。不需要Hypervisor实现硬件资源虚拟化,运行在docker容器上的程序直接使用的都是实际物理机的硬件资源,因此在CPU、内存利用率上docker将会在效率上有明显优势。 2、dock…

CSS盒模型 盒子尺寸问题

什么是盒模型 CSS盒模型分为用来放置内容的content区域&#xff0c;用来调整内容和边框距离的padding区域。用来限制盒子边界的border区域以及用于调整盒子之间距离的margin区域。现在去掉margin&#xff0c;只考虑盒子内部的尺寸问题。 我们先来制作一个盒子。 <!DOCTYPE…

PTA✨C语言 求e的近似值

7-1 求e的近似值 分数 15 全屏浏览题目 切换布局 作者 C课程组 单位 浙江大学 自然常数 e 可以用级数 11/1!1/2!⋯1/n!⋯ 来近似计算。本题要求对给定的非负整数 n&#xff0c;求该级数的前 n1 项和。 输入格式: 输入第一行中给出非负整数 n&#xff08;≤1000&#xff0…

读书笔记-《数据结构与算法》-摘要6[快速排序]

快速排序 核心&#xff1a;快排是一种采用分治思想的排序算法&#xff0c;大致分为三个步骤。 定基准——首先随机选择一个元素最为基准划分区——所有比基准小的元素置于基准左侧&#xff0c;比基准大的元素置于右侧递归调用——递归地调用此切分过程 快排的实现与『归并排…

【图论】普利姆算法,最小生成树

一次加入一个节点到我们的最下生成树中。加入哪个&#xff1f;跟着下面的步骤走一遍你就会了。 1. 把第一个节点A添加进来 2. 看两条边<A,B>,<A,E>,一个长度是3&#xff0c;一个长度是4&#xff0c;把长度短的边的另一个节点添加进来&#xff0c;也就是B 3. 再看A,…

StatusBar、NavigationBar窗口显示在Activity下面之aosp14窗口类bug线索征集

背景&#xff1a; hi&#xff0c;粉丝朋友们&#xff1a; 从上次帮助国际学员解决了一个分屏有黑屏的bug后&#xff0c;相关blog和解决方法 https://blog.csdn.net/learnframework/article/details/134708393 解决方法看b站视频&#xff1a; https://www.bilibili.com/video/B…

C# 物联网设备通讯协议客户端

IoTClient是一个物联网设备通讯协议实现客户端,将包括主流PLC通信读取、ModBus协议、Bacnet协议等常用工业通讯协议。本组件基于.NET Standard 2.0,可用于.Net的跨平台开发,如Windows、Linux甚至可运行于树莓派上。 技术架构 1. 编码语言 C# 2. 开发工具 Visual Studio 2019…

自动化性能监控系统Prometheus+Grafana实战

Prometheus 算是一个全能型选手&#xff0c;原生支持容器监控&#xff0c;当然监控传统应用也不是吃干饭的&#xff0c;所以就是容器和非容器他都支持&#xff0c;所有的监控系统都具备这个流程&#xff0c;数据采集→数据处理→数据存储→数据展示→告警&#xff0c;本文就是针…

Autosar E2E模块

文章目录 介绍端到端中的端指的是ECU吗为什么要做 E2EE2E 的保护和校验机制需要知道的名词1. Checksum2. CounterTimeoutDataID E2E Profile1. E2E Profile 012. E2E Profile 023. E2E Profile 044. E2E Profile 055. E2E Profile 06 计算 checksum 示例Counter1、Rolling coun…

Kafka基础理论与常用命令详解(超详细)

文章目录 前言一、Kafka概述1. Kafka简介2. Kafka架构2.1 Broker&#xff08;代理服务器&#xff09;2.2 Topic&#xff08;主题&#xff09;2.3 Producer&#xff08;生产者&#xff09;2.4 Consumer&#xff08;消费者&#xff09;2.5 Consumer Group&#xff08;消费者组&am…

SpringSecurity6从入门到上天系列第八篇:SpringSecurity当中的默认登录页面是如何产生的?

&#x1f609;&#x1f609; 欢迎加入我们的学习交流群呀&#xff01; ✅✅1&#xff1a;这是孙哥suns给大家的福利&#xff01; ✨✨2&#xff1a;我们免费分享Netty、Dubbo、k8s、Mybatis、Spring等等很多应用和源码级别的高质量视频和笔记资料&#xff0c;你想学的我们这里都…

使用Qt制作网易云播放器的歌曲排行界面

&#xff01;&#xff01;&#xff01;直接上图&#xff01;&#xff01;&#xff01; &#xff01;&#xff01;&#xff01;直接上图&#xff01;&#xff01;&#xff01; &#xff01;&#xff01;&#xff01;直接上图&#xff01;&#xff01;&#xff01; 网易云排行榜…

Windows本地的RabbitMQ服务怎么在Docker for Windows的容器中使用

1. 进入管理界面 windows安装过程请访问&#xff1a;Windows安装RabbitMQ、添加PHP的AMQP扩展 浏览器访问&#xff1a;http://127.0.0.1:15672/ 2. 创建虚拟主机 上面访问的是 RabbitMQ 的管理界面&#xff0c;可以在这个界面上进行一些操作&#xff0c;比如创建虚拟主机、…

微信小程序 全局共享数据 mobx

前言 全局数据共享&#xff08;又叫做&#xff1a;状态管理&#xff09;是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有&#xff1a;Vuex、Redux、MobX 等。 一. 安装 npm install --save mobx-miniprogram4.13.2 mobx-miniprogram-bindings2.1.5 安装完…

深度学习 Day18——P7咖啡豆识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 文章目录 前言1 我的环境2 代码实现与执行结果2.1 前期准备2.1.1 引入库2.1.2 设置GPU&#xff08;如果设备上支持GPU就使用GPU,否则使用C…

Linux基本命令操作

一、命令操作快捷键 1.Tab键&#xff1a;自动补齐 2.ctrlL &#xff1a;清屏 二、使用命令获取帮助信息 1. # ls --help 2. # man ls 三、目录和文件管理命令 1. pwd \\显示路径 2. cd \\进入或切换目录 3.​​​​​​​ ls -l \\显示详细信息 4. ​​​​​​​ ls -a \\…

实验02:RIP配置

1.实验目的&#xff1a; 了解路由选择协议&#xff08;Routing Protocol&#xff09;的基本原理及分类&#xff1b;掌握RIP协议的基本原理&#xff1b;实现RIP协议&#xff1b;掌握路由器配置及路由表查看的基本命令。 2.实验内容&#xff1a; 建立拓扑结构&#xff1b;配置…

ArcGIS导入excel中的经纬度信息,绘制矢量

1.首先整理坐标信息 2.其次转成2003格式的excel文件 3.导入arcgis&#xff0c;点击右键添加excel数据 4.显示xy数据 5.显示经度和纬度信息 6&#xff1a;点击【地理坐标系】->【World】->【WGS 1984】->【确定】 7.投影带的确定方式&#xff1a; 因为自己一直…

【已解决】ModuleNotFoundError: No module named ‘taming‘

问题描述 Traceback (most recent call last) <ipython-input-14-2683ccd40dcb> in <module> 16 from omegaconf import OmegaConf 17 from PIL import Image ---> 18 from taming.models import cond_transformer, vqgan 19 import taming.modu…

word四级目录序号不随上级目录序号变化问题解决方法

一、word中的几个元素简介 1、word中的列表 如下图所示&#xff0c;代表word的列表&#xff1a; 2、word中的标题 如下图所示&#xff0c;代表word的标题&#xff1a; 3、word中的编号/序号 如下图所示&#xff0c;代表word的编号/序号&#xff1a; 4、word中的目录 如下图…