使用 AWS Amplify、Angular 和 Module Federation 为微前端创建门户

在 Angular CLI 中，输入以下命令：

ng new shell --routing

输入以下命令，以导航至项目文件夹：

cd shell

打开 environment.ts 文件。

将 mfe1URL: 'http://localhost:5000' 添加到 environment 对象：

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 应用程序与 Shell 应用程序共享的所有依赖项：

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

在 Web 浏览器中，访问 http://localhost:5000。

验证微前端是否可以独立运行。mfe1 应用程序应该能够正确渲染，不会出现任何错误。

输入以下命令，以启动 Shell 应用程序：

npm start

在 Web 浏览器中，访问 http://localhost:4200/mfe1。

验证 mfe1 微前端是否已嵌入 Shell 应用程序中。门户应用程序应该能够正确渲染，不会出现任何错误，并且 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 文件。

如果它尚未运行，请输入以下命令，以启动 Shell 应用程序：

npm start

在 Web 浏览器中，访问 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。更新 Shell 应用程序时，您需要用到此值。

在 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 中，导航到 Shell 应用程序的根文件夹。

输入以下命令，以初始化 Amplify：

amplify init

当提示您输入 Amplify 项目的名称时，请按 Enter 键。这样一来，就能重复使用 package.json 文件中的名称。

当提示您使用上述配置初始化项目时，请输入 Yes。

当提示您选择身份验证方法时，请选择 AWS Profile。

选择要使用的配置文件。

等待 Amplify 初始化项目。此过程完成后，您将在终端中收到一条确认消息。

将 Amplify 托管类别添加到 Shell 应用程序中：

amplify add hosting

当提示您选择插件模块时，请选择 Hosting with Amplify Console。

当提示您选择类型时，请选择 Manual deployment。

输入以下命令，以安装项目 npm 依赖项：

npm install

输入以下命令，以将 Shell 应用程序发布到 Amplify 控制台：

amplify publish -y

发布完成后，Amplify 会返回已部署的 Shell 应用程序的 URL。

记下 Shell 应用程序的 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 中，导航到 Shell 应用程序的根文件夹。

输入以下命令：

amplify configure hosting

当提示您配置自定义设置时，请输入 Y。

打开 Amplify 控制台。

选择 Shell 应用程序。

在导航窗格中，依次选择托管、重写和重定向。

在重写和重定向页面上选择管理重定向。

选择打开文本编辑器。

在 JSON 编辑器中，输入以下重新导向：

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

选择保存。

在 Web 浏览器中，输入已部署的 shell 应用程序的 URL。

验证 Shell 应用程序和微前端是否已正确加载。

登录 AWS 管理控制台，然后打开 Amplify 控制台。

选择微前端。

在导航窗格中，选择应用程序设置，然后选择常规设置。

选择删除应用程序。

在确认窗口中，输入 delete，然后选择删除应用程序。

重复这些步骤，以删除 Shell 应用程序。