Deployment indipendente e pipeline CI per MFE
Configuri pipeline CI/CD separate, così ogni micro-frontend viene distribuito senza coordinamento.
Deployment indipendente e pipeline CI per MFE è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
L'obiettivo: la distribuzione indipendente
Ogni microfrontend dovrebbe essere distribuito in modo indipendente, senza coordinamento da parte degli altri team. Sono necessari repository separati (oppure Nx/Turborepo), pipeline CI separate e hosting separato.
Strategie per i repository
Esistono due approcci: Polyrepo (un repository per MFE, con indipendenza reale) e Monorepo (tutti gli MFE in un unico repository, con strumenti condivisi e CI basata sui progetti modificati). Spesso il monorepo è più semplice per iniziare.
Strategia per l'URL dell'entry del remote
Ogni MFE espone un remoteEntry.js a un URL prevedibile. Distribuitelo in un percorso versionato oppure utilizzate un file manifest per la rilevazione dinamica.
// Versioned URL strategy:
https://cdn.example.com/products/1.2.3/remoteEntry.js
// Latest URL strategy (simpler, no host update needed):
https://cdn.example.com/products/latest/remoteEntry.js
// Dynamic manifest:
https://cdn.example.com/manifest.json
// { products: 'https://cdn.example.com/products/1.2.3/remoteEntry.js' }Pipeline GitHub Actions per un remote
Una tipica pipeline CI per un microfrontend prevede: test, build, caricamento su CDN e, facoltativamente, una notifica all'host per aggiornare il manifest.
# .github/workflows/deploy.yml
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci
- run: npm test
- run: npm run build
- uses: aws-actions/configure-aws-credentials@v4
with:
aws-access-key-id: ${{ secrets.AWS_KEY }}
aws-secret-access-key: ${{ secrets.AWS_SECRET }}
aws-region: us-east-1
- run: aws s3 sync dist/ s3://cdn-bucket/products/ --deleteURL dei remote specifici per l'ambiente
Utilizzate variabili d'ambiente nella configurazione webpack dell'host o nel manifest per indicare i remote di staging e quelli di produzione.
// Host webpack.config.js
const PRODUCTS_URL = process.env.PRODUCTS_REMOTE_URL ?? 'https://cdn.example.com/products/latest/remoteEntry.js';
new ModuleFederationPlugin({
remotes: { products: `products@${PRODUCTS_URL}` },
});Nx affected per i monorepo
In un monorepo Nx, nx affected esegue la build e la distribuzione solo degli MFE modificati, non di tutti, riducendo il tempo della CI.
# Only build MFEs affected by the current PR
npx nx affected:build --base=origin/main
npx nx affected:test --base=origin/mainContract testing
Quando un remote modifica l'API di un modulo esposto, i consumer si interrompono. Il contract testing (Pact) verifica che produttore e consumer concordino sull'interfaccia prima della distribuzione.
Distribuzioni canary
Distribuite inizialmente la nuova versione di un remote a una piccola percentuale di utenti. Monitorate il tasso di errori prima di estenderla a tutti gli utenti: in questo modo si riduce l'impatto delle modifiche incompatibili.
Strategia di rollback
Conservate sulla CDN il file remoteEntry.js della versione precedente del remote. Per eseguire il rollback è sufficiente aggiornare il manifest in modo che punti nuovamente alla versione precedente.
// Rollback: update manifest to previous version
await updateManifest({ products: 'https://cdn/products/1.1.0/remoteEntry.js' });Caching CDN per gli entry del remote
Impostate un TTL breve (o disabilitate la cache) per remoteEntry.js, così gli host acquisiscono sempre la versione più recente. Utilizzate TTL lunghi per i file chunk versionati.
# CloudFront cache behavior:
# remoteEntry.js → Cache-Control: no-cache, max-age=0
# *.chunk.js → Cache-Control: max-age=31536000, immutableSmoke test dopo la distribuzione
Eseguite uno smoke test Playwright minimo dopo ogni distribuzione per verificare che il remote venga caricato e visualizzato correttamente nel contesto della shell.
Controllo rapido
Qual è il principale vantaggio di utilizzare un file manifest versionato per gli URL dei remote invece di codificarli nella configurazione webpack dell'host?
Riepilogo
Ogni MFE ha la propria pipeline CI: test → build → caricamento su CDN. Utilizzate URL dei remote versionati o basati su manifest per poter eseguire il rollback. Impostate un TTL breve per la cache di remoteEntry.js per acquisire immediatamente la versione aggiornata. Nei monorepo Nx, utilizzate nx affected per distribuire solo gli MFE modificati.
Impara React con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 88
- Lezioni
- 324
Domande Frequenti
La lezione «Deployment indipendente e pipeline CI per MFE» è gratuita?
Sì — il testo completo di «Deployment indipendente e pipeline CI per MFE» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Deployment indipendente e pipeline CI per MFE»?
Configuri pipeline CI/CD separate, così ogni micro-frontend viene distribuito senza coordinamento. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Deployment indipendente e pipeline CI per MFE»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Concetti e compromessi dei micro-frontend
- Module Federation con Webpack 5
- Stato condiviso e routing tra MFE
- Deployment indipendente e pipeline CI per MFE