Excalidraw离线版部署方案（支持内网环境）-洪萨配资

Excalidraw 离线部署方案：构建内网安全协作白板

在企业数字化转型不断深入的今天，技术团队对可视化协作工具的需求早已超越“能画图”的基础阶段。尤其是在金融、军工、科研和大型制造等行业中，网络隔离与数据安全成为刚性要求——任何依赖公网服务的在线白板都可能成为信息泄露的隐患。

正是在这样的背景下，Excalidraw这款开源手绘风格白板工具逐渐崭露头角。它不追求功能堆砌，而是以极简设计、高度可定制性和完全可控的数据流，赢得了越来越多技术团队的青睐。更重要的是，它的前端纯静态特性使得我们可以在无互联网连接的环境中完整部署，真正实现“数据不出内网”。

但要让 Excalidraw 在封闭网络中稳定运行，并支持多人实时协作，并非简单地把代码拷贝到服务器上就能搞定。我们需要解决资源本地化、通信加密、持久化存储以及未来扩展性等一系列工程问题。本文将带你一步步构建一个可在内网独立运行的 Excalidraw 协作平台，涵盖从容器封装到本地 WebSocket 服务搭建的全过程。

核心架构思路：去中心化 + 自托管

传统协作工具如 Miro 或 FigJam 的工作模式是典型的“云中心架构”：所有操作同步至远程服务器，用户通过浏览器访问 CDN 加载资源。这种模式在公共网络下体验流畅，但在内网或离线场景中却寸步难行。

而 Excalidraw 的优势在于其前端主导、后端可选的设计哲学：

所有图形绘制逻辑都在浏览器完成；
数据默认保存在localStorage中；
实时协作模块为独立组件，可通过配置关闭或替换为私有服务。

这意味着我们可以剥离对外部服务的一切依赖——CDN、字体、遥测、认证接口——将其彻底转化为一个纯内网可用的本地应用。

整个部署方案围绕三个核心目标展开：
1.静态资源全托管：确保页面加载不请求任何外部域名；
2.协作能力本地化：使用自建 WebSocket 服务替代 Firebase；
3.安全性闭环管理：通信加密、访问控制、日志审计一体化。

容器化部署：用 Docker 实现一键分发

最理想的内网部署方式，是让整个系统像“软件包”一样可复制、可迁移。Docker 正好满足这一需求。我们将 Excalidraw 构建后的静态文件打包进 Nginx 容器，形成一个即启即用的服务单元。

Dockerfile 设计要点

FROM nginx:alpine LABEL maintainer="infra-team@company.local" RUN rm -rf /usr/share/nginx/html/* COPY ./build /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 VOLUME ["/usr/share/nginx/html/persistence"] CMD ["nginx", "-g", "daemon off;"]

这个镜像做了几件关键事：

使用nginx:alpine减少体积（最终镜像约 25MB），适合在带宽受限的内网快速分发。
清空默认网页内容，注入我们预构建的 Excalidraw 前端产物。
挂载/persistence目录作为共享卷，为后续协作数据落地做准备。
通过自定义nginx.conf启用压缩与缓存策略，提升低速网络下的响应效率。

⚠️ 注意：不要直接克隆主分支运行npm start。生产环境必须先执行npm run build生成静态资源，否则会引入开发服务器和热更新脚本，增加攻击面。

Nginx 配置优化

server { listen 80; server_name localhost; gzip on; gzip_types text/css application/javascript image/svg+xml; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ =404; } location ~* \.(js|css|png|jpg|svg)$ { expires 1y; add_header Cache-Control "immutable, public"; } }

这里的Cache-Control: immutable是个细节亮点。对于哈希命名的静态资源（如main.abcd1234.js），一旦发布就不会变更，浏览器可永久缓存，极大减少重复加载开销。

构建完成后，管理员可将镜像推送到内网 Harbor 或 Nexus 私有仓库，各分支机构只需一条命令即可拉取并启动：

docker run -d --name excalidraw -p 8080:80 excalidraw-offline:latest

内网协作如何实现？WebSocket 自建才是王道

很多人误以为 Excalidraw 离线只能单人使用，其实不然。只要部署配套的collab-server，局域网内的多个用户依然可以实现实时协同编辑。

协作机制原理解析

Excalidraw 的协作模型基于轻量级 WebSocket 服务，采用类似 OT（操作变换）的同步算法：

每个客户端将自己的操作（新增矩形、移动箭头等）序列化为 JSON 消息；
发送给collab-server；
服务器广播给同房间的其他成员；
各端接收消息并重放操作，保持状态一致。

整个过程延迟极低，在千兆局域网中几乎感觉不到卡顿。

部署本地协作服务

进入项目目录中的collab子模块：

git clone https://github.com/excalidraw/excalidraw.git cd excalidraw/collab npm install

由于现代浏览器对非 HTTPS 页面禁用 WebSocket Secure（WSS），即使在内网也建议配置 TLS。你可以使用内网 CA 签发证书，或用 OpenSSL 生成自签名证书：

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes -subj "/CN=excalidraw.internal"

然后启动服务：

node server.js --port 3001 --ssl-key ./key.pem --ssl-cert ./cert.pem

服务启动后监听wss://0.0.0.0:3001，等待前端连接。

前端如何接入？

需要在 HTML 入口文件中注入全局配置，告诉客户端该连哪个服务器：

<script> window.EXCALIDRAW_EXPORT_CONFIG = { COLLAB_SERVER_URL: 'wss://192.168.1.100:3001', ALLOW_ANONYMOUS: true, }; </script>

注意 IP 地址应指向实际部署collab-server的主机。如果使用负载均衡或多实例部署，可配合反向代理统一入口。

💡 小技巧：若希望避免手动修改 HTML，可在构建时通过 Webpack DefinePlugin 注入环境变量，实现不同环境自动切换协作地址。

安全加固：不只是跑起来，更要跑得稳

在一个真正的企业级部署中，“能用”只是第一步，“安全可控”才是底线。

通信层防护

强制 WSS：禁止明文 WS，防止中间人窃听；
证书信任管理：将内网 CA 根证书预装到所有终端设备的信任库中；
CORS 控制：Nginx 层面限制仅允许指定来源访问 API 接口（虽然当前无 RESTful 接口，但预留防范）；

访问控制策略

尽管目前collab-server不自带身份验证（需自行集成 OAuth/LDAP），但我们可以通过外围手段增强安全性：

防火墙规则：仅开放给办公 VLAN 或特定 IP 段；
容器网络隔离：使用 Docker 自定义 bridge 网络，限制服务间直连；
日志监控：收集 Nginx 和 Node.js 日志，记录连接尝试与异常行为。

数据持久化与备份

虽然绘图数据主要由客户端本地保存，但为了防止误删或设备故障，建议定期归档/persistence目录下的协作快照文件。

可编写定时任务脚本，每日凌晨执行压缩打包并上传至内网 NAS：

tar -czf /backup/excalidraw_$(date +%Y%m%d).tar.gz /data/excalidraw/persistence/

可扩展性展望：不只是画图，更是智能协作起点

当我们拥有了一个稳定、安全、可维护的本地化白板平台后，下一步就可以思考如何让它变得更“聪明”。

本地 AI 集成潜力巨大

设想这样一个场景：产品经理输入一段自然语言描述，“帮我画一个微服务架构图，包含用户中心、订单系统、支付网关，用 Kafka 做异步通知”，系统便自动生成初步草图。

这并非科幻。借助本地部署的大语言模型（如 Llama 3、ChatGLM3-6B），完全可以在内网实现“文本 → 图表”的智能生成。Excalidraw 提供了完善的 JSON Schema，每个元素结构清晰，非常适合程序化构造。

未来只需开发一个中间服务，接收提示词，调用本地 LLM 解析意图，输出符合 Excalidraw 格式的对象数组，再通过插件机制注入画布，即可完成自动化绘图。

插件生态延展

Excalidraw 支持插件系统，目前已有一些社区贡献的功能，如：
- 自动生成流程图布局
- 导出为 Mermaid 语法
- 集成 PlantUML 渲染

这些都可以在离线环境下重新打包集成。例如，将 Mermaid 的解析库一同嵌入前端，用户就能直接在白板中插入动态更新的流程图区块。

落地实践建议：从试点到推广

任何新技术的引入都不宜一蹴而就。建议按以下节奏推进：

小范围试用：选择某个研发小组作为试点，部署单机版 Excalidraw，验证基本功能；
加入协作能力：扩展为局域网服务，支持会议室投屏协作；
安全合规评估：由信息安全部门审查架构设计，确认符合等级保护要求；
对接现有体系：未来可考虑与 Confluence 替代品联动，实现“白板→文档”一键归档；
建立运维规范：制定版本升级、故障恢复、数据迁移的标准流程。

同时提供一份《快捷键指南》和《模板库》，帮助非技术人员快速上手。毕竟，一个好的工具不仅要工程师喜欢，也要让产品、运营愿意用。

写在最后：回归本质的技术选择

Excalidraw 看似只是一个“会抖动线条的白板”，但它背后体现的是一种清醒的技术价值观：不做过度设计，不依赖云端黑盒，把控制权交还给用户。

在这个 SaaS 工具泛滥、数据被层层截留的时代，能够亲手搭建一个完全受控的协作平台，本身就是一种难得的能力。而通过 Docker + WebSocket + 自签名证书这套组合拳，我们不仅解决了离线使用的刚需，更为未来的智能化演进打下了坚实基础。

也许有一天，我们会在这块手绘风格的画布上，勾勒出整个企业的数字孪生蓝图——而这一切，始终安静地运行在自己的服务器机房里，无需向外界发送一个字节。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Excalidraw离线版部署方案（支持内网环境）