Host- og fjernapplikasjoner
Lær forskjellen mellom host- og fjernapplikasjoner i et føderert oppsett, og hvilken rolle de har.
Host- og fjernapplikasjoner er en gratis leksjon i Mikrofrontend-arkitektur med Module Federation på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Mikrofrontend-arkitektur med Module Federation, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mikrofrontend-arkitektur med Module Federation inneholder totalt 4 leksjoner.
Hva er verter og remotes?
I Module Federation har applikasjoner ulike roller: noen er verter, mens andre er remotes. Tenk på det som en hovedscene (verten) som inviterer gjesteartister (remotes) til å fremføre numrene sine.
Dette oppsettet gjør det mulig å dele opp store applikasjoner i mindre deler som kan utvikles og rulles ut uavhengig av hverandre.
Verten: hovedapplikasjonen
Vertsapplikasjonen er hovedapplikasjonen som starter først. Hovedoppgaven er å konsumere (eller laste inn) moduler som eksponeres av andre applikasjoner, kalt remotes.
Den fungerer omtrent som hovednettstedet som henter inn ulike widgeter eller deler fra andre tjenester.
Vertens viktigste ansvarsområder
Vertsapplikasjonen har noen viktige ansvarsområder:
- Laste inn remotes: Den forteller Webpack hvilke remote-applikasjoner som må lastes inn.
- Tilby kontekst: Den tilbyr ofte det overordnede applikasjonsskallet, rutingen og delte avhengigheter.
- Integrere moduler: Den gjengir komponenter eller bruker funksjoner som tilbys av remote-applikasjonene.
Remoten: en delt del
En remote-applikasjon er en separat og selvstendig applikasjon som eksponerer bestemte deler av koden sin for andre applikasjoner. Den kan også konsumere moduler fra andre remotes (eller til og med selv fungere som en vert!).
De eksponerte delene kan være komponenter, hjelpefunksjoner eller til og med komplette sider.
Remotens viktigste ansvarsområder
Remote-applikasjonen fokuserer på:
- Utvikle funksjonalitet: Den bygger bestemte funksjoner eller UI-komponenter uavhengig.
- Eksponere moduler: Den definerer uttrykkelig hvilke deler av kodebasen som kan deles med vertsapplikasjoner.
- Uavhengig utrulling: Den kan bygges og rulles ut uten å påvirke verten eller andre remotes, så lenge de eksponerte grensesnittene forblir konsistente.
ModuleFederationPlugin: koblingen
Webpacks ModuleFederationPlugin er det som muliggjør denne samhandlingen. Både vertsapplikasjoner og remote-applikasjoner bruker denne plugin-modulen i Webpack-konfigurasjonene sine.
Den koordinerer hvordan moduler eksponeres av remotes og konsumeres av verter, slik at de blir tilgjengelige under kjøring.
Remote: eksponere moduler
På remote-siden bruker du egenskapen exposes i konfigurasjonen av ModuleFederationPlugin.
Dette forteller Webpack hvilke filer eller moduler fra remote-applikasjonen som skal gjøres tilgjengelige for andre.
// webpack.config.js (remote app)
new ModuleFederationPlugin({
name: 'remoteApp',
exposes: {
'./Button': './src/Button.js',
'./Header': './src/Header.js'
}
})Vert: konsumere remotes
På vertssiden bruker du egenskapen remotes til å angi hvilke remote-applikasjoner du vil konsumere moduler fra.
Du oppgir et unikt navn for remoten og URL-en til entry-punktet.
// webpack.config.js (host app)
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
}
})Slik samhandler de
Når vertsapplikasjonen lastes inn, henter den filen remoteEntry.js fra den konfigurerte remote-URL-en. Denne entry-filen inneholder et manifest over alle modulene remote-applikasjonen eksponerer.
Verten kan deretter importere og bruke disse eksponerte modulene dynamisk, som om de var en del av dens egen kodebase.
Kjapp sjekk
Hvilket av alternativene nedenfor beskriver best hovedrollen til en vertsapplikasjon i et Module Federation-oppsett?
Oppsummering av vert og remote
Vi har lært om de grunnleggende rollene til vertsapplikasjoner og remote-applikasjoner i Module Federation.
- Vertsapplikasjoner er hovedintegratorene og konsumerer funksjonalitet.
- Remote-applikasjoner er uavhengige enheter som eksponerer bestemte moduler.
Det er viktig å forstå disse rollene for å kunne bygge skalerbare micro frontend-applikasjoner. Deretter skal vi se nærmere på hvordan du setter opp din første fødererte applikasjon!
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Host- og fjernapplikasjoner» gratis?
Ja – hele teksten i «Host- og fjernapplikasjoner» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Mikrofrontend-arkitektur med Module Federation-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Mikrofrontend-arkitektur med Module Federation inneholder totalt 4 leksjoner.
Hva lærer jeg i «Host- og fjernapplikasjoner»?
Lær forskjellen mellom host- og fjernapplikasjoner i et føderert oppsett, og hvilken rolle de har. Du øver på Mikrofrontend-arkitektur med Module Federation med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Mikrofrontend-arkitektur med Module Federation?
Ingen tidligere erfaring er nødvendig. Mikrofrontend-arkitektur med Module Federation på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Host- og fjernapplikasjoner»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Mikrofrontend-arkitektur med Module Federation-leksjonen?
Ja. Alle Mikrofrontend-arkitektur med Module Federation-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Repetisjon av Webpack-grunnlaget
- Introduksjon til Module Federation
- Host- og fjernapplikasjoner
- Konfigurering av delte avhengigheter