As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá. # Crie um portal para microfrontends usando Angular e AWS Amplify Module Federation *Milena Godau e Pedro Garcia, Amazon Web Services* ## Resumo Uma arquitetura de microfrontend permite que várias equipes trabalhem em diferentes partes de uma aplicação de frontend de forma independente. Cada equipe pode desenvolver, criar e implantar um fragmento do frontend sem interferir em outras partes da aplicação. Do ponto de vista do usuário final, parece ser uma aplicação única e coesa. No entanto, eles estão interagindo com várias aplicações independentes publicadas por equipes diferentes. Este documento descreve como criar uma arquitetura de microfrontend usando o [AWS Amplify](https://docs.amplify.aws/gen1/angular/), a estrutura de frontend [Angular](https://angular.dev/overview) e o [Module Federation](https://webpack.js.org/concepts/module-federation/). Neste padrão, os microfrontends são combinados no lado do cliente por uma aplicação shell (ou *principal*). A aplicação shell atua como um contêiner que recupera, exibe e integra os microfrontends. A aplicação shell manipula o roteamento global, que carrega diferentes microfrontends. O plug-in [@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation) integra o Module Federation com o Angular. Você implanta o aplicativo shell e os microfrontends usando o. AWS Amplify Os usuários finais acessam a aplicação por meio de um portal baseado na web. O portal está dividido verticalmente. Isso significa que os microfrontends são visualizações inteiras ou grupos de visualizações, em vez de partes da mesma visualização. Portanto, a aplicação shell carrega apenas um microfrontend por vez. Os microfrontends são implementados como módulos remotos. A aplicação shell carrega lentamente esses módulos remotos, o que adia a inicialização do microfrontend até que ela seja necessária. Essa abordagem otimiza a performance da aplicação carregando somente os módulos necessários. Isso reduz o tempo de carregamento inicial e melhora a experiência geral do usuário. Além disso, você compartilha dependências comuns entre os módulos por meio do arquivo de configuração do webpack (**webpack.config.js**). Essa prática promove a reutilização de código, reduz a duplicação e simplifica o processo de empacotamento. ## Pré-requisitos e limitações **Pré-requisitos ** + Um ativo Conta da AWS + Node.js e npm, [instalados](https://nodejs.org/en/download/) + CLI do Amplify, [instalada](https://docs.amplify.aws/gen1/angular/tools/cli/) + CLI do Angular, [instalada](https://angular.io/cli) + [Permissões](https://docs.aws.amazon.com/service-authorization/latest/reference/list_awsamplify.html) de uso AWS Amplify + Familiaridade com o Angular **Versões do produto** + CLI do Angular versão 13.1.2 ou posterior + @angular-architects/module-federation versão 14.0.1 ou posterior + webpack versão 5.4.0 ou posterior + AWS Amplify Geração 1 **Limitações** Uma arquitetura de microfrontend é uma abordagem poderosa para criar aplicações web escaláveis e resilientes. No entanto, é fundamental entender os seguintes desafios em potencial antes de adotar essa abordagem: + **Integração**: um dos principais desafios é o aumento potencial da complexidade em comparação com frontends monolíticos. Orquestrar vários microfrontends, lidar com a comunicação entre eles e gerenciar dependências compartilhadas pode ser mais complexo. Além disso, pode haver uma sobrecarga na performance associada à comunicação entre os microfrontends. Essa comunicação pode aumentar a latência e reduzir a performance. Isso precisa ser resolvido por meio de mecanismos eficientes de mensagens e estratégias de compartilhamento de dados. + **Duplicação de código**: como cada microfrontend é desenvolvido de forma independente, existe o risco de duplicar o código para funcionalidades comuns ou bibliotecas compartilhadas. Isso pode aumentar o tamanho geral da aplicação e introduzir desafios de manutenção. + **Coordenação e gerenciamento**: coordenar os processos de desenvolvimento e implantação em vários microfrontends pode ser um desafio. Garantir o versionamento consistente, o gerenciamento de dependências e a manutenção da compatibilidade entre os componentes se torna mais importante em uma arquitetura distribuída. Estabelecer uma governança clara, diretrizes e pipelines automatizados de teste e implantação é essencial para uma colaboração e entrega perfeitas. + **Teste**: testar arquiteturas de microfrontend pode ser mais complexo do que testar frontends monolíticos. Isso requer esforço adicional e estratégias de teste especializadas para realizar testes e end-to-end testes de integração entre componentes e validar experiências de usuário consistentes em vários microfront-ends. Antes de se comprometer com a abordagem de microfrontend, recomendamos que você analise [Compreendendo e implementando](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html) microfrontends em. AWS ## Arquitetura Em uma arquitetura de microfrontend, cada equipe desenvolve e implanta recursos de forma independente. A imagem a seguir mostra como várias DevOps equipes trabalham juntas. A equipe do portal desenvolve a aplicação shell. A aplicação shell atua como um contêiner. Ele recupera, exibe e integra os aplicativos de microfront-end publicados por outras equipes. DevOps Você usa AWS Amplify para publicar o aplicativo shell e os aplicativos de microfrontend. ![\[Publicar vários microfrontends em uma aplicação shell que o usuário acessa por meio de um portal da web.\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/images/pattern-img/ddf82a69-bf1b-4ad1-8e60-3dd375699936/images/cf045bf1-11ea-46d9-93cb-3c603122450d.png) O diagrama da arquitetura mostra o seguinte fluxo de trabalho: 1. A equipe do portal desenvolve e mantém a aplicação shell. A aplicação shell orquestra a integração e a renderização dos microfrontends para compor o portal geral. 1. As equipes A e B desenvolvem e mantêm um ou mais microfrontends ou recursos integrados ao portal. Cada equipe pode trabalhar de forma independente em seus respectivos microfrontends. 1. O usuário final faz a autenticação usando o Amazon Cognito. 1. O usuário final acessa o portal e a aplicação shell é carregada. Conforme o usuário navega, a aplicação shell lida com o roteamento e recupera o microfrontend solicitado, carregando seu pacote. ## Ferramentas **Serviços da AWS** + [AWS Amplify](https://docs.amplify.aws/angular/start/)é um conjunto de ferramentas e recursos específicos que ajudam desenvolvedores front-end da Web e de dispositivos móveis a criar rapidamente aplicativos completos em. AWS Neste padrão, você usa a CLI do Amplify para implantar as aplicações de microfrontend do Amplify. + [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) é uma ferramenta de código aberto que ajuda você a interagir Serviços da AWS por meio de comandos em seu shell de linha de comando. **Outras ferramentas** + [@angular-architects/module-federation](https://github.com/angular-architects/module-federation-plugin) é um plugin que integra o Angular com o Module Federation. + O [Angular](https://angular.dev/overview) é uma estrutura de aplicações web de código aberto para criar aplicações de página única modernas, escaláveis e testáveis. Ele segue uma arquitetura modular e baseada em componentes que promove a reutilização e a manutenção do código. + [O Node.js](https://nodejs.org/en/docs/) é um ambiente de JavaScript tempo de execução orientado a eventos projetado para criar aplicativos de rede escaláveis. + O [npm](https://docs.npmjs.com/about-npm) é um registro de software executado em um ambiente Node.js e usado para compartilhar ou emprestar pacotes e gerenciar a implantação de pacotes privados. + O [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/) ajuda você a carregar código compilado e implantado de forma independente, como microfrontends ou plug-ins, em uma aplicação. **Repositório de código** O código desse padrão está disponível no [portal Micro-frontend usando o repositório Angular e Module Federation](https://github.com/aws-samples/angular-module-federation-mfe) GitHub . Esse repositório contém as duas pastas abaixo: + `shell-app` contém o código para a aplicação shell. + `feature1-app` contém um exemplo de microfrontend. A aplicação shell busca esse microfrontend e o exibe como uma página dentro da aplicação do portal. ## Práticas recomendadas As arquiteturas de microfrontend oferecem inúmeras vantagens, mas também introduzem complexidade. A seguir estão algumas das práticas recomendadas para um desenvolvimento tranquilo, código de alta qualidade e uma ótima experiência do usuário: + **Planejamento e comunicação**: para agilizar a colaboração, invista em planejamento antecipado, design e canais de comunicação claros. + **Consistência do design**: aplique um estilo visual consistente em microfrontends usando sistemas de design, guias de estilo e bibliotecas de componentes. Isso proporciona uma experiência de usuário coesa e acelera o desenvolvimento. + **Gerenciamento de dependências**: como os microfrontends evoluem de forma independente, adote contratos padronizados e estratégias de versionamento para gerenciar dependências de forma eficaz e evitar problemas de compatibilidade. + **Arquitetura de microfrontend**: para permitir o desenvolvimento e a implantação independentes, cada microfrontend deve ter uma responsabilidade clara e bem definida por uma funcionalidade encapsulada. + **Integração e comunicação** — Para facilitar a integração e minimizar conflitos, defina contratos e protocolos de comunicação claros entre microfront-ends APIs, incluindo eventos e modelos de dados compartilhados. + **Teste e garantia de qualidade**: implemente pipelines de automação de testes e integração contínua para microfrontends. Isso melhora a qualidade geral, reduz o esforço de testes manuais e valida a funcionalidade entre as interações de microfrontend. + **Otimização de performance**:** **monitore continuamente as métricas de performance e acompanhe as dependências entre microfrontends. Isso ajuda você a identificar gargalos e manter a performance ideal da aplicação. Use ferramentas de monitoramento de performance e análise de dependências para essa finalidade. + **Experiência do desenvolvedor**: concentre-se na experiência do desenvolvedor fornecendo documentação, ferramentas e exemplos claros. Isso ajuda você a otimizar o desenvolvimento e integrar novos membros da equipe. ## Épicos ### Criar a aplicação shell | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Crie a aplicação shell. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Instale o plug-in . | Na CLI do Angular, digite o seguinte comando para instalar o plug-in [@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation):
ng add @angular-architects/module-federation --project shell --port 4200
| Desenvolvedor de aplicativos | | Adicione o URL do microfrontend como uma variável de ambiente. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Defina o roteamento. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Declare o módulo `mfe1`. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Prepare o pré-carregamento para o microfrontend. | O pré-carregamento do microfrontend ajuda o webpack a negociar adequadamente as bibliotecas e pacotes compartilhados.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Ajuste o conteúdo HTML. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | ### Criar a aplicação de microfrontend | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Crie o microfrontend. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Instale o plug-in . | Insira o seguinte comando para instalar o plug-in @angular-architects/module-federation:
ng add @angular-architects/module-federation --project mfe1 --port 5000
| Desenvolvedor de aplicativos | | Crie um módulo e componente. | Insira os seguintes comandos para criar um módulo e um componente e exportá-los como módulo de entrada remota:
ng g module mfe1 --routing
ng g c mfe1
| Desenvolvedor de aplicativos | | Defina o caminho de roteamento padrão. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Adicione a rota `mfe1`. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Edite o arquivo **webpack.config.js**. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Ajuste o conteúdo HTML. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | ### Testar as aplicações localmente | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Execute a aplicação `mfe1`. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Execute a aplicação shell. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | ### Refatore a aplicação shell para lidar com um erro de carregamento do microfrontend | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Crie um módulo e componente. | Na pasta-raiz da aplicação shell, insira os seguintes comandos para criar um módulo e um componente para uma página de erro:
ng g module error-page --routing
ng g c error-page
| Desenvolvedor de aplicativos | | Ajuste o conteúdo HTML. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Defina o caminho de roteamento padrão. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Crie uma função para carregar microfrontends. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | | Teste o tratamento de erros. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | ### Implante os aplicativos usando AWS Amplify | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Implante o microfrontend. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos, AWS DevOps | | Implante a aplicação shell. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor do aplicativo, proprietário do aplicativo | | Ativar CORS. | Como as aplicações shell e de microfrontend são hospedadas de forma independente em domínios diferentes, você deve habilitar o compartilhamento de recursos de origem cruzada (CORS) no microfrontend. Isso permite que a aplicação shell carregue o conteúdo de uma origem diferente. Para habilitar o CORS, adicione cabeçalhos personalizados.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos, AWS DevOps | | Crie uma regra de regravação na aplicação shell. | O aplicativo Angular shell está configurado para usar HTML5 roteamento. Se o usuário fizer uma atualização definitiva, o Amplify tentará carregar uma página do URL atual. Isso gera um erro 403. Para evitar isso, adicione uma regra de regravação no console do Amplify.Para criar a regra de regravação, siga estas etapas:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos, AWS DevOps | | Teste o portal da web. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Desenvolvedor de aplicativos | ### Limpar os recursos | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Exclua as aplicações. | Se você não precisar mais das aplicações shell e de microfrontend, exclua-as. Isso ajuda a evitar cobranças por recursos que você não está usando.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | AWS geral | ## Solução de problemas | Problema | Solução | | --- | --- | | Nenhum AWS perfil disponível ao executar o `amplify init` comando | Se você não tiver um AWS perfil configurado, ainda poderá continuar com o `amplify init` comando. No entanto, você precisa selecionar a opção `AWS access keys` quando for solicitado o método de autenticação. Tenha sua chave de AWS acesso e chave secreta disponíveis.Como alternativa, você pode configurar um perfil nomeado para a AWS CLI. Para obter instruções, consulte [Configurações e configurações do arquivo de credenciais](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html) na AWS CLI documentação. | | Erro ao carregar entradas remotas | Se você encontrar um erro ao carregar as entradas remotas no arquivo **main.ts** da aplicação shell, verifique se a variável `environment.mfe1URL` está definida corretamente. O valor dessa variável deve ser o URL do microfrontend. | | Erro 404 ao acessar o microfrontend | Se você receber um erro 404 ao tentar acessar o microfrontend local, como em `http://localhost:4200/mfe1`, verifique o seguinte:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | ## Mais informações **AWS documentação** + [Compreendendo e implementando microfrontends em AWS(orientação](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html)AWS prescritiva) + [Amplify CLI](https://docs.amplify.aws/gen1/angular/tools/cli/) (documentação do Amplify) + [Amplify Hosting](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) (documentação do Amplify) **Outras referências** + [Module Federation](https://webpack.js.org/concepts/module-federation/) + [Node.js](https://nodejs.org/en/) + [Angular](https://angular.io/) + [@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation)