、Angular AWS Amplify、および Module Federation を使用してマイクロフロントエンド用のポータルを作成する

Angular CLI で次のコマンドを入力します。

ng new shell --routing

次のコマンドを入力して、プロジェクトフォルダに移動します。

cd shell

environment.ts ファイルを開きます。

environment オブジェクトに mfe1URL: 'http://localhost:5000' を追加します。

export const environment = {
  production: false,
  mfe1URL: 'http://localhost:5000',
};

environment.ts ファイルを保存して閉じます。

app-routing.module.ts ファイルを開きます。

Angular CLI で、次のコマンドを入力して、@angular-architects/module-federation プラグインから loadRemoteModule モジュールをインポートします。

import { loadRemoteModule } from '@angular-architects/module-federation';

デフォルトのルートを次のように設定します。

{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

マイクロフロントエンドのルートを設定します。

{
    path: 'mfe1',
    loadChildren: () => loadRemoteModule({
        type: 'module',
        remoteEntry: `${environment.mfe1URL}/remoteEntry.js`,
        exposedModule: './Module'
      })
      .then(m => m.Mfe1Module)
  },

app-routing.module.ts ファイルを保存して閉じます。

src フォルダで、decl.d.ts という名前の新しいファイルを作成します。

decl.d.ts ファイルを開きます。

ファイルに以下を追加します。

declare module 'mfe1/Module';

decl.d.ts ファイルを保存して閉じます。

main.ts ファイルを開きます。

ファイルの内容を以下に置き換えます。

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));

main.ts ファイルを保存して閉じます。

app.component.html ファイルを開きます。

ファイルの内容を以下に置き換えます。

<h1>Shell application is running!</h1>
<router-outlet></router-outlet>

app.component.html ファイルを保存して閉じます。

Angular CLI で次のコマンドを入力します。

ng new mfe1 --routing

次のコマンドを入力して、プロジェクトフォルダに移動します。

cd mfe1

mfe-routing.module.ts ファイルを開きます。

デフォルトのルートを次のように設定します。

{
    path: '',
    component: Mfe1Component
  },

mfe-routing.module.ts ファイルを保存して閉じます。

app-routing.module.ts ファイルを開きます。

デフォルトのルートを次のように設定します。

{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

次の mfe1 ルートを追加します。

{
    path: 'mfe1',
    loadChildren: () => 
      import('./mfe1/mfe1.module').then((m) => m.Mfe1Module),
  },

app-routing.module.ts ファイルを保存して閉じます。

webpack.config.js ファイルを開きます。

For remotes セクションを次と一致するように編集します。

// For remotes (please adjust)
    name: "mfe1",
    filename: "remoteEntry.js",
    exposes: {
        './Module': './src/app/mfe1/mfe1.module.ts',
    },

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()
    })

webpack.config.js ファイルを保存して閉じます。

app.component.html ファイルを開きます。

ファイルの内容を以下に置き換えます。

<router-outlet></router-outlet>

app.component.html ファイルを保存して閉じます。

次のコマンドを入力して、mfe1 アプリケーションを開始します。

npm start

ウェブブラウザで、http://localhost:5000 にアクセスします。

マイクロフロントエンドが単独で実行できることを確認します。mfe1 アプリケーションはエラーなしで適切に画面に表示される必要があります。

次のコマンドを入力して、シェルアプリケーションを開始します。

npm start

ウェブブラウザで、http://localhost:4200/mfe1 にアクセスします。

mfe1 マイクロフロントエンドがシェルアプリケーションに埋め込まれていることを確認します。ポータルアプリケーションはエラーなしで適切に画面に表示され、mfe1 アプリケーションがその中に埋め込まれている必要があります。

error-page.component.html ファイルを開きます。

ファイルの内容を以下に置き換えます。

<p>Sorry, this page is not available.</p>

error-page.component.html ファイルを保存して閉じます。

error-page-routing.module.ts ファイルを開きます。

デフォルトのルートを次のように設定します。

{
    path: '',
    component: ErrorPageComponent
  },

error-page-routing.module.ts ファイルを保存して閉じます。

app-routing.module.ts ファイルを開きます。

次の関数を作成します。

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)
    );
}

mfe1 ルートを次のように変更します。

{
    path: 'mfe1',
    loadChildren: () => loadMFE(environment.mfe1URL)
},

app-routing.module.ts ファイルを保存して閉じます。

まだ実行されていない場合は、次のコマンドを入力してシェルアプリケーションを開始します。

npm start

ウェブブラウザで、http://localhost:4200/mfe1 にアクセスします。

エラーページが画面に表示されていることを確認します。次のテキストが表示されるはずです。

Sorry, this page is not available.

Amplify CLI で、マイクロフロントエンドアプリケーションのルートフォルダに移動します。

以下のコマンドを入力して、Amplify を初期化します。

amplify init

Amplify プロジェクトの名前を入力するように求められたら、Enter キーを押します。これにより、package.json ファイルからの名前が再利用されます。

上記の設定でプロジェクトを初期化するように求められたら、Yes と入力します。

認証方法を選択するように求められたら、AWS Profile を選択します。

使用するプロファイルを選択します。

Amplify がプロジェクトを初期化するのを待ちます。このプロセスが完了すると、ターミナルに確認メッセージが表示されます。

次のコマンドを入力して、マイクロフロントエンドに Amplify ホスティングカテゴリを追加します。

amplify add hosting

プラグインモジュールを選択するように求められたら、Hosting with Amplify Console を選択します。

タイプを選択するよう求められたら、Manual deployment を選択します。

次のコマンドを入力して、プロジェクトの npm 依存関係をインストールします。

npm install

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

amplify publish -y

公開が完了すると、Amplify がマイクロフロントエンドの URL を返します。

URL をコピーします。シェルアプリケーションを更新するには、この値が必要になります。

src/app/environments フォルダで environments.prod.ts ファイルを開きます。

mfe1URL 値を展開されたマイクロフロントエンドの URL に置き換えます。

export const environment = {  
   production: true, 
   mfe1URL: 'https://<env>.<Amplify-app-ID>.amplifyapp.com'
 };

environments.prod.ts ファイルを保存して閉じます。

Amplify CLI で、シェルアプリケーションのルートフォルダに移動します。

以下のコマンドを入力して、Amplify を初期化します。

amplify init

Amplify プロジェクトの名前を入力するように求められたら、Enter キーを押します。これにより、package.json ファイルからの名前が再利用されます。

上記の設定でプロジェクトを初期化するように求められたら、Yes と入力します。

認証方法を選択するように求められたら、AWS Profile を選択します。

使用するプロファイルを選択します。

Amplify がプロジェクトを初期化するのを待ちます。このプロセスが完了すると、ターミナルに確認メッセージが表示されます。

Amplify ホスティングカテゴリをシェルアプリケーションに追加します。

amplify add hosting

プラグインモジュールを選択するように求められたら、Hosting with Amplify Console を選択します。

タイプを選択するよう求められたら、Manual deployment を選択します。

次のコマンドを入力して、プロジェクトの npm 依存関係をインストールします。

npm install

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

amplify publish -y

公開が完了すると、Amplify が展開されたシェルアプリケーションの URL を返します。

そのシェルアプリケーションの URL を書き留めます。

Amplify CLI で、マイクロフロントエンドのルートフォルダに移動します。

次のコマンドを入力します。

amplify configure hosting

カスタム設定を設定するように求められたら、Y と入力します。

にサインインし AWS マネジメントコンソール、Amplify コンソールを開きます。

マイクロフロントエンドを選択します。

ナビゲーションペインで、[ホスティング] を選択後、[カスタムヘッダー] を選択します。

[編集] を選択します。

[カスタムヘッダーの編集]ウィンドウで、次のように入力します。

customHeaders:
  - pattern: '*.js'
    headers:
      - key: Access-Control-Allow-Origin
        value: '*'
      - key: Access-Control-Allow-Methods
        value: 'GET, OPTIONS'
      - key: Access-Control-Allow-Headers
        value: '*'

[保存] を選択します。

マイクロフロントエンドを再展開して、新しいカスタムヘッダーを適用します。

Amplify CLI で、シェルアプリケーションのルートフォルダに移動します。

次のコマンドを入力します。

amplify configure hosting

カスタム設定を設定するように求められたら、Y と入力します。

Amplify コンソールを開きます。

シェルアプリケーションを選択します。

ナビゲーションペインで [ホスティング] を選択し、[書き換えとリダイレクト] を選択します。

[書き換えとリダイレクト] ページで、[リダイレクトの管理] を選択します。

[テキストエディタを開く] を選択します。

JSON エディタで、次のリダイレクトを入力します。

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

[保存] を選択します。

ウェブブラウザで、展開されたシェルアプリケーションの URL を入力します。

シェルアプリケーションとマイクロフロントエンドが適切にロードされていることを確認します。

にサインインし AWS マネジメントコンソール、Amplify コンソールを開きます。

マイクロフロントエンドを選択します。

ナビゲーションペインで [アプリの設定] を選択後、[全般設定] を選択します。

[アプリの削除] を選択します。

確認ウィンドウで delete を入力し、[アプリの削除] を選択します。

これらの手順を繰り返して、シェルアプリケーションを削除します。