React Academy · Oppitunti

MFE:iden itsenäinen julkaisu ja CI-putket

Määrittäkää erilliset CI/CD-putket, jotta kukin micro-frontend voidaan julkaista toisista riippumatta.

Oppitunti 4/413 vaihetta

MFE:iden itsenäinen julkaisu ja CI-putket on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tavoite: itsenäinen julkaisu

Kunkin mikrofrontendin tulee voida julkaista itsenäisesti ilman muiden tiimien koordinointia. Tämä edellyttää erillisiä repositorioita (tai Nx:ää/Turborepoa), erillisiä CI-putkia ja erillistä isännöintiä.

Repositoriostrategiat

Kaksi lähestymistapaa: Polyrepo (yksi repositorio kutakin MFE:tä kohti, aidosti itsenäinen) ja Monorepo (kaikki MFE:t yhdessä repositoriossa, jaetut työkalut ja muutoksiin perustuva CI). Monorepo on usein helpompi lähtökohta.

Remote Entryn URL-strategia

Kukin MFE tarjoaa tiedoston remoteEntry.js ennustettavassa URL-osoitteessa. Julkaiskaa se versioituun polkuun tai käyttäkää manifest-tiedostoa dynaamiseen löytämiseen.

// 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' }

GitHub Actions -putki remotelle

Tyypillinen mikrofrontendin CI-putki sisältää testauksen, koonnin, tiedostojen lataamisen CDN:ään ja haluttaessa hostin ilmoittamisen manifestin päivittämistä varten.

# .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/ --delete

Ympäristökohtaiset remoten URL-osoitteet

Käyttäkää ympäristömuuttujia hostin webpack-määrityksessä tai manifestissa ohjaamaan staging- ja tuotantoympäristöjen remoteihin.

// 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 monorepoissa

Nx-monorepossa nx affected kokoaa ja julkaisee vain muuttuneet MFE:t, ei niitä kaikkia — näin CI-aikaa säästyy.

# Only build MFEs affected by the current PR
npx nx affected:build --base=origin/main
npx nx affected:test --base=origin/main

Sopimustestaus

Kun remote muuttaa tarjotun moduulin rajapintaa, kuluttajat rikkoutuvat. Sopimustestaus (Pact) varmistaa ennen julkaisua, että tuottaja ja kuluttaja ovat yhtä mieltä rajapinnasta.

Canary-julkaisut

Julkaiskaa remoten uusi versio ensin pienelle osalle käyttäjistä. Seuratkaa virhemääriä ennen julkaisun laajentamista kaikille käyttäjille — näin rikkovien muutosten vaikutusalue pienenee.

Palautusstrategia

Säilyttäkää remoten edellisen version remoteEntry.js CDN:ssä. Manifestin päivittäminen osoittamaan takaisin vanhaan versioon riittää palautukseen.

// Rollback: update manifest to previous version
await updateManifest({ products: 'https://cdn/products/1.1.0/remoteEntry.js' });

Remote Entry -tiedostojen CDN-välimuisti

Asettakaa tiedostolle remoteEntry.js lyhyt TTL (tai poistakaa välimuisti käytöstä), jotta hostit saavat aina uusimman version. Käyttäkää versioiduissa chunk-tiedostoissa pitkiä TTL-arvoja.

# CloudFront cache behavior:
# remoteEntry.js → Cache-Control: no-cache, max-age=0
# *.chunk.js     → Cache-Control: max-age=31536000, immutable

Julkaisun jälkeiset savutestit

Suorittakaa jokaisen julkaisun jälkeen minimaalinen Playwright-savutesti varmistaaksenne, että remote latautuu ja hahmontuu oikein shell-sovelluksen yhteydessä.

Pikatarkistus

Mikä on versioidun manifest-tiedoston keskeinen etu remotejen URL-osoitteissa verrattuna niiden kovakoodaamiseen hostin webpack-määritykseen?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Jokaisella MFE:llä on oma CI-putkensa: testaus → koonti → lataus CDN:ään. Käyttäkää versioituja tai manifest-pohjaisia remote-URL-osoitteita palautusmahdollisuuden varmistamiseksi. Asettakaa tiedostolle remoteEntry.js lyhyt välimuistin TTL, jotta uusin versio otetaan käyttöön heti. Käyttäkää Nx-monorepoissa komentoa nx affected vain muuttuneiden MFE:iden julkaisemiseen.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”MFE:iden itsenäinen julkaisu ja CI-putket” ilmainen?

Kyllä – oppitunnin ”MFE:iden itsenäinen julkaisu ja CI-putket” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”MFE:iden itsenäinen julkaisu ja CI-putket”?

Määrittäkää erilliset CI/CD-putket, jotta kukin micro-frontend voidaan julkaista toisista riippumatta. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”MFE:iden itsenäinen julkaisu ja CI-putket”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Micro-frontendien käsitteet ja kompromissit
Module Federation Webpack 5:llä
Jaettu tila ja reititys MFE:iden välillä
MFE:iden itsenäinen julkaisu ja CI-putket

← Takaisin: React Academy