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

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

ng new shell --routing

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

cd shell

注: シェルとマイクロフロントエンドアプリケーションのフォルダとプロジェクト構造は完全に独立している可能性があります。これらは独立した Angular アプリケーションとして処理できます。

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 フォルダで environment.prod.ts ファイルを開きます。

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

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

environment.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 Management Console、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: '*'

[Save] を選択します。

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

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

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

amplify configure hosting

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

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

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

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

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

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

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

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

[Save] を選択します。

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

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

にサインインし AWS Management Console、Amplify コンソール を開きます。

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

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

[Delete app] (アプリの削除) を選択します。

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

シェルアプリケーションを削除するには、以下の手順を繰り返します。