翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# 、Angular AWS Amplify、および Module Federation を使用してマイクロフロントエンド用のポータルを作成する
<a name="create-amplify-micro-frontend-portal"></a>

*Amazon Web Services、Milena Godau および Pedro Garcia*

## 概要
<a name="create-amplify-micro-frontend-portal-summary"></a>

マイクロフロントエンドアーキテクチャを使用すると、複数のチームがフロントエンドアプリケーションのさまざまな部分を独立して作業できます。各チームは、アプリケーションの他の部分に干渉することなく、フロントエンドの一部分を開発、構築、展開できます。エンドユーザーの観点から見ると、単一のまとまりのあるアプリケーションのように見えますが、実際は、他のチームによって公開された複数の独立したアプリケーションと相互にやり取りしています。

このドキュメントでは、[AWS Amplify](https://docs.amplify.aws/gen1/angular/)、[Angular](https://angular.dev/overview) フロントエンドフレームワーク、および [Module Federation](https://webpack.js.org/concepts/module-federation/) を使用してマイクロフロントエンドアーキテクチャを作成する方法について説明します。このパターンでは、マイクロフロントエンドはシェル (または*親*) アプリケーションによってクライアント側で結合されます。シェルアプリケーションは、マイクロフロントエンドを取得、表示、統合するコンテナとして機能します。シェルアプリケーションは、さまざまなマイクロフロントエンドをロードするグローバルルーティングを担当します。[@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation) プラグインは、Module Federation を Angular と統合します。を使用して、シェルアプリケーションとマイクロフロントエンドをデプロイします AWS Amplify。エンドユーザーはウェブベースのポータルからアプリケーションにアクセスします。

ポータルは垂直に分割されます。つまり、マイクロフロントエンドはビュー全体またはビューのグループであり、同じビューの一部ではありません。したがって、シェルアプリケーションは一度に 1 つのマイクロフロントエンドのみをロードします。

マイクロフロントエンドはリモートモジュールとして実装されます。シェルアプリケーションはこれらのリモートモジュールをゆっくりとロードします。これにより、マイクロフロントエンドの初期化は、それが必要となるまで保留されます。このアプローチでは、必要なモジュールのみをロードすることで、アプリケーションのパフォーマンスを最適化します。これにより、初期ロード時間が短縮され、全体的なユーザー体験が向上します。さらに、webpack 設定ファイル (**webpack.config.js**) を介してモジュール間で共通の依存関係を共有します。この手法は、コードの再利用を促進し、重複を減らし、バンドルプロセスを合理化します。

## 前提条件と制限事項
<a name="create-amplify-micro-frontend-portal-prereqs"></a>

**前提条件**
+ アクティブな AWS アカウント
+ Node.js と npm が[インストール済み](https://nodejs.org/en/download/)
+ Amplify CLI が[インストール済み](https://docs.amplify.aws/gen1/angular/tools/cli/)
+ Angular CLI が[インストール済み](https://angular.io/cli)
+ を使用するアクセス[許可](https://docs.aws.amazon.com/service-authorization/latest/reference/list_awsamplify.html) AWS Amplify
+ 「アンギュラーに精通していること」

**製品バージョン**
+ Angular CLI バージョン 13.1.2 以降
+ @angular-architects/module-federation バージョン 14.0.1 以降
+ webpack バージョン 5.4.0 以降
+ AWS Amplify 生成 1

**制限事項**

マイクロフロントエンドアーキテクチャは、拡張性と柔軟性のあるウェブアプリケーションを構築するための強力なアプローチです。しかしながら、このアプローチを採用する前に、以下の潜在的な課題を理解することが重要です。
+ **統合** – 主な課題の 1 つは、モノリシックフロントエンドと比較して複雑さが増す可能性があることです。複数のマイクロフロントエンドのオーケストレーション、マイクロフロントエンド間の通信の処理、および共有依存関係の管理は、より複雑になることがあります。さらに、マイクロフロントエンド間の通信に関連するパフォーマンスオーバーヘッドが発生する場合もあります。この通信では、遅延時間が増加し、パフォーマンスが低下する可能性があります。そのため、効率的なメッセージングメカニズムとデータ共有戦略による対処が必要です。
+ **コードの重複** – 各マイクロフロントエンドは個別に開発されるため、共通機能または共有ライブラリのコードが重複するリスクがあります。これにより、アプリケーション全体のサイズ増加やメンテナンスの課題が発生する可能性があります。
+ **調整と管理** – 複数のマイクロフロントエンドで開発とデプロイのプロセスを調整することは容易ではありません。分散アーキテクチャでは、一貫したバージョニングの確保、依存関係の管理、コンポーネント間の互換性の維持がさらに重要となります。スムーズな共同作業と引き渡しには、明確なガバナンス、ガイドライン、自動化されたテストとデプロイの一連のプロセスを確立することが不可欠です。
+ **テスト** – マイクロフロントエンドアーキテクチャのテストは、モノリシックフロントエンドのテストよりもさらに複雑になる場合があります。コンポーネント間の統合テストとプロセス全体のテストを実行し、複数のマイクロフロントエンドにわたって一貫したユーザー体験を検証するには、追加の労力と特殊なテスト戦略が必要です。

マイクロフロントエンドアプローチにコミットする前に、[マイクロフロントエンドの理解と実装 AWS](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html)を確認することをお勧めします。

## アーキテクチャ
<a name="create-amplify-micro-frontend-portal-architecture"></a>

マイクロフロントエンドアーキテクチャでは、各チームが個別に機能を開発およびデプロイします。次の画像は、複数の DevOps チームがどのように連携するかを示しています。ポータルチームがシェルアプリケーションを開発します。シェルアプリケーションはコンテナとして機能します。それは、他の DevOps チームによって公開されたマイクロフロントエンドアプリケーションを取得、表示、統合します。を使用して AWS Amplify 、シェルアプリケーションとマイクロフロントエンドアプリケーションを公開します。

![\[ユーザーがウェブポータルを介してアクセスするシェルアプリケーションに、複数のマイクロフロントエンドを公開します。\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/images/pattern-img/ddf82a69-bf1b-4ad1-8e60-3dd375699936/images/cf045bf1-11ea-46d9-93cb-3c603122450d.png)


この図表は、次のワークフローを示しています:

1. ポータルチームがシェルアプリケーションの開発および維持を行います。シェルアプリケーションは、ポータル全体を構成するために、マイクロフロントエンドの統合と可視化の調整を行います。

1. チーム A と B は、ポータルに統合されている 1 つ以上のマイクロフロントエンドまたは機能の開発および維持を行います。各チームは、それぞれのマイクロフロントエンドで個別に作業することができます。

1. エンドユーザーは Amazon Cognito を使用して認証されます。

1. エンドユーザーがポータルにアクセスすると、シェルアプリケーションがロードされます。ユーザーが移動すると、シェルアプリケーションは経路制御を処理し、要求されたマイクロフロントエンドを取得し、そのバンドルをロードします。

## ツール
<a name="create-amplify-micro-frontend-portal-tools"></a>

**AWS のサービス**
+ [AWS Amplify](https://docs.amplify.aws/angular/start/) は、フロントエンドのウェブデベロッパーやモバイルデベロッパーがフルスタックアプリケーションをすばやく構築するのに役立つ、専用のツールと機能のセットです AWS。このパターンでは、Amplify CLI を使用して Amplify マイクロフロントエンドアプリケーションを展開します。
+ [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) は、コマンドラインシェルのコマンド AWS のサービス を使用して を操作するのに役立つオープンソースツールです。

**その他のツール**
+ [@angular-architects/module-federation](https://github.com/angular-architects/module-federation-plugin) は、Angular を Module Federation と統合するプラグインです。
+ [Angular](https://angular.dev/overview) は、モダンで拡張性があり、テスト可能な単一ページアプリケーションを構築するためのオープンソースのウェブアプリケーションフレームワークです。これは、コードの再利用とメンテナンスを促進するモジュール式のコンポーネントベースアーキテクチャに従っています。
+ [Node.js](https://nodejs.org/en/docs/) は、拡張性のあるネットワークアプリケーションを構築するために設計された、イベント駆動型の JavaScript ランタイム環境です。
+ [npm](https://docs.npmjs.com/about-npm) は Node.js 環境で動作するソフトウェアレジストリで、パッケージの共有や借用、プライベートパッケージのデプロイ管理に使用されます。
+ [Webpack Module Fedration](https://webpack.js.org/concepts/module-federation/) は、マイクロフロントエンドやプラグインなど、個別にコンパイルおよび展開されたコードをアプリケーションにロードするのに役立ちます。

**コードリポジトリ**

このパターンでのコードは、「[Micro-frontend portal using Angular and Module Federation](https://github.com/aws-samples/angular-module-federation-mfe)」GitHub リポジトリにあります。このリポジトリには、次の 2 つのフォルダがあります。
+ `shell-app` には、シェルアプリケーションのコードがあります。
+ `feature1-app` には、サンプルのマイクロフロントエンドがあります。シェルアプリケーションはこのマイクロフロントエンドを取得し、ポータルアプリケーション内の 1 ページとして表示します。

## ベストプラクティス
<a name="create-amplify-micro-frontend-portal-best-practices"></a>

マイクロフロントエンドアーキテクチャには多くの利点がありますが、一方で複雑さも生じます。以下に、スムーズな開発、高品質のコード、優れたユーザー体験を実現するための最良の手法を紹介します。
+ **計画とコミュニケーション** – 共同作業を合理化するには、事前計画、設計、明確なコミュニケーションチャネルに時間と労力を投資します。
+ **設計の一貫性** – 設計システム、スタイルガイド、およびコンポーネントライブラリを使用して、マイクロフロントエンド全体で一貫したビジュアルスタイルを適用します。これにより、一貫したユーザー体験の提供ができて、開発が加速されます。
+ **依存関係管理** – マイクロフロントエンドは独立して進化するため、標準化された契約とバージョニング戦略を採用して、依存関係を効果的に管理し、互換性の問題を防止します。
+ **マイクロフロントエンドアーキテクチャ** – 独立した開発とデプロイを可能にするには、各マイクロフロントエンドがカプセル化された機能に対する明確に定義された責任を担う必要があります。
+ **統合と通信** – スムーズな統合を促進し、衝突を最小限に抑えるには、明確な契約と、API、イベント、共有データモデルなどのマイクロフロントエンド間の通信プロトコルを定義します。
+ **テストと品質保証** – マイクロフロントエンドのテストの自動化と継続的な統合のための一連のプロセスを実践します。これにより、全体的な品質が向上し、手動テストの労力が削減され、マイクロフロントエンド間のやり取りに関する機能が検証されます。
+ **パフォーマンスの最適化** –** **パフォーマンスメトリックを継続的に監視し、マイクロフロントエンド間の依存関係を追跡します。これにより、ボトルネックを特定し、最適なアプリケーションパフォーマンスを維持することができます。これを行うには、パフォーマンス監視と依存関係分析ツールを使用します。
+ **開発者エクスペリエンス** – 明確なドキュメント、ツール、事例を提供し、開発者エクスペリエンスに焦点を当てます。これにより、開発を合理化し、新しいチームメンバーを受け入れることができます。

## エピック
<a name="create-amplify-micro-frontend-portal-epics"></a>

### シェルアプリケーションの作成
<a name="create-the-shell-application"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| シェルアプリケーションを作成します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| プラグインをインストールします。 | Angular CLI で、[@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation) プラグインをインストールするために、次のコマンドを入力します。<pre>ng add @angular-architects/module-federation --project shell --port 4200</pre> | アプリ開発者 | 
| マイクロフロントエンドの URL を環境変数として追加します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| 経路制御を定義します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| `mfe1` モジュールを宣言します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| マイクロフロントエンドのプリロードの準備をします。 | マイクロフロントエンドをプリロードすると、Webpack は共有ライブラリおよびパッケージと適切に協議できるようになります。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| HTML コンテンツを調整します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 

### マイクロフロントエンドアプリケーションの作成
<a name="create-the-micro-frontend-application"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| マイクロフロントエンドを作成します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| プラグインをインストールします。 | @angular-architects/module-federation プラグインをインストールするには、次のコマンドを入力します。<pre>ng add @angular-architects/module-federation --project mfe1 --port 5000</pre> | アプリ開発者 | 
| モジュールとコンポーネントを作成します。 | 次のコマンドを入力してモジュールとコンポーネントを作成し、リモートエントリモジュールとしてエクスポートします。<pre>ng g module mfe1 --routing<br />ng g c mfe1</pre> | アプリ開発者 | 
| デフォルトのルーティングパスを設定します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| `mfe1` ルートを追加します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| **webpack.config.js** ファイルを編集します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| HTML コンテンツを調整します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 

### 手元でのアプリケーションの実行
<a name="run-the-applications-locally"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| `mfe1` アプリケーションを実行します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| シェルアプリケーションを実行します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 

### マイクロフロントエンドロードエラーを処理するようにシェルアプリケーションをリファクタリングする
<a name="refactor-the-shell-application-to-handle-a-micro-frontend-loading-error"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| モジュールとコンポーネントを作成します。 | シェルアプリケーションのルートフォルダで次のコマンドを入力して、エラーページ用のモジュールとコンポーネントを作成します。<pre>ng g module error-page --routing<br />ng g c error-page</pre> | アプリ開発者 | 
| HTML コンテンツを調整します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| デフォルトのルーティングパスを設定します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| マイクロフロントエンドをロードする関数を作成します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 
| エラー処理をテストします。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 

### を使用してアプリケーションをデプロイする AWS Amplify
<a name="deploy-the-applications-by-using-amplifylong"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| マイクロフロントエンドをデプロイします。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者、AWS DevOps | 
| シェルアプリケーションを展開します | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者、アプリオーナー | 
| CORS を有効にします。 | シェルアプリケーションとマイクロフロントエンドアプリケーションは異なるドメインで個別に実行環境が提供されるため、マイクロフロントエンドでクロスオリジンリソース共有 (CORS) を有効にする必要があります。これにより、シェルアプリケーションは別のオリジンからコンテンツをロードできます。CORS を有効にするには、カスタムヘッダーを追加します。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者、AWS DevOps | 
| シェルアプリケーションで書き換えルールを作成します。 | Angular シェルアプリケーションは、HTML5 ルーティングを使用するように設定されています。ユーザーが強制再読み込みを実行すると、Amplify は現在の URL からページをロードしようとします。これにより、403 エラーが生成されます。これを回避するには、Amplify コンソールに書き換えルールを追加します。書き換えルールを作成するには、次の手順に従います。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者、AWS DevOps | 
| ウェブポータルをテストします。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | アプリ開発者 | 

### リソースをクリーンアップする
<a name="clean-up-resources"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| アプリケーションを削除します。 | シェルアプリケーションとマイクロフロントエンドアプリケーションが不要になった場合は、削除してください。削除することで、使用していないリソースが課金されなくなります。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | AWS 全般 | 

## トラブルシューティング
<a name="create-amplify-micro-frontend-portal-troubleshooting"></a>


| 問題 | ソリューション | 
| --- | --- | 
| `amplify init` コマンドの実行時にプロファイルを AWS 使用できません |  AWS プロファイルを設定していない場合でも、 `amplify init` コマンドを続行できます。ただし、認証方法の入力を求められたら、`AWS access keys` オプションを選択する必要があります。 AWS アクセスキーとシークレットキーを使用可能にします。または、 AWS CLI用の名前付きプロファイルを設定することもできます。手順については、 AWS CLI ドキュメントの[「設定と認証情報ファイルの設定](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html)」を参照してください。 | 
| リモートエントリのローディングエラー | シェルアプリケーションの **main.ts** ファイルでリモートエントリをロードするときにエラーが発生した場合は、`environment.mfe1URL` 変数が正しく設定されていることを確認してください。この変数の値は、マイクロフロントエンドの URL である必要があります。 | 
| マイクロフロントエンドにアクセスするときの 404 エラー | `http://localhost:4200/mfe1` 等でのローカルマイクロフロントエンドにアクセスしようとしたときに 404 エラーが発生した場合は、以下を確認してください。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 

## 追加情報
<a name="create-amplify-micro-frontend-portal-additional"></a>

**AWS ドキュメント**
+ [でのマイクロフロントエンドの理解と実装 AWS](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html) (AWS 規範ガイダンス)
+ 「[Amplify CLI](https://docs.amplify.aws/gen1/angular/tools/cli/)」 (「Amplify ドキュメント」)
+ 「[Amplify ホスティング](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)」 (「Amplify ドキュメント」)

**その他のリファレンス**
+ 「[Module Federation](https://webpack.js.org/concepts/module-federation/)」
+ [Node.js](https://nodejs.org/en/)
+ [角度](https://angular.io/)
+ 「[@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation)」