現在では多くのサービスがクラウドに移行しており、ブラウザはもはや情報を閲覧するためだけのものではなくなりました。

[[324053]]

オンライン描画

中国で最もよく使われているアプリは ProcessOn です。機能が充実していますが、無料容量は少し少ないです。

国際的に最も有名なのはDraw.ioです。これは基本的に無料で、様々なサービスに統合されていることが多いです。ただ、少し遅い、いや、非常に遅いです。

Draw.io は diagrams.net に名前が変更されました。最も重要なのは、オープンソースのままであることです！

Draw.ioをデプロイする

Draw.ioはmxGraphライブラリ[1]をベースに構築されています。バックエンドはJavaを使用して、シンプルなファイルのエクスポートと処理機能を実装しています。描画機能はすべてJavaScriptを介してブラウザ内で実装されています。そのため、ファイル処理や認証を必要としない静的ページの形で描画サイトをホストすることが可能です。

ご興味のある方は、プロジェクトページをご覧ください。

• https://github.com/jgraph/drawio

このプロジェクトを完全にデプロイするには、Antを使ってWARファイルをコンパイルし、Tomcatでホストする必要があります。しかし、コンパイルにAntを使うことも、Tomcatと一切関わりたくないので、このオープンソースプロジェクトをストリップしたいと思っています。

• Google Drive、OneDrive などの外部のオンライン サービスをすべて削除します。
• Draw.ioの公式サイトにリダイレクトされないようにする
• バックエンド サービスを削除します。ブラウザーが画像を描画してキャッシュし、ローカル ファイルとして保存できる限り、問題ありません。

さあ、このプロジェクトをみんなで立ち上げて始めましょう！新しいプロジェクトアドレス：

• https://github.com/tobyqin/drawio-local.

 # 最初のステップ: Java を削除し、Web アプリケーションのみを保持します。
 mv -r src/main/webapp/ temp /webapp
 rm -rf *
 mv -r /tmp/webapp 。 
 
 # ステップ2: オンラインサービスを削除する
コード js/PreConfig.js
 #ローカル= '1'を設定します 
 # 参考 https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported- 
 
 # 3 番目のステップでは、Chrome の開発者ツールを使用して、誤ったリソース参照を修正します。
 # ステップ4: 外部リダイレクトをハッキングするために、 index.htmlにブラックハットテクニックを追加します。(詳細は省略)

準備はすべて完了です。1 行のコードでローカルにホストします。

 python3 -m http.server 8000

はい、清潔になってリフレッシュできて本当に気持ちいいです。

README.mdを修正するだけでプッシュされます。数分しかかかっていないように見えますが、実際にはデバッグに数時間かかりました。なぜ開発者の所要時間の見積もりはいつもこんなに不正確なのでしょうか？不思議です。

Dockerにデプロイする

コンテナ化されていないサービスは魂のないサービスです。そこで、魂を込めるサービスを作りましょう。魂を込めるには、次のようなDockerfileが必要です。

 frolvlad/alpine-python3:latestから
 
 mkdir /app を実行
ワークディレクトリ /app 
 
 pip3 install flask を実行します。
追加. /app/ 
 
エクスポーズ5000
コマンド python3 app.py

この魂には何か特別なものがある。なぜそう言うのだろう？

1. アプリケーションベースイメージを使用します。これはオープンソースコミュニティで最も一般的に使用されているベースイメージです。これは、サイズが非常に小さく、通常数MBから数十MBしかないためです。Node.js、Java、Goなど、対応するアプリケーションイメージも存在します。

2. 最初に Flask をインストールし、次にアプリケーションをコピーします。これは、Flask のインストール後、レイヤーは変更されませんが、アプリケーションはパッケージ化されるたびに異なるためです。

なぜFlaskを追加するのか？バックエンドエラーが発生した際に、よりユーザーフレンドリーで直感的に操作できるようにしたいからです。お分かりですか？

 @app.route( '/not-support' , メソッド=[ 'GET' , 'POST' ])
 def not_support():
戻る  「申し訳ありませんが、この操作はサポートされていません。」  

さて、画像のパッケージ化を始めましょう。

 docker build -t tobyqin/drawio- local :latest 。

この魂を走らせてください。

 docker run -it --rm -p 5000:5000 tobyqin/drawio-local  

ローカルポート5000へのアクセスは問題なく動作します。`--rm`はデバッグ時に非常に便利です。終了したコンテナを自動的にクリーンアップするのに役立ちます。

この精神を全世界に広めていきましょう。

 dockerログイン
docker push tobyqin/drawio-ローカル 

ん？この魂、ちょっと重そうだな。全然動かせない。ポラティナーで中身を確認してみるか。

イメージ自体はわずか4MBですが、アプリケーションは100MB近くあります。プロセスを効率化する必要があります。ルートディレクトリに`.dockerignore`ファイルを追加し、パッケージ化したくないファイルをすべてリストアップしてください。

 .git
 .DS_ストア
.vscode
 *.md
 ...

321、もう一度ソウルオーバーチュアをやってみましょう、うーん、そんな感じ。

借入

私の失敗を繰り返したくないでしょう。とにかく、これは一度作れば済むことなので、ご自由にお使いください。

1. 静的ホスティング

https://github.com/tobyqin/drawio-local から zip ファイルをダウンロードして解凍し、nginx または iis にデプロイするだけです。ついでに、プロジェクトにスターを付けてください！

2. Dockerのデプロイメント

1 つのコマンドで十分です。

 docker run --name="drawio-local" --restart always -p 5000:5000 tobyqin/drawio-local  

3. 私を利用する。

このサービスを私のサーバーに導入しました。無料でご利用いただけますので、ご自由にお使いください。ただし、速度や寿命については保証できません。

• https://draw.pytips.cn

そして、平和。

参考文献

[1] mxGraphライブラリ: https://github.com/jgraph/mxgraph