前言
在之前我用的绘图工具都是 draw.io,后来接触到了 Excalidraw,它的手绘风格深得我的喜欢,所以研究了一下,刚开始是用 官方 默认的,但是用起来问题太多,比如总是时不时页面报错,协作功能也用不了。
所以打算自己部署一个,网上搜索了下 Excalidraw 搭建的教程,几乎所有的教程都非常简单,一个命令或配置文件两分钟就搞定了。
但是你有没有发现问题,搭建完毕后的项目用不了插件功能、用不了分享功能、用不了协作功能,还有一些手绘风的字体也没有。
所以打算自己构建一个全功能的 Excalidraw,也可以在安卓上安装APP使用。
搭建
本篇文章基于 docker
的方式进行搭建,如果你的服务器上没有 docker
和 docker-compose
的环境,就参考【docker、docker-compose安装】文章进行安装。
然后可以直接使用我这边构建的docker镜像:fanjunyang/jy-excalidraw
,里面已加入了分享、协作和手绘风格字体等配置。
基础镜像使用:fanjunyang/jy-excalidraw
数据存储镜像使用:kiliandeca/excalidraw-storage-backend
和 redis
协作镜像使用:excalidraw/excalidraw-room
创建相关目录
我自己放在服务器中 /root/docker_data/excalidraw
文件夹下面
创建yml文件
创建配置的时候需要用到上线后你所使用的域名,这边以 https://example.com
为例(注意是协议是 https
)
在 /root/docker_data/excalidraw
文件夹下面新建 docker-compose.yml
文件如下:
运行yml文件
进入 /root/docker_data/excalidraw
文件夹下面,运行命令:docker-compose up -d
或者在任意文件夹下面,运行命令:docker-compose -f /root/docker_data/excalidraw/docker-compose.yml up -d
然后服务就跑起来了,运行 docker ps
能查看到启动的容器了。
反向代理配置
docker
容器启动成功后,需要配置反向代理,我这边使用的 Nginx
,当然也可以用别的反代,大同小异,不过一定要开启 WebSocket
。
Nginx配置:
使用
反向代理配置成功后,服务器IP配置下DNS解析就可以使用了。
第一次访问加载的时候可能会有点慢(资源比较大),加载完毕后会有缓存,后续再使用就非常快了。
当然你也可以安装成安卓手机APP使用,只需用浏览器访问你搭建好的网站,然后点击更多,有【安装应用】的选项,直接安装,然后你的桌面上就有【Excalidraw】的APP了。
视频链接
- YouTube:https://youtube.com/watch?v=DyFAF1tfSgY
- Bilibili:https://bilibili.com/video/BV17N411a7yj
评论区