Cloud Wisdom Perspective Treasure のフロントエンド アーキテクチャに関すること

モバイル インターネットとクラウド コンピューティングが登場すると、ユーザーは企業のサービス担当者とやり取りする必要がなくなり、モバイル APP を通じて直接サービスを取得できるようになり、その結果、フロントローディングされたユーザー エクスペリエンスが実現しました。効果的なモバイルおよびクラウドの監視方法が不足しているため、従来の ITOM 製品では、ユーザー エクスペリエンス フロントエンドのビジネス指向のエンドツーエンド パフォーマンス管理プラットフォーム Pivot がユーザー エクスペリエンス全体を提供します。ビジネスの観点から、ユーザー エクスペリエンスに影響を与えるパフォーマンスの問題を正確に検出して特定するために、チェーン内のすべてのリンクでデータの収集と分析が実行されます。

現在、Zhuuzhubao のフロントエンド アプリケーションには以下が含まれており、関係図は次のとおりです

Zhuuzhubao はメイン Web サイトを通じてユーザーと直接対話し、ユーザーに Web サイト、モバイル アプリ、ホスト、サービスなどのアプリケーションのパフォーマンス データ。ユーザー認証、データ センター、およびドキュメント センターのアプリケーションはすべて、メイン サイトに直接的または間接的にサービスを提供します。この説明は、Pioro のメイン サイトのみを対象としています。以下で使用するフロントエンドは、メイン サイトのフロントエンド サービスを指します。

サービス レイアウト

PivotView のフロントエンドには次のサービスが含まれます。

DataSource はバックエンド データ システムです。通常の状況でのリクエスト プロセスは次のとおりです。ユーザーがリクエストを行うと、まずTengineにアクセスした後、ApacheがPHPを呼び出してRedisから情報を取得します。ホスト、サービス、アプリケーション、その他のデータは Elasticsearch から取得されます。

フロントエンド アプリケーション アーキテクチャ

Cloud Wisdom Perspective Treasure のフロントエンドは、開発言語として PHP を使用し、Seaslog のログ拡張機能、Cwop のユーザー管理拡張機能、Redis 拡張機能、yaf 拡張機能を使用します (

Seaslog: PHP ログ モジュール、オンラインおよびオフラインのログ状況の分析資料を開発者に提供します。

Curl: PHP Rest サービス基盤、サポートを提供します。 PHP がバックエンド API インターフェイスを呼び出すための

Yaf:Cwop のサーバーは、PHP の yaf フレームワークに依存する yaf フレームワーク用に開発されています

Cwop:Cwop の PHP クライアント

PHP は現在人気のある Laravel フレームワークを使用して開発されており、フロントエンドの実行プロセスは次のとおりです。

Laravel は、多言語、データベース、キャッシュ、電子メール、依存関係パッケージ管理などの機能を提供し、開発を大幅に改善します。パースペクティブ トレジャーの効率性 以下は、パースペクティブ トレジャーのフロントエンドの 2 つの重要な側面です: 機能:

1.UnitTest - Laravel は、Google プラグインと組み合わせて PHP の単体テスト機能を統合および強化し、開発者が次のことを実行できるようにします。エンドツーエンドのデバッグ作業を完了します。

2.Artisan コマンド ライン ツール - Linux の Crontab と組み合わせることで、単独で使用する場合、電子メール送信、SmartAgent プラグイン管理、ハートビート管理、アラーム対話などの機能を実行できます。スクリプトを実行して、データベースへの自動変更を完了できます。

PHP からフロントエンド ページ表示までのデータを処理します。 現在普及している

3.BootstrapCss フレームワークを使用してフロントエンドを作成します。終了ページは美しく順応性があります

4.Seajsは、Perspective Baoが使用するJSモジュールのロードフレームワークを選択します

5.Ziboが使用する描画ツールであるEchartsは、非常に優れた順応性と操作性を備えていますZibo のすべてのレイアウトの画像は、基本的に Echarts によって生成されます。

データ収集プロセス

パースペクティブ データ収集は 3 つのソースに分かれています:

1. ユーザーは SmartAgent をインストールし、プラグイン収集を行い、SendProxy 経由でデータを送信します。

2. ユーザーは、SmartAgent プラグインのインストール後に JS を挿入するか、JS および JS によって収集されたデータを手動で挿入します。

3. モバイル端末には、モバイル APP データを収集するための SDK が組み込まれています。

以下の図に示すように:

データ収集では、SmartAgent のスケジューラとして Sendproxy を使用します。すべての SmartAgent データは均一にスケジュールされ、Sendproxy 経由で送信されます。

その主な利点は次のとおりです。

各プラグインによるデータ送信の安定性を確保するための送信キュー

接続可能なホストを展開するためのプロキシとして使用できます。ローカルエリアネットワークを確保できる外部ネットワークへの接続。非ネットワーク環境でのデータ送信

エンドツーエンドの実装原則

エンドツーエンドは Pioro の重要な機能です。その実装原理は、リクエスト プロセスを通過するすべてのノードを記録するだけです。次に、コード スタックを通じてリクエストが通過したプロセスと、サービスによって収集されたデータを復元します。

上の図は、典型的な Nginx プロキシ、Apache サーバー、PHP 解析、および Mysql DB アーキテクチャであるリクエスト トポロジです。リクエストは、Nginx -> Apache -> PHP -> Mysql&Api を通過します。各ノード クリックして表示します:

リクエスト時の各サービスの実行ステータス

リクエストされたコード スタック、SQL 接続、例外情報、接続ステータス

実装原理は次のとおりです (各ノードのデフォルトでは SmartAgent がインストールされています):

Nginx にリクエストを送信すると、Nginx はリクエストに一意の ID フラグを追加し、Apache に転送して引き続き使用します。この id がリクエストで id フラグを受け取った場合、リクエストは PHP に渡されます。同様に、PHP、Mysql などもリクエストでこの id フラグを使用します。

PHP がデータを取得して処理を完了すると、リクエストが終了し、応答情報に同じ ID フラグを追加して Apache に返します。Apache は Nginx に戻ります。この ID を応答情報に含めると、Nginx はコンテンツを送信します。静的ページをブラウザーに送信する場合、そのページは ID と JS ファイルとともにクライアントに送信されます。クライアント JS はブラウザーのデータをキャプチャし、バックエンドのデータソースに送信します。加工用に。

Perspective Bao はこの ID で PHP アプリケーションのリクエストデータを取得すると、Nginx や Apache のリクエスト情報を確認することができ、Mysql や API のリクエスト情報も取得できます。 ID を通じてエンドユーザー情報も簡単に取得できます。エンドポイント API も CodeAgent を使用する場合、それはアプリケーションに変換され、以前の PHP と同様に後方へ拡張され続けます。それ以外の場合は、要求された API 情報のみが表示され、コードの詳細は取得されません。

上記のプロセス中、Nginx エージェント、Apache エージェント、および Mysql エージェントはデータを送信し続けるため、Nginx をクリックすると、リクエスト時間に基づいて Nginx のステータスを即座に取得でき、強力なエンドツー機能を提供します。 - ユーザーサポートのための分析を終了します。

以下は、フロントエンドとバックエンドのデータ対話の完全な図を示しています。Mysql 上の DataSource の操作は、パースペクティブ アプリケーションのインターフェイスを通じて実装されます