在线协同画图平台Excalidraw容器化部署

前言

介绍一下excalidraw，这是一个非常容易上手的在线绘图平台，开源，可以本地部署，可以到我部署好的站点试试看。

折腾历程

网上有很多部署教程，基本都是只有excalidraw前端，无法实现协作功能，要实现协作功能还需要excalidraw-room和excalidraw-storage-backend分别用于协同和数据存储。

首先感谢alswl大佬的开源项目https://github.com/alswl/excalidraw-collaboration

以及俊阳IT知识库提供的部署教程

我先按照alswl的项目部署下来，已经能正常支持协作，但是数据无法保存到数据库，协作空间关闭后数据会丢失，然后找到了俊阳大佬的教程，重新部署，完美支持协作功能，但是他的excalidraw是比较旧的版本，UI界面个人还是不太喜欢，经过对比两个项目，发现alswl的项目没有配置后端数据库，结合两个项目，最后成功用alswl大佬的excalidraw-collaboration项目部署成功。

部署

git clone --recursive https://github.com/alswl/excalidraw-collaboration.git

cd excalidraw-collaboration

vim excalidraw.env.production

REACT_APP_BACKEND_V2_GET_URL=https://draw.gc-boy.com/api/v2/
REACT_APP_BACKEND_V2_POST_URL=https://draw.gc-boy.com/api/v2/post/

REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries

REACT_APP_HTTP_STORAGE_BACKEND_URL=https://draw.gc-boy.com/api/v2
REACT_APP_STORAGE_BACKEND=http

REACT_APP_PORTAL_URL=
# Fill to set socket server URL used for collaboration.
# Meant for forks only: excalidraw.com uses custom REACT_APP_PORTAL_URL flow
REACT_APP_WS_SERVER_URL=https://draw.gc-boy.com

REACT_APP_FIREBASE_CONFIG='{}'

# production-only vars
REACT_APP_GOOGLE_ANALYTICS_ID=foo

REACT_APP_PLUS_APP=https://app.excalidraw.com

把draw.gc-boy.com改自己的域名

构建镜像

make images

构建镜像的时间由服务器的性能和网速决定，一般需要很长时间，完成后用docker images命令查看

修改docker-compose.yaml 增加redis数据库URI

services:
  frontend:
    image: excalidraw:v0.1.0-5b2dbad-dirty
    ports:
      - 8080:80

  storage:
    image: excalidraw-storage-backend:v0.1.0-5b2dbad-dirty
    restart: always
    environment: # docs https://github.com/alswl/excalidraw-storage-backend#environement-variables
      - PORT=8081
      STORAGE_URI: redis://:password@192.168.0.112 #增加数据库环境变量
    ports:
      - 8081:8081

  room:
    image: excalidraw-room:v0.1.0-5b2dbad-dirty
    ports:
      - 8082:80

启动容器

docker-compose up -d 

到这里就可以打开excalideaw网页了，协作功能需要https加密，结下来还需要配置nginx代理，我的配置文件如下，供大家参考

server {
  server_name draw.gc-boy.com;
  listen 443 ssl http2;
  ssl_certificate /etc/ssl/certs/excalidraw.crt;
  ssl_certificate_key /etc/ssl/certs/excalidraw.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:8080;
    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 /api {
    proxy_pass http://127.0.0.1:8081;
    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:8082;
    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://;
  }
}

总结

excalidraw的部署过程大致就是这样，写的并不是很详细，有一点基础的应该都没有问题，如果你看到这篇文章并且愿意折腾的话可以留言交流。