tldraw与cpolar强强联合：本地绘图协作与公网访问的完美结合

tldraw 与 cpolar 强强联合：本地绘图协作与公网访问的完美结合

前言

​ tldraw 是一个开源的、轻量级的在线绘图和协作工具，它提供了许多优点，使得用户能够高效地进行设计、草图绘制以及团队协作。以下是 tldraw 的一些主要好处：

• 简洁易用：界面直观友好，无需复杂的培训即可快速上手，适合任何人快速记录想法或制作简单的图表。
• 实时协作：允许多人同时在一个项目上工作，所有更改都会实时同步给所有参与者，非常适合团队合作和远程工作场景。
• 跨平台支持：作为一个基于Web的应用程序，tldraw 可以在任何现代浏览器中运行，支持Windows、macOS、Linux等多种操作系统，无需安装额外软件。
• 开源免费：作为开源软件，tldraw 免费提供给所有人使用，并且社区成员可以为其发展做出贡献，增加新的功能和改进。
• 无限画布：提供了一个无限扩展的画布，让用户可以根据需要自由地添加更多的细节或扩大工作区域，而不用担心空间限制。
• 丰富的图形元素：内置了多种形状、线条、箭头等基本图形元素，方便用户创建从简单到复杂的各种图表和设计。
• 导出与分享：支持将作品导出为多种格式（如PNG、SVG），并能轻松分享给他人，便于展示和交流。

​ 如果你在tldraw上进行设计工作，并希望通过网络与他人分享你的实时工作成果，你可以将tldraw部署在一个本地服务器上，然后使用cpolar这样的服务来生成一个公网可访问的URL。这样，即使tldraw没有直接提供在线共享功能，你也可以轻松地与全球任何地方的人共享你的工作界面。对于开发者来说，如果你正在开发基于tldraw的新功能或者集成了tldraw的应用程序，可以使用cpolar来临时暴露你的本地开发环境，从而方便地在真实网络条件下进行测试，无需部署到生产环境。

1.docker安装tldraw

在开始操作之前，请先确认你的系统中是否已经安装了 Docker。你可以通过以下命令来检查：

 docker --version

如果未安装过，可以参考这个教程https://www.cpolar.com/blog/docker-installation-linux-windows-macos

如果输出类似如下内容，表示 Docker 已安装：

检查docker是否启动：

 Get-Service com.docker.service

若未启动，则输入命令启动：

Start-Service com.docker.service

在任务管理器，查看是否启动成功：

接下来我们来安装tldraw:

docker run -d --name tldraw -p 7900:3000 wbsu2003/tldraw

端口号为7900，输入localhost:7900，查看是否启动成功：

这样就是安装成功啦，接下来我们可以玩转tldraw:

2.安装cpolar实现随时随地开发

cpolar 可以将你本地电脑中的服务（如 SSH、Web、数据库）映射到公网。即使你在家里或外出时，也可以通过公网地址连接回本地运行的开发环境。配合 VSCode 的 Remote – SSH 插件，你可以从任何设备访问自己的完整开发环境。

❤️以下是安装cpolar步骤：

官网在此：https://www.cpolar.com

点击免费注册注册一个账号，并下载最新版本的Cpolar：

登录成功后，点击下载Cpolar到本地并安装（一路默认安装即可）本教程选择下载Windows版本。

Cpolar安装成功后，在浏览器上访问http://localhost:9200，使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来在web 管理界面配置即可。

3.配置公网地址

通过配置，你可以在本地 WSL 或 Linux 系统上运行 SSH 服务，并通过 Cpolar 将其映射到公网，从而实现从任意设备远程连接开发环境的目的。

• 隧道名称：可自定义，本例使用了:tldraw，注意不要与已有的隧道名称重复

• 协议：http

• 本地地址：7900

• 域名类型：随机域名

• 地区：China Top

  

创建成功后，打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了公网地址，接下来就可以在其他电脑或者移动端设备（异地）上，使用任意一个地址在终端中访问即可。

• http表示使用的协议类型
• 713e0973.r2.cpolar.top是 Cpolar 提供的域名

通过 Cpolar 提供的公网地址，就可以随时随地进入本网站啦！

http://713e0973.r2.cpolar.top/

4.保留固定二级子域名公网地址

使用cpolar为其配置固定二级子域名地址，该地址为固定地址，不会随机变化。

选择区域和描述：有一个下拉菜单，当前选择的是“China Top”。
右侧输入框，用于填写描述信息。
保留按钮：在右侧有一个橙色的“保留”按钮，点击该按钮可以保留所选的二级子域名。
列表中显示了一条已保留的子域名记录。

• 地区：显示为“China Top”。
• 二级子域名：显示为“tldraw”。

登录cpolar web UI管理界面，点击左侧仪表盘的隧道管理——隧道列表，找到所要配置的隧道tldraw，点击右侧的编辑。

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

• 域名类型：选择二级子域名
• Sub Domain：tldraw

点击更新。

创建完成后，打开在线隧道列表，此时可以看到随机的公网地址已经发生变化，地址名称也变成了保留和固定的二级子域名。

最后测试一下固定的地址是否好用：

这样，就可以随时随地完成你的画图任务啦。

总结

tldraw 是一款开源免费的在线白板工具，它以其简洁易用的界面、强大的实时协作功能和无限扩展的画布空间，支持用户轻松进行图表绘制、头脑风暴及创意分享。无论是在跨平台兼容性、数据持久性和可导出性方面，还是在提供高性能表现上，tldraw 都表现出色，适用于个人创作到团队合作等多种场景，是一个灵活而强大的视觉沟通解决方案。

感谢您对本篇文章的喜爱，有任何问题欢迎留言交流。cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站