前言
在之前我用的绘图工具都是 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
文件夹下面
bash
mkdir -p /root/docker_data/excalidraw
cd /root/docker_data/excalidraw
创建yml文件
创建配置的时候需要用到上线后你所使用的域名,这边以 https://example.com
为例(注意是协议是 https
)
在 /root/docker_data/excalidraw
文件夹下面新建 docker-compose.yml
文件如下:
yaml
version: "3"
services:
excalidraw:
image: fanjunyang/jy-excalidraw # 默认使用latest的TAG,也就是我构建的最新镜像
healthcheck:
disable: true
ports:
- "8021:80" # 端口可自行修改
environment:
BACKEND_V2_GET_URL: https://example.com/excalidraw-storage-backend/api/v2/scenes/
BACKEND_V2_POST_URL: https://example.com/excalidraw-storage-backend/api/v2/scenes/
LIBRARY_URL: https://libraries.excalidraw.com
LIBRARY_BACKEND: https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
SOCKET_SERVER_URL: https://example.com/
STORAGE_BACKEND: "https" # 协议是 https
HTTP_STORAGE_BACKEND_URL: "https://example.com/excalidraw-storage-backend/api/v2"
excalidraw-storage-backend:
image: kiliandeca/excalidraw-storage-backend
ports:
- "8022:8080"
environment:
STORAGE_URI: redis://redis:6379
excalidraw-room:
image: excalidraw/excalidraw-room
ports:
- "8023:80"
redis:
image: redis
ports:
- "6379:6379"
运行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配置:
ini
server {
server_name example.com;
listen 443 ssl http2;
ssl_certificate /home/xxx/.acme.sh/xxx/fullchain.cer;
ssl_certificate_key /home/xxx/.acme.sh/xxx/example.com.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
listen 80;
if ($scheme = http) {
return 301 https://$host:443$request_uri;
}
location / {
proxy_pass http://127.0.0.1:8021;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Headers *;
add_header Access-Control-Allow-Credentials true;
if ($request_method = 'OPTIONS') {
return 204;
}
proxy_redirect http:// https://;
}
location /excalidraw-storage-backend/ {
proxy_pass http://127.0.0.1:8087;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Headers *;
add_header Access-Control-Allow-Credentials true;
if ($request_method = 'OPTIONS') {
return 204;
}
proxy_redirect http:// https://;
}
location /socket.io/ {
proxy_pass http://127.0.0.1:5000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Headers *;
add_header Access-Control-Allow-Credentials true;
if ($request_method = 'OPTIONS') {
return 204;
}
proxy_redirect http:// https://;
}
}
使用
反向代理配置成功后,服务器IP配置下DNS解析就可以使用了。
第一次访问加载的时候可能会有点慢(资源比较大),加载完毕后会有缓存,后续再使用就非常快了。
当然你也可以安装成安卓手机APP使用,只需用浏览器访问你搭建好的网站,然后点击更多,有【安装应用】的选项,直接安装,然后你的桌面上就有【Excalidraw】的APP了。