使用 AWS Amplify、角形和模組聯合建立微型前端的入口網站

在角度 中CLI，輸入下列命令：

ng new shell --routing

輸入下列命令以導覽至專案資料夾：

cd shell

注意： 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 檔案。

在角度 中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 資料夾中，開啟 environment.prod.ts 檔案。

將 mfe1URL值取代為部署的微型前端URL的 ：

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

儲存並關閉 environment.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 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，導覽至 Shell 應用程式的根資料夾。

輸入以下命令：

amplify configure hosting

當您收到設定自訂設定的提示時，請輸入 Y。

開啟 Amplify 主控台 。

選擇 Shell 應用程式。

在導覽窗格中，選擇託管 ，然後選擇重寫和重新導向 。

在重寫和重新導向頁面上，選擇管理重新導向。

選擇開啟文字編輯器 。

在JSON編輯器中，輸入下列重新導向：

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

選擇 Save (儲存)。

在 Web 瀏覽器中，輸入已部署 Shell URL 應用程式的 。

確認 Shell 應用程式和微型前端負載正確。

登入 AWS Management Console，然後開啟 Amplify 主控台 。

選擇微型前端。

在導覽窗格中，選擇應用程式設定 ，然後選擇一般設定 。

選擇刪除應用程式 。

在確認視窗中，輸入 delete，然後選擇刪除應用程式 。

重複這些步驟來刪除 Shell 應用程式。