目 录CONTENT

文章目录

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

俊阳IT知识库
2023-08-07 / 12 评论 / 0 点赞 / 2,030 阅读 / 1,307 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-12-07,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

前言

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

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

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

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

tools-excalidraw-1

搭建

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

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

基础镜像使用:fanjunyang/jy-excalidraw
数据存储镜像使用:kiliandeca/excalidraw-storage-backendredis
协作镜像使用:excalidraw/excalidraw-room

创建相关目录

我自己放在服务器中 /root/docker_data/excalidraw 文件夹下面

mkdir -p /root/docker_data/excalidraw
cd /root/docker_data/excalidraw

创建yml文件

创建配置的时候需要用到上线后你所使用的域名,这边以 https://example.com 为例(注意是协议是 https

/root/docker_data/excalidraw 文件夹下面新建 docker-compose.yml 文件如下:

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配置:

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:8022;
    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:8023;
    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了。

tools-excalidraw-2

视频链接

0

评论区