Criação de um portal para microfrontends usando o AWS Amplify, Angular e Module Federation

Na CLI do Angular, insira o seguinte comando:

ng new shell --routing

Insira o seguinte comando para acessar a pasta do projeto:

cd shell

Abra o arquivo environment.ts.

Adicione mfe1URL: 'http://localhost:5000' ao objeto environment:

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

Salve e feche o arquivo environment.ts.

Abra o arquivo app-routing.module.ts.

Na CLI do Angular, digite o seguinte comando para importar o módulo loadRemoteModule do plug-in @angular-architects/module-federation:

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

Defina a rota padrão da seguinte forma:

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

Defina a rota para o microfrontend:

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

Salve e feche o arquivo app-routing.module.ts.

Na pasta src, crie um novo arquivo chamado decl.d.ts.

Abra o arquivo decl.d.ts.

Adicione o seguinte ao arquivo:

declare module 'mfe1/Module';

Salve e feche o arquivo decl.d.ts.

Abra o arquivo main.ts.

Substitua o conteúdo pelo seguinte:

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

Salve e feche o arquivo main.ts.

Abra o arquivo app.component.html.

Substitua o conteúdo pelo seguinte:

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

Salve e feche o arquivo app.component.html.

Na CLI do Angular, insira o seguinte comando:

ng new mfe1 --routing

Insira o seguinte comando para acessar a pasta do projeto:

cd mfe1

Abra o arquivo mfe-routing.module.ts.

Defina a rota padrão da seguinte forma:

{
    path: '',
    component: Mfe1Component
  },

Salve e feche o arquivo mfe-routing.module.ts.

Abra o arquivo app-routing.module.ts.

Defina a rota padrão da seguinte forma:

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

Adicione a seguinte rota mfe1:

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

Salve e feche o arquivo app-routing.module.ts.

Abra o arquivo webpack.config.js.

Edite a seção For remotes para que corresponda ao seguinte:

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

Na seção shared, adicione todas as dependências que a aplicação mfe1 compartilha com a aplicação 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()
    })

Salve e feche o arquivo webpack.config.js.

Abra o arquivo app.component.html.

Substitua o conteúdo pelo seguinte:

<router-outlet></router-outlet>

Salve e feche o arquivo app.component.html.

Insira o seguinte comando para iniciar a aplicação mfe1:

npm start

Em um navegador da web, acesse http://localhost:5000.

Verifique se o microfrontend pode ser executado de forma independente. A aplicação mfe1 deve ser renderizada corretamente sem erros.

Insira o seguinte comando para iniciar a aplicação shell:

npm start

Em um navegador da web, acesse http://localhost:4200/mfe1.

Verifique se o microfrontend mfe1 está incorporado na aplicação shell. A aplicação do portal deve ser renderizada adequadamente, sem erros, e a aplicação mfe1 deve estar incorporada a ela.

Abra o arquivo error-page.component.html.

Substitua o conteúdo pelo seguinte:

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

Salve e feche o arquivo error-page.component.html.

Abra o arquivo error-page-routing.module.ts.

Defina a rota padrão da seguinte forma:

{
    path: '',
    component: ErrorPageComponent
  },

Salve e feche o arquivo error-page-routing.module.ts.

Abra o arquivo app-routing.module.ts.

Crie a seguinte função:

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

Modifique a rota mfe1 da seguinte maneira:

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

Salve e feche o arquivo app-routing.module.ts.

Se ainda não estiver em execução, digite o seguinte comando para iniciar a aplicação shell:

npm start

Em um navegador da web, acesse http://localhost:4200/mfe1.

Verifique se a página de erros foi renderizada. Você deverá ver o seguinte texto:

Sorry, this page is not available.

Na CLI do Amplify, navegue até a pasta-raiz da aplicação de microfrontend.

Insira o seguinte comando para inicializar o Amplify:

amplify init

Quando nome para seu projeto do Amplify for solicitado, pressione Enter. Isso reutiliza o nome do arquivo package.json.

Quando a inicialização do projeto com a configuração acima for solicitada, insira Yes.

Quando um método de autenticação for solicitado, escolha AWS Profile.

Selecione o perfil que você deseja usar.

Aguarde até que o Amplify inicialize o projeto. Quando esse processo for concluído, você receberá uma mensagem de confirmação no terminal.

Insira o seguinte comando para adicionar uma categoria de hospedagem do Amplify ao microfrontend:

amplify add hosting

Quando o módulo do plug-in for solicitado, escolha Hosting with Amplify Console.

Quando um tipo for solicitado, escolha Manual deployment.

Instale as dependências npm do projeto inserindo o seguinte comando:

npm install

Publique a aplicação no console do Amplify inserindo o seguinte comando:

amplify publish -y

Quando a publicação estiver concluída, o Amplify retornará o URL do microfrontend.

Copie o URL. Você precisa desse valor para atualizar a aplicação shell.

Na pasta src/app/environments, abra o arquivo environments.prod.ts.

Substitua o valor mfe1URL pelo URL do microfrontend implantado:

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

Salve e feche o arquivo environments.prod.ts.

Na CLI do Amplify, navegue até a pasta-raiz da aplicação shell.

Insira o seguinte comando para inicializar o Amplify:

amplify init

Quando nome para seu projeto do Amplify for solicitado, pressione Enter. Isso reutiliza o nome do arquivo package.json.

Quando a inicialização do projeto com a configuração acima for solicitada, insira Yes.

Quando um método de autenticação for solicitado, escolha AWS Profile.

Selecione o perfil que você deseja usar.

Aguarde até que o Amplify inicialize o projeto. Quando esse processo for concluído, você receberá uma mensagem de confirmação no terminal.

Adicione uma categoria de hospedagem do Amplify à aplicação shell:

amplify add hosting

Quando o módulo do plug-in for solicitado, escolha Hosting with Amplify Console.

Quando um tipo for solicitado, escolha Manual deployment.

Instale as dependências npm do projeto inserindo o seguinte comando:

npm install

Publique a aplicação shell no console do Amplify inserindo o seguinte comando:

amplify publish -y

Quando a publicação estiver concluída, o Amplify retornará o URL da aplicação shell implantada.

Anote o URL da aplicação shell.

Na CLI do Amplify, navegue até a pasta-raiz do microfrontend.

Digite o comando:

amplify configure hosting

Quando uma configuração personalizada for solicitada, insira Y.

Faça login no Console de gerenciamento da AWS e, em seguida, abra o console do Amplify.

Escolha o microfrontend.

No painel de navegação, escolha Hospedagem e, em seguida, escolha Cabeçalhos personalizados.

Escolha Editar.

Na janela Editar cabeçalhos personalizados, insira o seguinte:

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

Escolha Salvar.

Reimplante o microfrontend para aplicar os novos cabeçalhos personalizados.

Na CLI do Amplify, navegue até a pasta-raiz da aplicação shell.

Digite o comando:

amplify configure hosting

Quando uma configuração personalizada for solicitada, insira Y.

Abra o console do Amplify.

Escolha a aplicação shell.

No painel de navegação, escolha Hospedagem e, em seguida, escolha Regravações e redirecionamentos.

Na página Regravações e redirecionamentos, escolha Gerenciar redirecionamentos.

Escolha Abrir editor de texto.

No editor JSON, insira o seguinte redirecionamento:

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

Escolha Salvar.

Em um navegador da web, digite o URL da aplicação shell implantada.

Verifique se a aplicação shell e o microfrontend foram carregados corretamente.

Faça login no Console de gerenciamento da AWS e, em seguida, abra o console do Amplify.

Escolha o microfrontend.

No painel de navegação, escolha Configurações da aplicação, e, em seguida, escolha Configurações gerais.

Escolha Excluir aplicação.

Na caixa de confirmação, insira delete e, em seguida, escolha Excluir aplicação.

Repita essas etapas para excluir a aplicação shell.