excalidraw自部署最新版

搭建

参考文章：https://blog.alswl.com/2022/10/self-hosted-excalidraw/

为什么

文章使用的还是webpack版本，最新版已经是vite版本了。需要修改的是 process.env => import.meta.env

的方式

操作

替换Firebase为HTTP
自定义DB存储
优化图片存储

具体修改参考

https://github.com/alswl/excalidraw/commit/175dbc2beb96d235b60852e4e1fe70a7534249f6

部署图

        flowchart LR
0["部署"]
1["app(最新版) https://github.com/excalidraw/excalidraw"]
2["后端 - nest.js (https://github.com/alswl/excalidraw-storage-backend)"]
3["room (官方)-(https://github.com/excalidraw/excalidraw-room)"]

0 --> 1
0 --> 2
0 --> 3

克隆room仓库和后端仓库，使用docker发布到阿里云私有镜像仓库

app使用 yarn build 再用nginx代理

自用例子

services:
  redis:
    image: redis
    ports:
      - 'xxxx:6379'
    command: redis-server --requirepass xxxxxxxxxx
    environment:
      TZ: Asia/Shanghai
    volumes:
      - ./data/redis:/data
  storage:
    image: registry.cn-hangzhou.aliyuncs.com/taoya7/draw_backend:latest
    restart: always
    environment:
      - PORT=8081
      - STORAGE_URI=redis://:xxxxxx@xxx.xxx.xxx.xxx:6104
    ports:
      - 6102:8081
  room:
    image: registry.cn-hangzhou.aliyuncs.com/taoya7/draw_room:latest
    restart: always
    ports:
      - 6103:80

效果

问题

redis key存储的图片为base64, 导致初次加载较慢。可以在后端转化成阿里云OSS，存储链接实现加速。