Docker部署开源白板工具Excalidraw并结合内网穿透远程访问

最近,我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念,而且内容风趣幽默。我觉得它对大家可能会有所帮助,所以我在此分享。点击这里跳转到网站。

文章目录

    • 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内网穿透工具实现公网远程访问内网本地服务的全部流程,感谢您的观看。

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

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

相关文章

微服务远程调用Feign

目录 RPC概述 什么是Feign? Ribbon&Feign对比 Feign的设计架构 Spring Cloud Alibaba快速整合Feign Spring Cloud Feign扩展 日志配置 契约配置 通过拦截器实现参数传递 自定义拦截器实现认证逻辑 超时时间配置 RPC概述 微服务之间如何方便优雅的实…

外包干了两个月,技术退步明显。。。。。

先说一下自己的情况,本科生,19年通过校招进入广州某软件公司,干了接近4年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

VegaPrime 2013 VP2013

Vega Prime 2013 VegaPrime 2013 VP2013

解决SSH远程登录开饭板出现密码错误问题

输入“adduser Zhanggong回车”,使用adduser命令创建开发板用户名为Zhanggong 输入密码“123456” 输入密码“123456”

使用LinkedList实现堆栈及Set集合特点、遍历方式、常见实现类

目录 一、使用LinkedList实现堆栈 堆栈 LinkedList实现堆栈 二、集合框架 三、Set集合 1.特点 2.遍历方式 3.常见实现类 HashSet LinkedHashSet TreeSet 一、使用LinkedList实现堆栈 堆栈 堆栈(stack)是一种常见的数据结构,一端…

Leetcoder Day17| 二叉树 part06

语言:Java/C 654.最大二叉树 给定一个不含重复元素的整数数组。一个以此数组构建的最大二叉树定义如下: 二叉树的根是数组中的最大元素。左子树是通过数组中最大值左边部分构造出的最大二叉树。右子树是通过数组中最大值右边部分构造出的最大二叉树。 …

matlab|计及电转气协同的含碳捕集与垃圾焚烧虚拟电厂优化调度

1 主要内容 该程序参考《计及电转气协同的含碳捕集与垃圾焚烧虚拟电厂优化调度》模型,主要实现的是计及电转气协同的含碳捕集与垃圾焚烧虚拟电厂优化调度模型。通过引入碳捕集电厂–电转气–燃气机组协同利用框架,碳捕集的CO2 可作为电转气原料&#xf…

springboot213大学生心理健康管理系统的设计与实现

大学生心理健康管理系统的设计与实现 摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理,然而,随着近些年信息技术的迅猛发展,让许多比较老套的信息管理模式进行了更新迭代,试卷信息因为其管理内容繁杂,管理…

发现了一个超赞的办公利器!ONLYOFFICE 文档 8.0 强势登场!

迎接 ONLYOFFICE 文档 v8.0发布后的全新升级!现在,适用于 Linux、Windows 和 macOS 的免费 ONLYOFFICE 桌面应用程序更加强大!全新的 RTL 界面、本地界面主题、与 Moodle 的集成等实用功能,让你的办公体验更加出色!全新…

备战蓝桥杯—— 双指针技巧巧答链表2

对于单链表相关的问题,双指针技巧是一种非常广泛且有效的解决方法。以下是一些常见问题以及使用双指针技巧解决: 合并两个有序链表: 使用两个指针分别指向两个链表的头部,逐一比较节点的值,将较小的节点链接到结果链表…

码农永远高薪吃香的3项特质

最近看到Google在裁员滚滚,再次对CS就业环境有了清醒认知。之前听程序员担忧裁员,还以为他杞人忧天。然而,现实就是如此寒冷彻骨啊! 当然,有些具备不可替代性的码农,永远吃香。总结发现有以下几点特质&…

RabbitMQ鉴权设计以及相关探讨

文章目录 1. rabbitmq的鉴权设计2. rabbitmq鉴权应用范围3. rabbitmq鉴权的常用方法3.1 用户管理3.2 角色管理3.3 权限管理 4. 默认鉴权4.1 默认用户4.2 默认角色 5. 参考文档 鉴权,分别由鉴和权组成 鉴: 表示身份认证,认证相关用户是否存在…

J7 - 对于ResNeXt-50算法的思考

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 | 接辅导、项目定制 J6周有一段代码如下 思考过程 首先看到这个问题的描述,想到的是可能使用了向量操作的广播机制然后就想想办法验证一下&…

WebGIS开发实战:智慧机场项目【含教程源码笔记】

智慧机场项目功能: 1、航班飞机轨迹的展示 2、航班终点天气的展示 3、异常航班的公告和推送 4、不同风格地图的切换 5、不要要素图层的显示和隐藏 前置知识 1、html,css 2、JavaScript 3、Http请求的知识 GIS技术已经成为了许多行业的热门需求,而…

【算法分析与设计】1的个数

📝个人主页:五敷有你 🔥系列专栏:算法分析与设计 ⛺️稳中求进,晒太阳 题目 编写一个函数,输入是一个无符号整数(以二进制串的形式),返回其二进制表达式中数字位…

Canvas:开启web上的图形编程之门

一.概述 <canvas>元素是HTML5引入的一个新标签&#xff0c;它允许浏览器绘制二维图形和图像。这个元素本身并不具备绘图能力。实际上&#xff0c;它提供的只是一个容器&#xff0c;而绘图操作则需要使用JavaScript来完成。Canvas的API极其丰富&#xff0c;支持绘制文本、…

2.5网安学习第二阶段第五周回顾(个人学习记录使用)

本周重点 ①多进程和多线程 1、进程和线程 2、多线程爆破 ②Redis数据库 1、Redis的使用 2、Redis持久化 3、Redis未授权免密登录 ③嗅探和Python攻击脚本 1、嗅探&#xff08;端口扫描和IP扫描&#xff09; 2、SCAPY的应用 3、Python攻击脚本&#xff08;SYN半连接…

Jmeter教程-JMeter 环境安装及配置

Jmeter教程 JMeter 环境安装及配置 在使用 JMeter 之前&#xff0c;需要配置相应的环境&#xff0c;包括安装 JDK 和获取 JMeter ZIP 包。 安装JDK 1.JDK下载 示例环境为Windows11环境&#xff0c;读者应根据实际环境下载JDK的安装包。 JDK下载地址&#xff1a; Java21 下载 …

JavaWeb——004Maven SpringBootWeb入门

一、Maven 1、什么是maven&#xff1f; 2、Maven的作用是什么&#xff1f;&#xff08;3种&#xff09; 1.1、方便的依赖管理 依赖管理&#xff1a;有了Maven&#xff0c;我们就不用再手动导入Jar包了&#xff0c;我们只需要在配置文件当中&#xff0c;简单描述一下项目所需要…

Thymeleaf无法显示模板视图,加载页面显示404状态问题的解决方法

本篇文章主要讲解&#xff1a;Thymeleaf无法显示模板视图&#xff0c;加载页面显示404状态问题的解决方法 日期&#xff1a;2024年2月23日 作者&#xff1a;任聪聪 现象说明&#xff1a; 1.只返回输出模板的名称&#xff0c;如图&#xff1a; 2.显示报错信息&#xff1a; Whi…