前言

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

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

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

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

tools-excalidraw-1

搭建

本篇文章基于 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 文件夹下面

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

视频链接

YouTube：https://youtube.com/watch?v=DyFAF1tfSgY
Bilibili：https://bilibili.com/video/BV17N411a7yj

最新版ExcaliDraw

services:
  frontend:
    image: fanjunyang/n-excalidraw:1.0.0
    environment:
      - VITE_APP_BACKEND_V2_GET_URL=https://example.com/excalidraw-storage-backend/api/v2/scenes/
      - VITE_APP_BACKEND_V2_POST_URL=https://example.com/excalidraw-storage-backend/api/v2/scenes/
      - VITE_APP_WS_SERVER_URL=https://example.com/
      - VITE_APP_FIREBASE_CONFIG={}
      - VITE_APP_HTTP_STORAGE_BACKEND_URL=https://example.com/excalidraw-storage-backend/api/v2
      - VITE_APP_STORAGE_BACKEND=http
    ports:
      - 8021:80

  storage:
    image: fanjunyang/n-excalidraw-storage-backend:1.0.0
    restart: always
    environment:
      - PORT=8081
    ports:
      - 8022:8081

  room:
    image: fanjunyang/n-excalidraw-room:1.0.0
    ports:
      - 8023:80

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://;
  }

PayPal	https://paypal.me/junyangfan
BTC (Bitcoin)
USDT (TRC20)

PayPal	https://paypal.me/junyangfan
BTC (Bitcoin)
USDT (TRC20)

目录CONTENT

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

前言

搭建