翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
サービス検出
フロントエンド検出パターンは、マイクロフロントエンドを開発、テスト、配信する際の開発エクスペリエンスを向上させます。このパターンでは、マイクロフロントエンドのエントリポイントを記述する共有可能な設定を使用します。共有可能な設定には、Canary リリースを使用して各環境で安全なデプロイに使用される追加のメタデータも含まれています。
最新のフロントエンド開発では、開発中のモジュール性をサポートするために、さまざまなツールとライブラリを使用する必要があります。従来、このプロセスは、初期ロード (アプリがブラウザで開いたとき) や使用状況 (顧客がボタンの選択や情報の挿入などのアクションを実行するとき) など、ランタイム中にネットワーク呼び出しを最小限に抑えることを目的として、CDN でホストできる個々のファイルにコードをバンドルすることで構成されていました。
バンドルの分割
マイクロフロントエンドアーキテクチャは、大量の機能を個別にバンドルすることで生成された非常に大きなバンドルによって発生するパフォーマンスの問題を解決します。たとえば、非常に大規模な e コマースウェブサイトを 6 MB の JavaScript ファイルにバンドルできます。圧縮にもかかわらず、そのファイルのサイズは、アプリをロードし、エッジ最適化 CDN からファイルをダウンロードするときに、ユーザーのエクスペリエンスに悪影響を及ぼす可能性があります。
アプリケーションをホームページ、製品の詳細、カートのマイクロフロントエンドに分割する場合、バンドルメカニズムを使用して 3 つの個別の 2 MB バンドルを作成できます。この変更により、ユーザーがホームページを使用する場合、最初のロードのパフォーマンスが 300% 向上する可能性があります。製品またはカートのマイクロフロントエンドバンドルは、ユーザーがアイテムの製品ページにアクセスして購入を決定した場合にのみ非同期的にロードされます。
このアプローチに基づいて多くのフレームワークとライブラリが利用可能であり、顧客とデベロッパーの両方に利点があります。コード内の依存関係の分離につながる可能性のあるビジネスの境界を特定するには、さまざまなビジネス機能を複数のチームにマッピングできます。分散所有権は、独立性と俊敏性をもたらします。
ビルドパッケージを分割する場合、設定を使用してマイクロフロントエンドをマッピングし、最初のロードとロード後のナビゲーションのオーケストレーションを駆動できます。その後、ビルド時ではなくランタイム時に設定を使用できます。たとえば、クライアント側のフロントエンドコードまたはサーバー側のバックエンドコードは、API への初期ネットワーク呼び出しを実行して、マイクロフロントエンドのリストを動的に取得できます。また、構成と統合に必要なメタデータも取得します。フェイルオーバー戦略とキャッシュを設定して、信頼性とパフォーマンスを実現できます。マイクロフロントエンドをマッピングすると、シェルアプリケーションによってオーケストレーションされた以前にデプロイされたマイクロフロントエンドによって、マイクロフロントエンドの個別のデプロイを検出できるようになります。
Canary リリース
Canary リリースは、マイクロサービスをデプロイするための確立された一般的なパターンです。Canary は、リリースのターゲットユーザーを複数のグループにバケット化し、即時の置き換え (ブルー/グリーンデプロイとも呼ばれます) ではなく、徐々に変更をリリースします。Canary リリース戦略の例は、ターゲットユーザーの 10% に新しい変更をロールアウトし、1 分ごとに 10% を追加し、合計時間が 10 分で 100% に達することです。
Canary リリースの目的は、変更に関するフィードバックを早期に取得し、システムをモニタリングして問題の影響を減らすことです。自動化が実施されると、デプロイを停止したり、ロールバックを開始したりできる内部システムによってビジネスメトリクスまたはシステムメトリクスをモニタリングできます。
たとえば、変更により、リリースの最初の数分間に収益が失われたり、パフォーマンスが低下したりするバグが発生する可能性があります。自動モニタリングはアラームを開始できます。サービス検出パターンを使用すると、このアラームはデプロイを停止してすぐにロールバックでき、100% ではなく 20% のユーザーのみに影響します。ビジネスは、問題の範囲を縮小することでメリットを得られます。
ストレージとして DynamoDB を使用して REST 管理 API を実装するアーキテクチャの例については、GitHub の「AWS でのフロントエンドサービス検出
