本地部署开源白板工具Excalidraw并结合内网穿透远程绘制流程图

news2024/9/24 15:27:57

文章目录

    • 1. 安装Docker
    • 2. 使用Docker拉取Excalidraw镜像
    • 3. 创建并启动Excalidraw容器
    • 4. 本地连接测试
    • 5. 公网远程访问本地Excalidraw
      • 5.1 内网穿透工具安装
      • 5.2 创建远程连接公网地址
      • 5.3 使用固定公网地址远程访问

本文主要介绍如何在Ubuntu系统使用Docker部署开源白板工具Excalidraw,并结合cpolar内网穿透工具实现公网远程访问绘制流程图。

Excalidraw是一款手绘风格流程图、示意图、架构图在线绘制工具,界面简洁,交互细致,上手简单,操作习惯和大部分制图软件相似。使用Docker部署Excalidraw容器非常简单,只需一行命令即可快速实现本地部署。

image-20240206172031658

1. 安装Docker

本教程操作环境为Linux Ubuntu系统,在开始之前,我们需要先安装Docker。

在终端中执行下方命令:

添加Docker源

# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl gnupg
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

安装Dokcer包

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

通过运行映像来验证 Docker 引擎安装是否成功

sudo docker run hello-world

2. 使用Docker拉取Excalidraw镜像

sudo docker pull excalidraw/excalidraw

image-20240206172328932

然后执行查看镜像命令:

sudo docker images

image-20240206172422782

可以看到成功拉取了Excalidraw镜像。

3. 创建并启动Excalidraw容器

成功拉取Excalidraw镜像后,我们可以使用该镜像创建并运行一个Excalidraw容器。

在终端执行以下命令:

$ sudo docker run -d --name excalidraw -p 5000:80 excalidraw/excalidraw

参数说明:

  • –name excalidraw:本例容器名称为excalidraw,大家可以自己起名。
  • -p 5000:80: 端口进行映射,将本地 5000 端口映射到容器内部的 80 端口。
  • **-d ** :设置容器在在后台一直运行。

image-20240206172707031

然后执行下方命令查看容器是否正在运行:

sudo docker ps

image-20240206172810409

可以看到刚才创建的Excalidraw容器正在运行中。

4. 本地连接测试

现在我们可以通过浏览器直接访问 localhost:5000 端口的 Excalidraw 服务:

image-20240206172909607

可以看到,本地连接 Excalidraw 服务测试成功。

5. 公网远程访问本地Excalidraw

不过我们目前只能在本地连接刚刚使用docker部署的Excalidraw服务,如果身在异地,想要远程访问在本地部署的Excalidraw容器,但又没有公网ip怎么办呢?

我们可以使用cpolar内网穿透工具来实现无公网ip环境下的远程访问需求。

5.1 内网穿透工具安装

下面是安装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

5.2 创建远程连接公网地址

登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理——创建隧道:

  • 隧道名称:可自定义,注意不要与已有的隧道名称重复,本例使用了:exdraw
  • 协议:http
  • 本地地址:5000
  • 域名类型:随机域名
  • 地区:选择China Top

点击创建

image-20240207095612018

创建成功后,打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了两个公网地址,接下来就可以在其他电脑(异地)上,使用任意一个地址在浏览器中访问即可。

image-20240207095720991

如下图所示,成功实现在公网环境访问本地部署的Excalidraw服务!

image-20240207095940715

小结

为了方便演示,我们在上边的操作过程中使用了cpolar生成的HTTP公网地址隧道,其公网地址是随机生成的。

这种随机地址的优势在于建立速度快,可以立即使用。然而,它的缺点是网址是随机生成,这个地址在24小时内会发生随机变化,更适合于临时使用。

如果有长期远程访问本地Excalidraw服务的需求,但又不想每天重新配置公网地址,还想地址好看又好记,那我推荐大家选择使用固定的二级子域名方式来远程访问。

5.3 使用固定公网地址远程访问

登录cpolar官网,点击左侧的预留,选择保留二级子域名,地区选择China VIP,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称,这里我填写的是exdraw,大家也可以自定义喜欢的名称。

image-20240207100140130

保留成功后复制保留成功的二级子域名的名称:exdraw,返回登录Cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道exdraw,点击右侧的编辑:

image-20240207100319169

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名:exdraw
  • 地区:选择China VIP

点击更新(注意,点击一次更新即可,不需要重复提交)

image-20240207100431685

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名:

image-20240207100508737

最后,我们使用任意一个固定公网地址在浏览器访问,可以看到访问成功,这样一个固定且永久不变的公网地址就设置好了,随时随地都可以远程访问本地部署的Excalidraw服务了!

image-20240207100658129
以上就是如何在Ubuntu系统使用Docker部署Excalidraw容器,并结合cpolar内网穿透工具实现公网远程访问内网本地服务的全部流程,感谢您的观看。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1644927.html

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

相关文章

request库爬取100页tb商品信息

注册账号获取api测试key 1.打开淘宝网站登录并且搜索商品信息。和上一篇文章不一样,这一次我们找到search?这个文件右击复制。 2.在上一篇文章用到的在线curl命令转代码网站将复制过来的东西转换成python代码后,运行得到response。 3.建立cs…

Leetcode—1652. 拆炸弹【简单】

2024每日刷题&#xff08;127&#xff09; Leetcode—1652. 拆炸弹 实现代码 class Solution { public:vector<int> decrypt(vector<int>& code, int k) {int codeSize code.size();vector<int> ans(codeSize, 0);if(k 0) {return ans;}if(k > 0)…

vue2.7与vue2.6、vue3的区别

官网链接&#xff1a;https://v2.cn.vuejs.org/v2/guide/migration-vue-2-7.html -组合式与选项式 选项式&#xff1a;export default { 各种选项关键字名&#xff0c;都定好了&#xff0c;无需引入&#xff0c;配对放置即可}

superset与metabase调研比较

BI工具是什么&#xff1f; 百度百科是这么解释的&#xff1a; 商业智能&#xff08;Business Intelligence&#xff0c;简称&#xff1a;BI&#xff09;&#xff0c;又称商业智慧或商务智能&#xff0c;指用现代数据仓库技术、线上分析处理技术、数据挖掘和数据展现技术进行数…

实施MES管理系统时会遇到的风险以及解决方案

在如今竞争激烈的制造业环境中&#xff0c;每个企业都在努力寻求提升管理效率和降低成本的方法。然而&#xff0c;在引入如ERP系统和MES管理系统等先进管理解决方案时&#xff0c;企业不可避免地会遇到一系列风险。这些风险不仅可能影响项目的成功实施&#xff0c;还可能对企业…

06-xss攻防于绕过

xss的攻击于防御 攻击的利用方式 1&#xff09;获取cookie&#xff0c;实现越权&#xff0c;如果是获取到网站管理员的cookie&#xff0c;也可以叫提权。注意尽量尽快退出账号&#xff0c;删除session&#xff0c;让session失效 2&#xff09;钓鱼网站&#xff0c;模拟真实的…

【前端热门框架【vue框架】】——事件处理与表单输入绑定以及学习技巧,让学习如此简单

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;程序员-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

我们说的数据分析,到底要分析些什么?

作者 Gam 本文为CDA志愿者投稿作品 “我们说数据分析&#xff0c;到底要分析些什么&#xff1f;” 数据分析这个话题自从进入人们的视线以来&#xff0c;这个话题就成为人们茶余饭后的谈资&#xff0c;但是一千个人眼中就有一千个哈姆雷特&#xff0c;就意味着每个人对数据分…

“全国首批EVO+ ICL(V5)临床应用专家”授牌仪式在铭依眼科举行

近日&#xff0c;“全国首批EVO ICL&#xff08;V5&#xff09;新技术临床应用专家”授牌仪式在上海铭依眼科门诊部举行。仪式现场&#xff0c;瑞金医院谢冰教授获得此项荣誉称号。铭依眼科连锁医疗机构创始人吴英、Staar Surgical代表出席仪式现场。 为让近视人群不出国门即可…

AI论文速读 |2024[IJCAI]TrajCL: 稳健轨迹表示:通过因果学习隔离环境混杂因素

题目&#xff1a; Towards Robust Trajectory Representations: Isolating Environmental Confounders with Causal Learning 作者&#xff1a;Kang Luo, Yuanshao Zhu, Wei Chen, Kun Wang(王琨), Zhengyang Zhou(周正阳), Sijie Ruan(阮思捷), Yuxuan Liang(梁宇轩) 机构&a…

什么是水经微图网络加密锁?

水经微图&#xff0c;以下简称“微图”。 我们在《什么是水经微图加密锁&#xff1f;》一文中&#xff0c;为你分享了什么是微图加密锁&#xff0c;以及其使用的方法。 现在&#xff0c;我们再为你分享什么是网络加密锁&#xff0c;以及其使用的方法。 什么是网络加密锁&…

国内怎么观看Netflix网飞奈飞?Netflix会员怎么注册订阅?Netflix会员国内观看Netflix攻略

Netflix 是订阅式流媒体服务&#xff0c;会员可以在联网设备上观看电影和电视节目。 根据您的套餐&#xff0c;您还可以下载电影和电视节目到iOS、Android 或Windows 10 设备上&#xff0c;以便在没有互联网连接时观看内容。 一、在国内怎么观看奈飞&#xff1f; 网络问题 我…

室外巡检机器人——A2型高防护轮式巡检机器人

在科技日新月异的时代&#xff0c;室外巡检机器人犹如一位无畏的守护者&#xff0c;悄然出现在我们的视野之中。它迈着坚定的步伐&#xff0c;穿梭于各种复杂的室外环境&#xff0c;承担着重要的巡检任务。它是科技与智慧的结晶&#xff0c;是保障安全与稳定的前沿力量。让我们…

[1726]java试飞任务规划管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java试飞任务规划管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql…

机器学习入门之模型性能评估与度量

文章目录 性能评估误差欠拟合和过拟合模型选择与数据拟合 性能度量二分类的混淆矩阵查全率查准率F1分数 P-R曲线ROC曲线AUC 性能评估 机器学习的模型有很多&#xff0c;我们在选择的时候就需要对各个模型进行对比&#xff0c;这时候就需要一个靠谱的标准&#xff0c;能够评估模…

VScode添加c/c++头文件路径

1.设置工作区include path方法&#xff1a; 命令面板 -> 输入c/c 修改配置文件&#xff0c;添加路径&#xff1a; 2.全局路径&#xff1a; 设置 - > 搜索include path

SpringCloud知识点梳理

1. Spring Cloud 综述 1.1 Spring Cloud 是什么 [百度百科]Spring Cloud是⼀系列框架的有序集合。它利⽤Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册、配置中⼼、消息总线、负载均衡、断路器、数据监控等,都可以⽤ Spring Boot的开发⻛格…

RFC 791 (1)-导论

目录 浅论 IP是啥 IP可以管啥 操作 范例查看 提示&#xff1a;本系列将会开始RFC文档阅读&#xff0c;这里会给出我的一些笔记 浅论 我们这篇RFC文档描述的是IP和ICMP协议&#xff0c;我们都知道&#xff0c;在传统的OSI七层或者是现在被简化的五层&#xff1a;应用层&…

哪个牌子的电容笔好用?618五款爆款电容笔评测,不踩雷!

随着信息技术不断发展&#xff0c;iPad慢慢成为了现代年轻人工作、娱乐和学业的必备智能工具之一。然而&#xff0c;市场上涌现出众多品牌的电容笔&#xff0c;也存在着大量低质量的电容笔产品。这些产品往往无法达到预期的书写和绘画效果&#xff0c;反而可能导致用户体验不佳…

快速上手RabbitMQ

安装RabbitMQ 首先将镜像包上传到虚拟机&#xff0c;使用命令加载镜像 docker load -i mq.tar 运行MQ容器 docker run \-e RABBITMQ_DEFAULT_USERitcast \-e RABBITMQ_DEFAULT_PASS123321 \-v mq-plugins:/plugins \--name mq \--hostname mq \-p 15672:15672 \-p 5672:5672 …