Docker自建Excalidraw手绘风画图白板工具,可安装安卓APP使用

前言

在之前我用的绘图工具都是 draw.io,后来接触到了 Excalidraw,它的手绘风格深得我的喜欢,所以研究了一下,刚开始是用 官方 默认的,但是用起来问题太多,比如总是时不时页面报错,协作功能也用不了。

所以打算自己部署一个,网上搜索了下 Excalidraw 搭建的教程,几乎所有的教程都非常简单,一个命令或配置文件两分钟就搞定了。

但是你有没有发现问题,搭建完毕后的项目用不了插件功能、用不了分享功能、用不了协作功能,还有一些手绘风的字体也没有。

所以打算自己构建一个全功能的 Excalidraw,也可以在安卓上安装APP使用。

搭建

本篇文章基于 docker 的方式进行搭建,如果你的服务器上没有 dockerdocker-compose 的环境,就参考【docker、docker-compose安装】文章进行安装。

然后可以直接使用我这边构建的docker镜像:fanjunyang/jy-excalidraw ,里面已加入了分享、协作和手绘风格字体等配置。

基础镜像使用:fanjunyang/jy-excalidraw 数据存储镜像使用:kiliandeca/excalidraw-storage-backendredis 协作镜像使用: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了。

相关推荐
AskHarries9 分钟前
Java字节码增强库ByteBuddy
java·后端
佳佳_23 分钟前
Spring Boot 应用启动时打印配置类信息
spring boot·后端
MonkeyKing_sunyuhua27 分钟前
ubuntu22.04 docker-compose安装postgresql数据库
数据库·docker·postgresql
追风林1 小时前
mac m1 docker本地部署canal 监听mysql的binglog日志
java·docker·mac
许野平2 小时前
Rust: 利用 chrono 库实现日期和字符串互相转换
开发语言·后端·rust·字符串·转换·日期·chrono
€☞扫地僧☜€2 小时前
docker 拉取MySQL8.0镜像以及安装
运维·数据库·docker·容器
茶馆大橘2 小时前
微服务系列六:分布式事务与seata
分布式·docker·微服务·nacos·seata·springcloud
全能全知者3 小时前
docker快速安装与配置mongoDB
mongodb·docker·容器
齐 飞3 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
LunarCod4 小时前
WorkFlow源码剖析——Communicator之TCPServer(中)
后端·workflow·c/c++·网络框架·源码剖析·高性能高并发