DrawIO 基于MinIO以及OSS私有云方案

基于drawio的私有云實現以及私有云端存儲方案

項目地址：https://github.com/mathcoder23/drawio-minio-oss

功能特性

• 支持OSS部署(本來就是支持的，限于部署服務器的帶寬問題，將靜態頁面轉到OSS部署加快頁面訪問速度)
• 新增基于MinIO的第三方存儲方案
• 在私有化后，新增用戶登錄、并且管理創建的流程圖文件(方便云端管理自己創建的流程圖文件)
• 支持通過接口創建、管理、刪除登錄用戶信息

效果示例

登錄界面

Drawio-minio-oss版部署指南

需要的組件服務說明

MinIO服務(tcp服務、內網通訊)

Drawio私有云后端服務(http服務，公網)

Drawio的私有云后臺前端（html靜態，公網）

Drawio的核心服務（html靜態，公網）

docker-compose一站式全部部署(非oss方案)

此方案非oss方案，即一個主機部署即可

1.部署前提準備

安裝docker環境

安裝docker-compose環境(版本不要太低)

一臺主機(推薦Linux系統)

2.拉取源碼

部署依賴于源碼部署，所以需要將整個源碼拉下來

git clone https://github.com/mathcoder23/drawio-minio-oss cd drawio-minio-oss

3.運行docker-compose

cd docker/compose/ docker-compose -f docker-compose-drawio.yml up

4.登錄MinIO后臺配置賬號

在docker-compose中我們給drawio-admin配置的MinIO連接參數如下

minio1:image: minio/minio:RELEASE.2021-07-08T01-15-01Zhostname: minio1volumes:- minio-data1:/data1expose:- "9000"- "9001"environment:MINIO_ROOT_USER: minioMINIO_ROOT_PASSWORD: minio123command: server /data1 --console-address ":9001"healthcheck:test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]interval: 30stimeout: 20sretries: 3drawio-admin:build:context: ../../drawio-admin-nodejsdockerfile: Dockerfileimage: drawio-admin:1.20environment:DRAWIO_URL: ''MINIO_ACCESS_KEY: 'test123123'MINIO_SECRET_KEY: 'test123123'MINIO_BUCKET: 'drawio'depends_on:- minio1

根據我們配置的MinIO后臺賬號minio和minio123,登錄http://localhost:9001

1.創建用戶

ADMIN->Users點擊Create User,這里我們創建的用戶賬號密碼為test123123和test123123,因為yml中已經配置了，如果想自定義可以自行更改

2.為用戶分配讀寫權限

3. 創建Bucket

我們在yml中配置的Bucket名稱為drawio,因此需要創建一個這個

5.重啟docker-compose

這一步的作用是重新連接到minio服務
Ctrl+C關閉后重新執行docker-compose命令

6.登錄Drawio私有云后臺

當服務重啟后，進入http://localhost:8080,使用默認的賬號密碼admin和admin登錄

7.創建新的流程圖

這里說明一下命名規范，/將會對數據進行分組，雖然此分組還沒顯示出來但是之后會，還有一點 /a和/a/b 其中a不能同時存在，不能即是文件又是文件夾

8.編輯流程圖

9.完成

到此我們部署后的基本流程全部都跑通了。
但是限于服務器帶寬，我們訪問頁面很慢，所以我們將靜態也遷移至OSS上將會快很多，下面參考增加OSS的部署方案

10.進階版-登錄用戶管理接口

這個目前只支持通過api的方式管理，具體的接口用法參考postman導出的json接口工程。
路徑：drawio-admin-nodejs/Drawio私有云接口.postman_collection.json

docker-compose-OSS方案部部署

1.部署前提準備

此部署方案與非OSS方案非常像，因此，你需要先跑通非OSS方案

準備OSS云或其他靜態托管服務商

2.文檔說明

OSS版文檔基于非OSS上只對有更改的地方進行說明，不會再重復

3.托管靜態Html到OSS

1.由于html的靜態化，我們需要先修改靜態代碼指向的Drawio私有云后端服務地址

編輯html/admin/config.js

將window.baseUrl = '/api'更改為后端地址，http://ip:8080/api這里的ip是公網ip，注意后面不要加斜杠

這里的http://ip:8080/api也可以改為//ip:8080/api，跟隨前端協議變化而變化，但是需要自行配置https

2.上傳html文件夾內所有文件到OSS

注意不要上傳html本身，當然如果你不介意多一個/html路徑也可以

OSS的靜態托管教程以及域名綁定等操作，這里不細談，具體參見對應的文檔即可

這里假設配置的OSS訪問地址為http://xxx.com html中的admin、drawio文件夾上傳在此根目錄,這個地址下面配置要用

后臺管理入口地址：http://xxx.com/admin/drawio.html

Drawio入口地址：http://xxx.com/drawio/index.html 此地址對用戶透明，僅部署配置使用

為了保證部署的可用性，請分別訪問上述地址看是否正常。

3.修改yml中DRAWIO_URL值

DRAWIO_URL的配置是可以直接訪問的drawio頁面，http://xxx.com/drawio/index.html，之所以后臺要配置這個地址，是由于后臺是采用代理技術來實現
minio的持久化
yml部分代碼

# Drawio 管理后臺服務 drawio-admin: build:context: ../../drawio-admin-nodejsdockerfile: Dockerfile image: drawio-admin:1.21 environment:DRAWIO_URL: 'http://xxx.com/drawio/index.html' ###### 將這里更改為上述地址，其余不變MINIO_ACCESS_KEY: 'test123123'MINIO_SECRET_KEY: 'test123123'MINIO_BUCKET: 'drawio' depends_on:- minio1

4.重啟服務

5.進入后臺體驗速度的改變

后臺管理入口地址：http://xxx.com/admin/drawio.html

參考源碼

https://github.com/jgraph/drawio 感謝核心貢獻

https://github.com/othorizon/drawio-webdav 提供MinIO存儲支持

總結

以上是生活随笔為你收集整理的DrawIO 基于MinIO以及OSS私有云方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。