翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 # 、Angular AWS Amplify、および Module Federation を使用してマイクロフロントエンド用のポータルを作成する *Amazon Web Services、Milena Godau および Pedro Garcia* ## 概要 マイクロフロントエンドアーキテクチャを使用すると、複数のチームがフロントエンドアプリケーションのさまざまな部分を独立して作業できます。各チームは、アプリケーションの他の部分に干渉することなく、フロントエンドの一部分を開発、構築、展開できます。エンドユーザーの観点から見ると、単一のまとまりのあるアプリケーションのように見えますが、実際は、他のチームによって公開された複数の独立したアプリケーションと相互にやり取りしています。 このドキュメントでは、[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**) を介してモジュール間で共通の依存関係を共有します。この手法は、コードの再利用を促進し、重複を減らし、バンドルプロセスを合理化します。 ## 前提条件と制限事項 **前提条件** + アクティブな 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)を確認することをお勧めします。 ## アーキテクチャ マイクロフロントエンドアーキテクチャでは、各チームが個別に機能を開発およびデプロイします。次の画像は、複数の 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. エンドユーザーがポータルにアクセスすると、シェルアプリケーションがロードされます。ユーザーが移動すると、シェルアプリケーションは経路制御を処理し、要求されたマイクロフロントエンドを取得し、そのバンドルをロードします。 ## ツール **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 ページとして表示します。 ## ベストプラクティス マイクロフロントエンドアーキテクチャには多くの利点がありますが、一方で複雑さも生じます。以下に、スムーズな開発、高品質のコード、優れたユーザー体験を実現するための最良の手法を紹介します。 + **計画とコミュニケーション** – 共同作業を合理化するには、事前計画、設計、明確なコミュニケーションチャネルに時間と労力を投資します。 + **設計の一貫性** – 設計システム、スタイルガイド、およびコンポーネントライブラリを使用して、マイクロフロントエンド全体で一貫したビジュアルスタイルを適用します。これにより、一貫したユーザー体験の提供ができて、開発が加速されます。 + **依存関係管理** – マイクロフロントエンドは独立して進化するため、標準化された契約とバージョニング戦略を採用して、依存関係を効果的に管理し、互換性の問題を防止します。 + **マイクロフロントエンドアーキテクチャ** – 独立した開発とデプロイを可能にするには、各マイクロフロントエンドがカプセル化された機能に対する明確に定義された責任を担う必要があります。 + **統合と通信** – スムーズな統合を促進し、衝突を最小限に抑えるには、明確な契約と、API、イベント、共有データモデルなどのマイクロフロントエンド間の通信プロトコルを定義します。 + **テストと品質保証** – マイクロフロントエンドのテストの自動化と継続的な統合のための一連のプロセスを実践します。これにより、全体的な品質が向上し、手動テストの労力が削減され、マイクロフロントエンド間のやり取りに関する機能が検証されます。 + **パフォーマンスの最適化** –** **パフォーマンスメトリックを継続的に監視し、マイクロフロントエンド間の依存関係を追跡します。これにより、ボトルネックを特定し、最適なアプリケーションパフォーマンスを維持することができます。これを行うには、パフォーマンス監視と依存関係分析ツールを使用します。 + **開発者エクスペリエンス** – 明確なドキュメント、ツール、事例を提供し、開発者エクスペリエンスに焦点を当てます。これにより、開発を合理化し、新しいチームメンバーを受け入れることができます。 ## エピック ### シェルアプリケーションの作成 | タスク | 説明 | 必要なスキル | | --- | --- | --- | | シェルアプリケーションを作成します。 | 1. Angular CLI で次のコマンドを入力します。
ng new shell --routing

2. 次のコマンドを入力して、プロジェクトフォルダに移動します。
cd shell
シェルおよびマイクロフロントエンドアプリケーションのフォルダとプロジェクト構成は完全に独立している可能性があります。これらは独立した Angular アプリケーションとして扱うことができます。 | アプリ開発者 | | プラグインをインストールします。 | Angular CLI で、[@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation) プラグインをインストールするために、次のコマンドを入力します。
ng add @angular-architects/module-federation --project shell --port 4200
| アプリ開発者 | | マイクロフロントエンドの URL を環境変数として追加します。 | 1. **environment.ts** ファイルを開きます。
2. `environment` オブジェクトに `mfe1URL: 'http://localhost:5000'` を追加します。
export const environment = {
  production: false,
  mfe1URL: 'http://localhost:5000',
};

3. **environment.ts** ファイルを保存して閉じます。 | アプリ開発者 | | 経路制御を定義します。 | 1. **app-routing.module.ts** ファイルを開きます。
2. Angular CLI で、次のコマンドを入力して、@angular-architects/module-federation プラグインから `loadRemoteModule` モジュールをインポートします。
import { loadRemoteModule } from '@angular-architects/module-federation';

3. デフォルトのルートを次のように設定します。
{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

4. マイクロフロントエンドのルートを設定します。
{
    path: 'mfe1',
    loadChildren: () => loadRemoteModule({
        type: 'module',
        remoteEntry: `${environment.mfe1URL}/remoteEntry.js`,
        exposedModule: './Module'
      })
      .then(m => m.Mfe1Module)
  },

5. **app-routing.module.ts** ファイルを保存して閉じます。 | アプリ開発者 | | `mfe1` モジュールを宣言します。 | 1. `src` フォルダで、**decl.d.ts** という名前の新しいファイルを作成します。
2. **decl.d.ts** ファイルを開きます。
3. ファイルに以下を追加します。
declare module 'mfe1/Module';

4. **decl.d.ts** ファイルを保存して閉じます。 | アプリ開発者 | | マイクロフロントエンドのプリロードの準備をします。 | マイクロフロントエンドをプリロードすると、Webpack は共有ライブラリおよびパッケージと適切に協議できるようになります。1. **main.ts** ファイルを開きます。
2. ファイルの内容を以下に置き換えます。
import { loadRemoteEntry } from '@angular-architects/module-federation';
 
Promise.all([
    loadRemoteEntry(`${environment.mfe1URL}/remoteEntry.js`, 'mfe1'),
])
.catch(err => console.error('Error loading remote entries', err))
.then(() => import('./bootstrap'))
.catch(err => console.error(err));

3. **main.ts** ファイルを保存して閉じます。 | アプリ開発者 | | HTML コンテンツを調整します。 | 1. **app.component.html** ファイルを開きます。
2. ファイルの内容を以下に置き換えます。
Shell application is running!


3. **app.component.html** ファイルを保存して閉じます。 | アプリ開発者 | ### マイクロフロントエンドアプリケーションの作成 | タスク | 説明 | 必要なスキル | | --- | --- | --- | | マイクロフロントエンドを作成します。 | 1. Angular CLI で次のコマンドを入力します。
ng new mfe1 --routing

2. 次のコマンドを入力して、プロジェクトフォルダに移動します。
cd mfe1
| アプリ開発者 | | プラグインをインストールします。 | @angular-architects/module-federation プラグインをインストールするには、次のコマンドを入力します。
ng add @angular-architects/module-federation --project mfe1 --port 5000
| アプリ開発者 | | モジュールとコンポーネントを作成します。 | 次のコマンドを入力してモジュールとコンポーネントを作成し、リモートエントリモジュールとしてエクスポートします。
ng g module mfe1 --routing
ng g c mfe1
| アプリ開発者 | | デフォルトのルーティングパスを設定します。 | 1. **mfe-routing.module.ts** ファイルを開きます。
2. デフォルトのルートを次のように設定します。
{
    path: '',
    component: Mfe1Component
  },

3. **mfe-routing.module.ts** ファイルを保存して閉じます。 | アプリ開発者 | | `mfe1` ルートを追加します。 | 1. **app-routing.module.ts** ファイルを開きます。
2. デフォルトのルートを次のように設定します。
{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

3. 次の `mfe1` ルートを追加します。
{
    path: 'mfe1',
    loadChildren: () => 
      import('./mfe1/mfe1.module').then((m) => m.Mfe1Module),
  },

4. **app-routing.module.ts** ファイルを保存して閉じます。 | アプリ開発者 | | **webpack.config.js** ファイルを編集します。 | 1. **webpack.config.js** ファイルを開きます。
2. `For remotes` セクションを次と一致するように編集します。
// For remotes (please adjust)
    name: "mfe1",
    filename: "remoteEntry.js",
    exposes: {
        './Module': './src/app/mfe1/mfe1.module.ts',
    },

3. `shared` セクションで、`mfe1` アプリケーションがシェルアプリケーションと共有している依存関係をすべて追加します。
shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    
        ...sharedMappings.getDescriptors()
    })

4. **webpack.config.js** ファイルを保存して閉じます。 | アプリ開発者 | | HTML コンテンツを調整します。 | 1. **app.component.html** ファイルを開きます。
2. ファイルの内容を以下に置き換えます。

3. **app.component.html** ファイルを保存して閉じます。 | アプリ開発者 | ### 手元でのアプリケーションの実行 | タスク | 説明 | 必要なスキル | | --- | --- | --- | | `mfe1` アプリケーションを実行します。 | 1. 次のコマンドを入力して、`mfe1` アプリケーションを開始します。
npm start

2. ウェブブラウザで、`http://localhost:5000` にアクセスします。
3. マイクロフロントエンドが単独で実行できることを確認します。`mfe1` アプリケーションはエラーなしで適切に画面に表示される必要があります。 | アプリ開発者 | | シェルアプリケーションを実行します。 | 1. 次のコマンドを入力して、シェルアプリケーションを開始します。
npm start

2. ウェブブラウザで、`http://localhost:4200/mfe1` にアクセスします。
3. `mfe1` マイクロフロントエンドがシェルアプリケーションに埋め込まれていることを確認します。ポータルアプリケーションはエラーなしで適切に画面に表示され、`mfe1` アプリケーションがその中に埋め込まれている必要があります。 | アプリ開発者 | ### マイクロフロントエンドロードエラーを処理するようにシェルアプリケーションをリファクタリングする | タスク | 説明 | 必要なスキル | | --- | --- | --- | | モジュールとコンポーネントを作成します。 | シェルアプリケーションのルートフォルダで次のコマンドを入力して、エラーページ用のモジュールとコンポーネントを作成します。
ng g module error-page --routing
ng g c error-page
| アプリ開発者 | | HTML コンテンツを調整します。 | 1. **error-page.component.html** ファイルを開きます。
2. ファイルの内容を以下に置き換えます。
Sorry, this page is not available.

3. **error-page.component.html** ファイルを保存して閉じます。 | アプリ開発者 | | デフォルトのルーティングパスを設定します。 | 1. **error-page-routing.module.ts** ファイルを開きます。
2. デフォルトのルートを次のように設定します。
{
    path: '',
    component: ErrorPageComponent
  },

3. **error-page-routing.module.ts** ファイルを保存して閉じます。 | アプリ開発者 | | マイクロフロントエンドをロードする関数を作成します。 | 1. **app-routing.module.ts** ファイルを開きます。
2. 次の関数を作成します。
function loadMFE(url: string) {
    return loadRemoteModule({
        type: 'module',
        remoteEntry: `${url}/remoteEntry.js`,
        exposedModule: './Module'
    })
    .then(m => m.Mfe1Module)
    .catch(
        () => import('./error-page/error-page.module').then(m => m.ErrorPageModule)
    );
}

3. `mfe1` ルートを次のように変更します。
{
    path: 'mfe1',
    loadChildren: () => loadMFE(environment.mfe1URL)
},

4. **app-routing.module.ts** ファイルを保存して閉じます。 | アプリ開発者 | | エラー処理をテストします。 | 1. まだ実行されていない場合は、次のコマンドを入力してシェルアプリケーションを開始します。
npm start

2. ウェブブラウザで、`http://localhost:4200/mfe1` にアクセスします。
3. エラーページが画面に表示されていることを確認します。次のテキストが表示されるはずです。
Sorry, this page is not available.
| アプリ開発者 | ### を使用してアプリケーションをデプロイする AWS Amplify | タスク | 説明 | 必要なスキル | | --- | --- | --- | | マイクロフロントエンドをデプロイします。 | 1. Amplify CLI で、マイクロフロントエンドアプリケーションのルートフォルダに移動します。
2. 以下のコマンドを入力して、Amplify を初期化します。
amplify init

3. Amplify プロジェクトの名前を入力するように求められたら、**Enter** キーを押します。これにより、**package.json** ファイルからの名前が再利用されます。
4. 上記の設定でプロジェクトを初期化するように求められたら、`Yes` と入力します。
5. 認証方法を選択するように求められたら、`AWS Profile` を選択します。
6. 使用するプロファイルを選択します。
7. Amplify がプロジェクトを初期化するのを待ちます。このプロセスが完了すると、ターミナルに確認メッセージが表示されます。
8. 次のコマンドを入力して、マイクロフロントエンドに Amplify ホスティングカテゴリを追加します。
amplify add hosting

9. プラグインモジュールを選択するように求められたら、`Hosting with Amplify Console` を選択します。
10. タイプを選択するよう求められたら、`Manual deployment` を選択します。
11. 次のコマンドを入力して、プロジェクトの npm 依存関係をインストールします。
npm install

12. 次のコマンドを入力して、アプリケーションを Amplify コンソールに公開します。
amplify publish -y

公開が完了すると、Amplify がマイクロフロントエンドの URL を返します。
13. URL をコピーします。シェルアプリケーションを更新するには、この値が必要になります。 | アプリ開発者、AWS DevOps | | シェルアプリケーションを展開します | 1. **src/app/environments** フォルダで **environments.prod.ts** ファイルを開きます。
2. `mfe1URL` 値を展開されたマイクロフロントエンドの URL に置き換えます。
export const environment = {  
   production: true, 
   mfe1URL: 'https://..amplifyapp.com'
 };

3. **environments.prod.ts** ファイルを保存して閉じます。
4. Amplify CLI で、シェルアプリケーションのルートフォルダに移動します。
5. 以下のコマンドを入力して、Amplify を初期化します。
amplify init

6. Amplify プロジェクトの名前を入力するように求められたら、**Enter** キーを押します。これにより、**package.json** ファイルからの名前が再利用されます。
7. 上記の設定でプロジェクトを初期化するように求められたら、`Yes` と入力します。
8. 認証方法を選択するように求められたら、`AWS Profile` を選択します。
9. 使用するプロファイルを選択します。
10. Amplify がプロジェクトを初期化するのを待ちます。このプロセスが完了すると、ターミナルに確認メッセージが表示されます。
11. Amplify ホスティングカテゴリをシェルアプリケーションに追加します。
amplify add hosting

12. プラグインモジュールを選択するように求められたら、`Hosting with Amplify Console` を選択します。
13. タイプを選択するよう求められたら、`Manual deployment` を選択します。
14. 次のコマンドを入力して、プロジェクトの npm 依存関係をインストールします。
npm install

15. 次のコマンドを入力して、シェルアプリケーションを Amplify コンソールに公開します。
amplify publish -y

公開が完了すると、Amplify が展開されたシェルアプリケーションの URL を返します。
16. そのシェルアプリケーションの URL を書き留めます。 | アプリ開発者、アプリオーナー | | CORS を有効にします。 | シェルアプリケーションとマイクロフロントエンドアプリケーションは異なるドメインで個別に実行環境が提供されるため、マイクロフロントエンドでクロスオリジンリソース共有 (CORS) を有効にする必要があります。これにより、シェルアプリケーションは別のオリジンからコンテンツをロードできます。CORS を有効にするには、カスタムヘッダーを追加します。1. Amplify CLI で、マイクロフロントエンドのルートフォルダに移動します。
2. 次のコマンドを入力します。
amplify configure hosting

3. カスタム設定を設定するように求められたら、`Y` と入力します。
4. にサインインし AWS マネジメントコンソール、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。
5. マイクロフロントエンドを選択します。
6. ナビゲーションペインで、**[ホスティング]** を選択後、**[カスタムヘッダー]** を選択します。
7. **[編集]** を選択します。
8. **[カスタムヘッダーの編集]**ウィンドウで、次のように入力します。
customHeaders:
  - pattern: '*.js'
    headers:
      - key: Access-Control-Allow-Origin
        value: '*'
      - key: Access-Control-Allow-Methods
        value: 'GET, OPTIONS'
      - key: Access-Control-Allow-Headers
        value: '*'

9. **[保存]** を選択します。
10. マイクロフロントエンドを再展開して、新しいカスタムヘッダーを適用します。 | アプリ開発者、AWS DevOps | | シェルアプリケーションで書き換えルールを作成します。 | Angular シェルアプリケーションは、HTML5 ルーティングを使用するように設定されています。ユーザーが強制再読み込みを実行すると、Amplify は現在の URL からページをロードしようとします。これにより、403 エラーが生成されます。これを回避するには、Amplify コンソールに書き換えルールを追加します。
書き換えルールを作成するには、次の手順に従います。1. Amplify CLI で、シェルアプリケーションのルートフォルダに移動します。
2. 次のコマンドを入力します。
amplify configure hosting

3. カスタム設定を設定するように求められたら、`Y` と入力します。
4. [Amplify コンソールを開きます](https://console.aws.amazon.com/amplify/)。
5. シェルアプリケーションを選択します。
6. ナビゲーションペインで **[ホスティング]** を選択し、**[書き換えとリダイレクト]** を選択します。
7. **[書き換えとリダイレクト]** ページで、**[リダイレクトの管理]** を選択します。
8. **[テキストエディタを開く]** を選択します。
9. JSON エディタで、次のリダイレクトを入力します。
[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

10. **[保存]** を選択します。 | アプリ開発者、AWS DevOps | | ウェブポータルをテストします。 | 1. ウェブブラウザで、展開されたシェルアプリケーションの URL を入力します。
2. シェルアプリケーションとマイクロフロントエンドが適切にロードされていることを確認します。 | アプリ開発者 | ### リソースをクリーンアップする | タスク | 説明 | 必要なスキル | | --- | --- | --- | | アプリケーションを削除します。 | シェルアプリケーションとマイクロフロントエンドアプリケーションが不要になった場合は、削除してください。削除することで、使用していないリソースが課金されなくなります。1. にサインインし AWS マネジメントコンソール、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。
2. マイクロフロントエンドを選択します。
3. ナビゲーションペインで **[アプリの設定]** を選択後、**[全般設定]** を選択します。
4. **[アプリの削除]** を選択します。
5. 確認ウィンドウで `delete` を入力し、**[アプリの削除]** を選択します。
6. これらの手順を繰り返して、シェルアプリケーションを削除します。 | AWS 全般 | ## トラブルシューティング | 問題 | ソリューション | | --- | --- | | `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 エラーが発生した場合は、以下を確認してください。+ シェルアプリケーションの場合は、**app-routing.module.ts** ファイル内のルーティング設定が正しいことを確認し、`loadRemoteModule` 関数がマイクロフロントエンドを適切に呼び出していることを確認します。
+ マイクロフロントエンドの場合、**webpack.config.js** ファイルで `exposes` の設定が正しいことを確認し、**remoteEntry.js** ファイルが正しく生成されていることを確認します。 | ## 追加情報 **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)」