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. | 1. Nella CLI di Angular, inserisci il seguente comando:
ng new shell --routing

2. Immettete il seguente comando per accedere alla cartella del progetto:
cd shell
La struttura delle cartelle e dei progetti per le applicazioni shell e micro-frontend può essere totalmente indipendente. Possono essere gestite come applicazioni Angular indipendenti. | 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. | 1. Apri il file **environment.ts**.
2. Aggiungi `mfe1URL: 'http://localhost:5000'` all'oggetto: `environment`
export const environment = {
  production: false,
  mfe1URL: 'http://localhost:5000',
};

3. Salva e chiudi il **file environment.ts.** | Sviluppatore di app | | Definisci il routing. | 1. Apri il file **app-routing.module.ts**.
2. Nella CLI di Angular, inserisci il seguente comando per importare il `loadRemoteModule` modulo dal plugin @angular -architects/module-federation:
import { loadRemoteModule } from '@angular-architects/module-federation';

3. Imposta il percorso predefinito come segue:
{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

4. Imposta il percorso per il micro-frontend:
{
    path: 'mfe1',
    loadChildren: () => loadRemoteModule({
        type: 'module',
        remoteEntry: `${environment.mfe1URL}/remoteEntry.js`,
        exposedModule: './Module'
      })
      .then(m => m.Mfe1Module)
  },

5. Salva e chiudi il **file app-routing.module.ts**. | Sviluppatore di app | | `mfe1`Dichiara il modulo. | 1. Nella `src` cartella, crea un nuovo file denominato **decl.d.ts**.
2. **Apri il file decl.d.ts.**
3. Aggiungi quanto segue al file:
declare module 'mfe1/Module';

4. Salvate e chiudete il **file decl.d.ts.** | 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.1. **Apri il file main.ts.**
2. Sostituisci il contenuto con quanto segue:
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));

3. Salva e chiudi il **file main.ts.** | Sviluppatore di app | | Modifica il contenuto HTML. | 1. Apri il file **app.component.html.**
2. Sostituisci il contenuto con quanto segue:
Shell application is running!


3. Salvate e chiudete il **file app.component.html.** | Sviluppatore di app | ### Crea l'applicazione micro-frontend | Operazione | Description | Competenze richieste | | --- | --- | --- | | Crea il micro-frontend. | 1. Nella CLI di Angular, inserisci il seguente comando:
ng new mfe1 --routing

2. Immettete il seguente comando per accedere alla cartella del progetto:
cd mfe1
| 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. | 1. Aprire il file **mfe-routing.module.ts**.
2. Imposta il percorso predefinito come segue:
{
    path: '',
    component: Mfe1Component
  },

3. Salvate e chiudete il file **mfe-routing.module.ts**. | Sviluppatore di app | | `mfe1`Aggiungi il percorso. | 1. Apri il file **app-routing.module.ts**.
2. Imposta il percorso predefinito come segue:
{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

3. Aggiungi il seguente `mfe1` percorso:
{
    path: 'mfe1',
    loadChildren: () => 
      import('./mfe1/mfe1.module').then((m) => m.Mfe1Module),
  },

4. Salva e chiudi il **file app-routing.module.ts**. | Sviluppatore di app | | Modifica **il** file webpack.config.js. | 1. **Apri il file webpack.config.js.**
2. Modifica la `For remotes` sezione in modo che corrisponda a quanto segue:
// For remotes (please adjust)
    name: "mfe1",
    filename: "remoteEntry.js",
    exposes: {
        './Module': './src/app/mfe1/mfe1.module.ts',
    },

3. Nella `shared` sezione, aggiungi tutte le dipendenze che l'`mfe1`applicazione condivide con l'applicazione 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()
    })

4. Salvate e chiudete il file **webpack.config.js**. | Sviluppatore di app | | Modifica il contenuto HTML. | 1. Apri il file **app.component.html.**
2. Sostituisci il contenuto con quanto segue:

3. Salvate e chiudete il **file app.component.html.** | Sviluppatore di app | ### Esegui le applicazioni localmente | Operazione | Description | Competenze richieste | | --- | --- | --- | | Esegui l'`mfe1`applicazione. | 1. Inserisci il seguente comando per avviare l'`mfe1`applicazione:
npm start

2. In un browser Web, accedi`http://localhost:5000`.
3. Verifica che il micro-frontend possa essere eseguito in modo autonomo. L'`mfe1`applicazione dovrebbe renderizzare correttamente senza errori. | Sviluppatore di app | | Esegui l'applicazione shell. | 1. Immettete il seguente comando per avviare l'applicazione shell:
npm start

2. In un browser Web, accedi`http://localhost:4200/mfe1`.
3. Verifica che il `mfe1` micro-frontend sia incorporato nell'applicazione shell. L'applicazione del portale dovrebbe essere visualizzata correttamente senza errori e l'`mfe1`applicazione dovrebbe essere incorporata al suo interno. | 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. | 1. Apri il file **error-page.component.html**.
2. Sostituisci il contenuto con quanto segue:
Sorry, this page is not available.

3. Salva e chiudi il **file error-page.component.html**. | Sviluppatore di app | | Imposta il percorso di routing predefinito. | 1. Apri il file **error-page-routing.module.ts.**
2. Imposta il percorso predefinito come segue:
{
    path: '',
    component: ErrorPageComponent
  },

3. Salva e chiudi il **error-page-routingfile .module.ts.** | Sviluppatore di app | | Crea una funzione per caricare i micro-frontend. | 1. **Apri il file app-routing.module.ts.**
2. Crea la seguente funzione:
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)
    );
}

3. Modifica il `mfe1` percorso in modo che sia il seguente:
{
    path: 'mfe1',
    loadChildren: () => loadMFE(environment.mfe1URL)
},

4. Salva e chiudi il **file app-routing.module.ts**. | Sviluppatore di app | | Verifica la gestione degli errori. | 1. Se non è già in esecuzione, inserisci il seguente comando per avviare l'applicazione shell:
npm start

2. In un browser Web, accedi`http://localhost:4200/mfe1`.
3. Verifica che la pagina di errore sia visualizzata. Dovresti vedere il testo seguente:
Sorry, this page is not available.
| Sviluppatore di app | ### Distribuisci le applicazioni utilizzando AWS Amplify | Operazione | Description | Competenze richieste | | --- | --- | --- | | Implementa il micro-frontend. | 1. Nella CLI Amplify, accedi alla cartella principale dell'applicazione micro-frontend.
2. Inserisci il seguente comando per inizializzare Amplify:
amplify init

3. **Quando ti viene richiesto di inserire un nome per il tuo progetto Amplify, premi Invio.** **Questo riutilizza il nome dal file package.json.**
4. Quando ti viene richiesto di inizializzare il progetto con la configurazione precedente, inserisci. `Yes`
5. Quando vi viene richiesto di selezionare un metodo di autenticazione, scegliete. `AWS Profile`
6. Seleziona il profilo che desideri utilizzare.
7. Attendi che Amplify inizializzi il progetto. Quando questo processo è completo, riceverai un messaggio di conferma nel terminale.
8. Inserisci il seguente comando per aggiungere una categoria di hosting Amplify al micro-frontend:
amplify add hosting

9. Quando ti viene richiesto di selezionare il modulo del plugin, scegli. `Hosting with Amplify Console`
10. Quando ti viene richiesto di scegliere un tipo, scegli. `Manual deployment`
11. Installa le dipendenze npm del progetto inserendo il seguente comando:
npm install

12. Pubblica l'applicazione sulla console Amplify inserendo il seguente comando:
amplify publish -y

Una volta completata la pubblicazione, Amplify restituisce l'URL del micro-frontend.
13. Copia l’URL. È necessario questo valore per aggiornare l'applicazione shell. | Sviluppatore di app, AWS DevOps | | Distribuisci l'applicazione shell. | 1. Nella **src/app/environments**cartella, apri il file **environments.prod.ts**.
2. Sostituisci il `mfe1URL` valore con l'URL del micro-frontend distribuito:
export const environment = {  
   production: true, 
   mfe1URL: 'https://..amplifyapp.com'
 };

3. **Salva e chiudi il file environments.prod.ts.**
4. Nella CLI Amplify, accedi alla cartella principale dell'applicazione shell.
5. Inserisci il seguente comando per inizializzare Amplify:
amplify init

6. **Quando ti viene richiesto di inserire un nome per il tuo progetto Amplify, premi Invio.** **Questo riutilizza il nome dal file package.json.**
7. Quando ti viene richiesto di inizializzare il progetto con la configurazione precedente, inserisci. `Yes`
8. Quando vi viene richiesto di selezionare un metodo di autenticazione, scegliete. `AWS Profile`
9. Seleziona il profilo che desideri utilizzare.
10. Attendi che Amplify inizializzi il progetto. Quando questo processo è completo, riceverai un messaggio di conferma nel terminale.
11. Aggiungi una categoria di hosting Amplify all'applicazione shell:
amplify add hosting

12. Quando ti viene richiesto di selezionare il modulo del plugin, scegli. `Hosting with Amplify Console`
13. Quando ti viene richiesto di scegliere un tipo, scegli. `Manual deployment`
14. Installa le dipendenze npm del progetto inserendo il seguente comando:
npm install

15. Pubblica l'applicazione shell sulla console Amplify inserendo il seguente comando:
amplify publish -y

Al termine della pubblicazione, Amplify restituisce l'URL dell'applicazione shell distribuita.
16. Prendi nota dell'URL dell'applicazione shell. | 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.1. Nella CLI Amplify, accedi alla cartella principale del micro-frontend.
2. Immetti il comando seguente:
amplify configure hosting

3. Quando ti viene richiesto di configurare le impostazioni personalizzate, inserisci. `Y`
4. Accedi a Console di gestione AWS, quindi apri la console [Amplify.](https://console.aws.amazon.com/amplify/)
5. Scegli il micro-frontend.
6. Nel riquadro di navigazione, scegli **Hosting**, quindi scegli **Intestazioni personalizzate**.
7. Scegli **Modifica**.
8. Nella finestra **Modifica intestazioni personalizzate**, inserisci quanto segue:
customHeaders:
  - pattern: '*.js'
    headers:
      - key: Access-Control-Allow-Origin
        value: '*'
      - key: Access-Control-Allow-Methods
        value: 'GET, OPTIONS'
      - key: Access-Control-Allow-Headers
        value: '*'

9. Scegli **Save** (Salva).
10. Ridistribuite il micro-frontend per applicare le nuove intestazioni personalizzate. | 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:1. Nella CLI Amplify, accedi alla cartella principale dell'applicazione shell.
2. Immetti il comando seguente:
amplify configure hosting

3. Quando ti viene richiesto di configurare le impostazioni personalizzate, inserisci. `Y`
4. Apri la console [Amplify](https://console.aws.amazon.com/amplify/).
5. Scegli l'applicazione shell.
6. Nel riquadro di navigazione, scegli **Hosting**, quindi scegli **Riscritture e reindirizzamenti**.
7. **Nella pagina **Riscritture e reindirizzamenti, scegli Gestisci reindirizzamenti.****
8. **Scegli Apri editor di testo.**
9. Nell'editor JSON, inserisci il seguente reindirizzamento:
[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

10. Scegli **Save** (Salva). | Sviluppatore di app, AWS DevOps | | Prova il portale web. | 1. In un browser Web, immettete l'URL dell'applicazione shell distribuita.
2. Verificate che l'applicazione shell e il micro-frontend vengano caricati correttamente. | 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.1. Accedi a Console di gestione AWS, quindi apri la console [Amplify.](https://console.aws.amazon.com/amplify/)
2. Scegli il micro-frontend.
3. Nel riquadro di navigazione, scegli **Impostazioni app**, quindi scegli Impostazioni **generali**.
4. Scegli **Elimina app**.
5. Nella finestra di conferma, inserisci`delete`, quindi scegli **Elimina app**.
6. Ripeti questi passaggi per eliminare l'applicazione shell. | 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:+ Per l'applicazione shell, assicurati che la configurazione di routing nel file **app-routing.module.ts** sia impostata correttamente e assicurati che la funzione stia chiamando correttamente il micro-frontend. `loadRemoteModule`
+ **Per il micro-frontend, verificate che il file **webpack.config.js abbia la configurazione corretta e assicuratevi che il file remoteEntry.js sia generato correttamente.** `exposes`** | ## 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)