Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà. # Crea un portale per micro-frontend utilizzando Angular e AWS Amplify Module Federation *Milena Godau e Pedro Garcia, Amazon Web Services* ## Riepilogo Un'architettura micro-frontend consente a più team di lavorare su diverse parti di un'applicazione frontend in modo indipendente. Ogni team può sviluppare, creare e distribuire un frammento del frontend senza interferire con altre parti dell'applicazione. Dal punto di vista dell'utente finale, sembra essere un'unica applicazione coesa. Tuttavia, interagiscono con diverse applicazioni indipendenti pubblicate da team diversi. [Questo documento descrive come creare un'architettura di micro-frontend utilizzando [AWS Amplify](https://docs.amplify.aws/gen1/angular/)il framework di frontend [Angular](https://angular.dev/overview) e Module Federation.](https://webpack.js.org/concepts/module-federation/) *In questo modello, i micro-frontend vengono combinati sul lato client da un'applicazione shell (o principale).* L'applicazione shell funge da contenitore che recupera, visualizza e integra i micro-frontend. L'applicazione shell gestisce il routing globale, che carica diversi micro-frontend. Il plugin [@angular -architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation) integra Module Federation con Angular. Si distribuiscono l'applicazione shell e i micro-frontend utilizzando. AWS Amplify Gli utenti finali accedono all'applicazione tramite un portale basato sul Web. Il portale è diviso verticalmente. Ciò significa che i micro-frontend sono intere viste o gruppi di visualizzazioni, anziché parti della stessa vista. Pertanto l'applicazione shell carica solo un micro-frontend alla volta. I micro-frontend sono implementati come moduli remoti. L'applicazione shell carica pigramente questi moduli remoti, il che posticipa l'inizializzazione del microfrontend finché non è necessaria. Questo approccio ottimizza le prestazioni dell'applicazione caricando solo i moduli necessari. Ciò riduce il tempo di caricamento iniziale e migliora l'esperienza utente complessiva. Inoltre, condividi le dipendenze comuni tra i moduli tramite il file di configurazione webpack (**webpack.config.js**). Questa pratica promuove il riutilizzo del codice, riduce la duplicazione e semplifica il processo di raggruppamento. ## Prerequisiti e limitazioni **Prerequisiti** + Un attivo Account AWS + [Node.js e npm, installati](https://nodejs.org/en/download/) + [Amplify CLI, installata](https://docs.amplify.aws/gen1/angular/tools/cli/) + [CLI angolare, installata](https://angular.io/cli) + [Autorizzazioni](https://docs.aws.amazon.com/service-authorization/latest/reference/list_awsamplify.html) da utilizzare AWS Amplify + Familiarità con Angular **Versioni del prodotto** + Angular CLI versione 13.1.2 o successiva + @angular -architects/module-federation versione 14.0.1 o successiva + webpack versione 5.4.0 o successiva + AWS Amplify Gen 1 **Limitazioni** Un'architettura micro-frontend è un approccio potente per la creazione di applicazioni web scalabili e resilienti. Tuttavia, è fondamentale comprendere le seguenti potenziali sfide prima di adottare questo approccio: + **Integrazione**: una delle sfide principali è il potenziale aumento della complessità rispetto ai frontend monolitici. Orchestrare più micro-frontend, gestire le comunicazioni tra di loro e gestire le dipendenze condivise può essere più complesso. Inoltre, potrebbe esserci un sovraccarico prestazionale associato alla comunicazione tra i micro-frontend. Questa comunicazione può aumentare la latenza e ridurre le prestazioni. Questo problema deve essere risolto attraverso meccanismi di messaggistica efficienti e strategie di condivisione dei dati. + **Duplicazione del codice**: poiché ogni micro-frontend è sviluppato in modo indipendente, esiste il rischio di duplicare il codice per funzionalità comuni o librerie condivise. Ciò può aumentare le dimensioni complessive dell'applicazione e introdurre problemi di manutenzione. + **Coordinamento e gestione**: coordinare i processi di sviluppo e implementazione su più micro-frontend può essere difficile. Garantire un controllo coerente delle versioni, gestire le dipendenze e mantenere la compatibilità tra i componenti diventa più importante in un'architettura distribuita. Stabilire una governance chiara, linee guida e pipeline automatizzate di test e implementazione è essenziale per una collaborazione e una distribuzione senza interruzioni. + **Test: testare** le architetture di micro-frontend può essere più complesso rispetto al test di frontend monolitici. Richiede uno sforzo aggiuntivo e strategie di test specializzate per eseguire test e test di integrazione tra componenti e per convalidare esperienze utente coerenti end-to-end su più microfrontend. [Prima di adottare l'approccio dei microfrontend, ti consigliamo di leggere Comprendere e implementare i microfrontend su. AWS](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html) ## Architecture In un'architettura di micro-frontend, ogni team sviluppa e implementa funzionalità in modo indipendente. L'immagine seguente mostra come più DevOps team collaborano. Il team del portale sviluppa l'applicazione shell. L'applicazione shell funge da contenitore. Recupera, visualizza e integra le applicazioni di micro-frontend pubblicate da altri team. DevOps Si utilizza AWS Amplify per pubblicare l'applicazione shell e le applicazioni micro-frontend. ![Pubblicazione di più micro-frontend su un'app shell a cui l'utente accede tramite un portale web.](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/images/pattern-img/ddf82a69-bf1b-4ad1-8e60-3dd375699936/images/cf045bf1-11ea-46d9-93cb-3c603122450d.png) Il diagramma dell'architettura mostra il seguente flusso di lavoro: 1. Il team del portale sviluppa e gestisce l'applicazione shell. L'applicazione shell orchestra l'integrazione e il rendering dei micro-frontend per comporre l'intero portale. 1. I team A e B sviluppano e gestiscono uno o più micro-frontend o funzionalità integrate nel portale. Ogni team può lavorare in modo indipendente sui rispettivi micro-frontend. 1. L'utente finale si autentica utilizzando Amazon Cognito. 1. L'utente finale accede al portale e l'applicazione shell viene caricata. Mentre l'utente naviga, l'applicazione shell si occupa del routing e recupera il micro-frontend richiesto, caricando il relativo pacchetto. ## Tools (Strumenti) **Servizi AWS** + [AWS Amplify](https://docs.amplify.aws/angular/start/)è un insieme di strumenti e funzionalità appositamente progettati che aiutano gli sviluppatori web e mobili di frontend a creare rapidamente applicazioni complete su. AWS In questo modello, si utilizza la CLI Amplify per distribuire le applicazioni micro-frontend Amplify. + [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) è uno strumento open source che consente di interagire tramite comandi nella shell della riga di comando. Servizi AWS **Altri strumenti** + [@angular -architects/module-federation](https://github.com/angular-architects/module-federation-plugin) è un plugin che integra Angular con Module Federation. + [Angular](https://angular.dev/overview) è un framework di applicazioni web open source per la creazione di applicazioni a pagina singola moderne, scalabili e testabili. Segue un'architettura modulare e basata su componenti che promuove il riutilizzo e la manutenzione del codice. + [Node.js](https://nodejs.org/en/docs/) è un ambiente di JavaScript runtime basato sugli eventi progettato per la creazione di applicazioni di rete scalabili. + [npm](https://docs.npmjs.com/about-npm) è un registro software che viene eseguito in un ambiente Node.js e viene utilizzato per condividere o prendere in prestito pacchetti e gestire la distribuzione di pacchetti privati. + [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/) ti aiuta a caricare codice compilato e distribuito in modo indipendente, come micro-frontend o plugin, in un'applicazione. **Archivio di codice** Il codice per questo pattern è disponibile nel [portale Micro-frontend utilizzando il repository Angular e Module Federation](https://github.com/aws-samples/angular-module-federation-mfe). GitHub Questo repository contiene le due cartelle seguenti: + `shell-app`contiene il codice per l'applicazione shell. + `feature1-app`contiene un esempio di micro-frontend. L'applicazione shell recupera questo micro-frontend e lo visualizza come pagina all'interno dell'applicazione del portale. ## Best practice Le architetture Micro-frontend offrono numerosi vantaggi, ma introducono anche complessità. Di seguito sono riportate alcune best practice per uno sviluppo fluido, codice di alta qualità e un'ottima esperienza utente: + **Pianificazione e comunicazione**: per semplificare la collaborazione, investi in pianificazione e progettazione iniziali e canali di comunicazione chiari. + **Coerenza del design**: applica uno stile visivo coerente su tutti i microfrontend utilizzando sistemi di progettazione, guide di stile e librerie di componenti. Ciò fornisce un'esperienza utente coerente e accelera lo sviluppo. + **Gestione delle dipendenze**: poiché i microfrontend si evolvono in modo indipendente, adottano contratti e strategie di controllo delle versioni standardizzati per gestire efficacemente le dipendenze e prevenire problemi di compatibilità. + **Architettura micro-frontend**: per consentire lo sviluppo e l'implementazione indipendenti, ogni microfrontend dovrebbe avere una responsabilità chiara e ben definita per una funzionalità incapsulata. + **Integrazione e comunicazione**: per facilitare l'integrazione e ridurre al minimo i conflitti, definisci contratti e protocolli di comunicazione chiari tra i microfrontend, inclusi eventi e modelli di dati condivisi. APIs + **Test e garanzia della qualità**: implementa l'automazione dei test e le pipeline di integrazione continua per i microfrontend. Ciò migliora la qualità generale, riduce gli sforzi di test manuali e convalida la funzionalità tra le interazioni di microfrontend. + **Ottimizzazione delle prestazioni**: monitora**** continuamente le metriche delle prestazioni e monitora le dipendenze tra i micro-frontend. Questo aiuta a identificare i punti deboli e a mantenere prestazioni ottimali delle applicazioni. A tale scopo, utilizzate strumenti di monitoraggio delle prestazioni e analisi delle dipendenze. + **Esperienza degli** sviluppatori: concentrati sull'esperienza degli sviluppatori fornendo documentazione, strumenti ed esempi chiari. Questo ti aiuta a semplificare lo sviluppo e ad integrare nuovi membri del team. ## Epiche ### Crea l'applicazione shell | Operazione | Description | Competenze richieste | | --- | --- | --- | | Crea l'applicazione shell. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | Installa il plugin . | Nella CLI di Angular, inserisci il seguente comando per installare il plugin [@angular -architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation):
ng add @angular-architects/module-federation --project shell --port 4200
| Sviluppatore di app | | Aggiungi l'URL del micro-frontend come variabile di ambiente. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | Definisci il routing. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | `mfe1`Dichiara il modulo. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | Prepara il precaricamento per il micro-frontend. | Il precaricamento del microfrontend aiuta il webpack a negoziare correttamente le librerie e i pacchetti condivisi.[See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | Modifica il contenuto HTML. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | ### Crea l'applicazione micro-frontend | Operazione | Description | Competenze richieste | | --- | --- | --- | | Crea il micro-frontend. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | Installa il plugin . | Immettete il seguente comando per installare il plugin @angular -architects/module-federation:
ng add @angular-architects/module-federation --project mfe1 --port 5000
| Sviluppatore di app | | Crea un modulo e un componente. | Immettete i seguenti comandi per creare un modulo e un componente ed esportarli come modulo di immissione remota:
ng g module mfe1 --routing
ng g c mfe1
| Sviluppatore di app | | Imposta il percorso di routing predefinito. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | `mfe1`Aggiungi il percorso. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | Modifica **il** file webpack.config.js. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | Modifica il contenuto HTML. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | ### Esegui le applicazioni localmente | Operazione | Description | Competenze richieste | | --- | --- | --- | | Esegui l'`mfe1`applicazione. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | Esegui l'applicazione shell. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | ### Effettua il refactoring dell'applicazione shell per gestire un errore di caricamento del micro-frontend | Operazione | Description | Competenze richieste | | --- | --- | --- | | Crea un modulo e un componente. | Nella cartella principale dell'applicazione shell, immettete i seguenti comandi per creare un modulo e un componente per una pagina di errore:
ng g module error-page --routing
ng g c error-page
| Sviluppatore di app | | Modifica il contenuto HTML. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | Imposta il percorso di routing predefinito. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | Crea una funzione per caricare i micro-frontend. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | | Verifica la gestione degli errori. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | ### Distribuisci le applicazioni utilizzando AWS Amplify | Operazione | Description | Competenze richieste | | --- | --- | --- | | Implementa il micro-frontend. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app, AWS DevOps | | Distribuisci l'applicazione shell. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore dell'app, proprietario dell'app | | Abilita CORS. | Poiché le applicazioni shell e microfrontend sono ospitate in modo indipendente su domini diversi, è necessario abilitare la condivisione delle risorse tra le origini (CORS) sul microfrontend. Ciò consente all'applicazione shell di caricare il contenuto da un'origine diversa. Per abilitare CORS, aggiungete intestazioni personalizzate.[See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app, AWS DevOps | | Crea una regola di riscrittura sull'applicazione shell. | L'applicazione Angular shell è configurata per utilizzare il HTML5 routing. Se l'utente esegue un aggiornamento completo, Amplify tenta di caricare una pagina dall'URL corrente. Ciò genera un errore 403. Per evitare ciò, aggiungi una regola di riscrittura nella console Amplify.
Per creare la regola di riscrittura, segui questi passaggi:[See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app, AWS DevOps | | Prova il portale web. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Sviluppatore di app | ### Eseguire la pulizia delle risorse | Operazione | Description | Competenze richieste | | --- | --- | --- | | Eliminare le applicazioni. | Se non avete più bisogno delle applicazioni shell e micro-frontend, cancellatele. Questo aiuta a evitare addebiti per risorse che non utilizzate.[See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Informazioni generali su AWS | ## risoluzione dei problemi | Problema | Soluzione | | --- | --- | | Nessun AWS profilo disponibile durante l'esecuzione del `amplify init` comando | Se non hai un AWS profilo configurato, puoi comunque procedere con il `amplify init` comando. Tuttavia, è necessario selezionare l'`AWS access keys`opzione quando viene richiesto il metodo di autenticazione. Tieni a disposizione la chiave di AWS accesso e la chiave segreta.
In alternativa, è possibile configurare un profilo denominato per AWS CLI. Per istruzioni, consulta [Impostazioni dei file di configurazione e credenziali](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html) nella AWS CLI documentazione. | | Errore durante il caricamento delle voci remote | Se riscontrate un errore durante il caricamento delle voci remote nel file **main.ts** dell'applicazione shell, assicuratevi che la `environment.mfe1URL` variabile sia impostata correttamente. Il valore di questa variabile deve essere l'URL del micro-frontend. | | Errore 404 durante l'accesso al micro-frontend | Se ricevi un errore 404 quando provi ad accedere al micro-frontend locale, ad esempio all'indirizzo`http://localhost:4200/mfe1`, controlla quanto segue:[See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | ## Informazioni aggiuntive **AWS documentazione** + [Comprensione e implementazione dei microfrontend su AWS(Prescriptive Guidance](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html))AWS + CLI [Amplify](https://docs.amplify.aws/gen1/angular/tools/cli/) (documentazione Amplify) + [Amplify Hosting (documentazione Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)) **Altri riferimenti** + [Federazione dei moduli](https://webpack.js.org/concepts/module-federation/) + [Node.js](https://nodejs.org/en/) + [Angolare](https://angular.io/) + [@angular -architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation)