🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法
💫个人格言:"没有罗马,那就自己创造罗马~"
文章目录
-
- 前言
- 1.Excalidraw功能特点
- 2.安装Node.js
- 3.安装Git
- 4.安装Excalidraw
- 5.本地链接测试
- [6. 公网远程访问本地Excalidraw](#6. 公网远程访问本地Excalidraw)
- 7.内网穿透工具安装
- 8.配置公网地址
- 9.使用固定公网地址远程访问
前言
本文主要介绍如何在Windows系统电脑端使用这款超好用的白板手绘工具Excalidraw，并结合cpolar内网穿透轻松实现使用客户端异地远程访问本地服务端使用白板手绘工具。
在信息技术高度发达的今天，人们却开始热衷起了复古模式，比如面对琳琅满目、色彩艳丽的各种图表图形无感，却喜欢原始手绘风格的图。但是让人拿起笔去绘图已经不再可能，那么借助软件来实现就变得很有意义。今天给大家推荐的就是一个简易手绘神器------Excalidraw。
1.Excalidraw功能特点
Excalidraw 是一款轻量的手绘风格电子白板在线应用，无论是 Windows / macOS / linux，甚至是手机，打开浏览器就能使用，能简单地画出美观漂亮的流程图、示意图和开发架构图等常用图片，也可以作为会议画板使用，不仅是一款优秀的画图应用，也是一款自由便捷的电子白板应用。用户使用Excalidraw可以通过简单几下点击和拉伸创出所需的图形，而且图形可以通过一个链接就可以分享给你的好友一起协作展示或创作。
Github官方地址：GitHub - excalidraw/excalidraw： 用于绘制手绘图表的虚拟白板
上面这张图是官方在Github上说明文档中的一张截图，下面这种是我个人在使用中自己绘制的一张图。手绘的画风看起来很可爱。
不管是官方的截图还是我自己画的图，看起来是不是都带有一种卡通、有趣的特点呢？试想一下如果在枯燥的技术思维中带有一种有趣的特点，是不是对技术图不显得那么枯燥乏味了呢？说了这么多该如何部署呢，往下看~
2.安装Node.js
下载地址：
https://nodejs.org/en/
3.安装Git
下载地址：
https://git-scm.com/downloads
一直点击Next直到最后一步，安装完成。
4.安装Excalidraw
克隆存储库
点击win+R键，输入"cmd"跳出命令窗口
shell
git clone https://github.com/excalidraw/excalidraw.git
安装yarn
shell
npm install -g yarn
安装依赖项
shell
yarn
跳到excalidraw中
shell
cd excalidraw启动服务器
shell
yarn start
5.本地链接测试
现在，您就可以通过浏览器直接访问 http://localhost:3000 端口的Excalidraw服务，并开始在自己喜欢的代码编辑器中编码啦！
可以看到，本地连接Excalidraw服务测试成功。
6. 公网远程访问本地Excalidraw
目前我们在本地成功部署了Excalidraw，但是如果我们想实现不在局域网下，在公网能够远程访问Excalidraw的话，我们就可以使用Cpolar内网穿透来实现公网随时随地访问了！免去了复杂得本地部署过程，只需要一个公网地址直接就可以访问。
7.内网穿透工具安装
下面是安装cpolar步骤：
Cpolar官网地址: https://www.cpolar.com
点击进入cpolar官网，点击免费使用注册一个账号，并下载最新版本的Cpolar。
登录成功后，点击下载Cpolar到本地并安装（一路默认安装即可）本教程选择下载Windows版本。
Cpolar安装成功后，在浏览器上访问http://localhost:9200，使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来在web 管理界面配置即可。
接下来配置一下Excalidraw的公网地址~
8.配置公网地址
登录后，点击左侧仪表盘的隧道管理------创建隧道，
创建一个Excalidraw的公网http地址隧道
- 隧道名称：可自定义命名，注意不要与已有的隧道名称重复
- 协议：选择http
- 本地地址：3000 (本地访问的地址)
- 域名类型：免费选择随机域名
- 地区：选择China VIP
隧道创建成功后，点击左侧的状态------在线隧道列表，查看所生成的公网访问地址，有两种访问方式，一种是http和https。
使用上面的Cpolar生成的任意一个公网地址，在手机或任意设备的浏览器进行登录访问，即可成功看到Excalidraw界面。使用了Cpolar的公网域名，无需自己购买云服务器，即可到公网访问Excalidraw随便编辑绘图啦！
小结
为了方便演示，我们在上边的操作过程中使用了cpolar生成的HTTP公网地址隧道，其公网地址是随机生成的。这种随机地址的优势在于建立速度快，可以立即使用。然而，它的缺点是网址是随机生成，这个地址在24小时内会发生随机变化，更适合于临时使用。如果有长期远程访问本地Excalidraw服务的需求，但又不想每天重新配置公网地址，还想地址好看又好记，那我推荐大家选择使用固定的二级子域名方式来远程访问。
9.使用固定公网地址远程访问
登录cpolar官网，点击左侧的预留，选择保留二级子域名，地区选择China VIP，设置一个二级子域名名称，点击保留，保留成功后复制保留的二级子域名名称，这里我填写的是Excalidraw，大家也可以自定义喜欢的名称。
保留成功后复制保留成功的二级子域名的名称：Excalidraw，返回登录Cpolar web UI管理界面，点击左侧仪表盘的隧道管理------隧道列表，找到所要配置的隧道Excalidraw，点击右侧的编辑：
修改隧道信息，将保留成功的二级子域名配置到隧道中
- 域名类型：选择二级子域名
- Sub Domain：填写保留成功的二级子域名：Excalidraw
- 地区：选择China VIP
点击更新(注意,点击一次更新即可,不需要重复提交)
更新完成后，打开在线隧道列表，此时可以看到公网地址已经发生变化，地址名称也变成了固定的二级子域名名称的域名：
最后，我们使用固定的公网https地址在任何浏览器打开访问，可以看到访问Excalidraw成功了这样一个固定且永久不变的公网地址就设置好了。
总结
Excalidraw是一款免费、有趣味性、丰富组件库的作图工具，如果你喜欢绘制一些趣味图，对于任何寻求简单、直观的绘图和图表工具的人来说，Excalidraw是一款出色的工具。它的易用性、灵活性、安全和协作功能使其成为各种用例的绝佳选择，也可以直接借助AI让其创作变得更加容易，最重要这是一款开源软件你可以将将其随时扩展到你的应用中去。
以上就是如何在Windows系统部署Excalidraw容器，并结合cpolar内网穿透工具实现公网远程访问内网本地服务的全部流程，感谢您的观看。