部署一個(gè)私有的在線繪圖服務(wù)
現(xiàn)在很多服務(wù)都已經(jīng)云端化了，瀏覽器早已不是只用來(lái)瀏覽信息的瀏覽器了。
在線繪圖
國(guó)內(nèi)最常用的就是 ProcessOn 了，功能很全，就是免費(fèi)額度有點(diǎn)少。
國(guó)外最知名的就是 Draw.io 了，基本上就是免費(fèi)的，常常集成在各種服務(wù)里。就是速度有點(diǎn)慢，不，是非常慢。
Draw.io 現(xiàn)在改名了，叫 diagrams.net。最關(guān)鍵的是，它還是開源的!
部署一個(gè) Draw.io
Draw.io 是基于mxGraph library[1]構(gòu)建的，后端用 Java 實(shí)現(xiàn)了簡(jiǎn)單的文件導(dǎo)出和處理功能，畫圖的功能都是通過 JavaScript 在瀏覽器的，所以是完全可以用靜態(tài)頁(yè)面的方式來(lái)托管一個(gè)不需要文件處理和鑒權(quán)的繪圖站點(diǎn)。
有興趣請(qǐng)移步至該項(xiàng)目：
- https://github.com/jgraph/drawio
要完整部署該項(xiàng)目需要用 ant 來(lái)編譯 war，并用 tomcat 托管。但是，我不想用 ant 去編譯也不想和 Tom 貓發(fā)生什么關(guān)系，所以我要對(duì)這個(gè)開源項(xiàng)目進(jìn)行閹割。
- 去除所有國(guó)外的在線服務(wù)，比如 Google Drive，OneDrive等等
- 避免跳轉(zhuǎn)到 Draw.io 官網(wǎng)
- 去除后端服務(wù)，只要能在瀏覽器繪圖并緩存，能保存為本地文件
來(lái)來(lái)來(lái)，folk 一下這個(gè)項(xiàng)目開干，新項(xiàng)目地址：
- https://github.com/tobyqin/drawio-local。
- # 第一步，干掉Java，只保留Web應(yīng)用
- mv -r src/main/webapp /temp/webapp
- rm -rf *
- mv -r /tmp/webapp .
- # 第二步，去掉在線服務(wù)
- code js/PreConfig.js
- # 配置 local='1'
- # 參考 https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported-
- # 第三步，修改錯(cuò)誤的資源引用，用Chrome的開發(fā)者工具
- # 第四步，加一些黑科技到 index.html 來(lái)hack外部跳轉(zhuǎn)，不展開說明
萬(wàn)事具備，用一行代碼在本地托管：
- python3 -m http.server 8000
OK 啦，干凈清爽的感覺就是那么好。
改一下 README.md 就推送了吧。好像我只花了幾分鐘，其實(shí)我調(diào)試了幾小時(shí)，開發(fā)為什么總估時(shí)間不準(zhǔn)呢?奇怪。
部署到 Docker
沒有容器化的服務(wù)是沒有靈魂的服務(wù)，那么我們就給它加點(diǎn)靈魂。加靈魂需要一個(gè) Dockerfile，這樣寫：
- FROM frolvlad/alpine-python3:latest
- RUN mkdir /app
- WORKDIR /app
- RUN pip3 install flask
- ADD . /app/
- EXPOSE 5000
- CMD python3 app.py
這個(gè)靈魂是有講究的，為什么這么說呢?
1.用的是 apline 的基礎(chǔ)鏡像，這個(gè)是開源界最常用的基礎(chǔ)鏡像，因?yàn)樗捌涞男?，一般只有?MB 或者幾十 MB。對(duì)應(yīng)的 apline 鏡像還有 node，java，go 版的，應(yīng)有盡有。
2.先安裝flask后copy應(yīng)用，因?yàn)閒lask安裝后這個(gè)layer就不變了，但是app每次打包都會(huì)不一樣。
為啥要加個(gè)flask啊?因?yàn)槲蚁朐谒L問后端報(bào)錯(cuò)時(shí)可以更友好一點(diǎn)，人性化和用戶體驗(yàn)，Understand?
- @app.route('/not-support', methods=['GET', 'POST'])
- def not_support():
- return "Sorry, this action is not supported."
好啦，打包鏡像走起。
- docker build -t tobyqin/drawio-local:latest .
讓這個(gè)靈魂跑起來(lái)。
- docker run -it --rm -p 5000:5000 tobyqin/drawio-local
訪問本地5000端口，一點(diǎn)毛病都沒有，注意 --rm在調(diào)試時(shí)很有用，它可以幫你自動(dòng)清理退出的容器。
讓我們來(lái)發(fā)布這個(gè)靈魂到全世界。
- docker login
- docker push tobyqin/drawio-local
咦?這個(gè)靈魂好像有點(diǎn)重啊，完全推不動(dòng)嘛。用Poratiner查看一下里面到底有什么東西。
鏡像總共才4M，應(yīng)用居然接近100M，要給靈魂減減肥了。在根目錄加個(gè) .dockerignore 文件，把不想打包的文件統(tǒng)統(tǒng)寫在里面。
- .git
- .DS_Store
- .vscode
- *.md
- ...
321再來(lái)一遍靈魂序曲，嗯，有內(nèi)味了。
拿來(lái)主義
我想你是不愿意再踩一遍我的坑了，反正這個(gè)東西做一遍就行了，拿去用吧。
1. 靜態(tài)托管
直接到https://github.com/tobyqin/drawio-local 下載zip解壓后丟到nginx或者iis即可，順手給項(xiàng)目加個(gè)星唄。
2. Docker部署
一句命令即可。
- docker run --name="drawio-local" --restart always -p 5000:5000 tobyqin/drawio-local
3. 薅我羊毛
這個(gè)服務(wù)我已經(jīng)部署到了我的主機(jī)，免費(fèi)用，隨便用，但不保證它的速度和生命延續(xù)。
- https://draw.pytips.cn
就這樣，Peace。
References
[1] mxGraph library: https://github.com/jgraph/mxgraph
