← Cloudflare Workers / workers / framework-guides / web-apps

Mikrofrontendy

Mikrofrontendy umožňují rozdělit jednu aplikaci na menší, samostatně nasaditelné jednotky, které se vykreslují jako jeden ucelený celek. Různé týmy tak mohou i s odlišnými technologiemi každý mikrofrontend samostatně vyvíjet, testovat a nasazovat.

Mikrofrontendy použijte, když chcete:

• Umožněte více týmům nasazovat nezávisle na sobě bez nutnosti koordinovat vydání
• Postupně migrujte z monolitu na distribuovanou architekturu
• Vytvářejte víceframeworkové aplikace (například Astro, Remix a Next.js v jedné aplikaci)

Vytvořte microfrontendový projekt:

Tato šablona automaticky vytvoří router worker s předkonfigurovanou routovací logikou a umožní vám nastavit Service bindings k Workerům, které jste již nasadili do svého účtu Cloudflare. Kód nebo tato šablona jsou k dispozici na GitHubu na adrese cloudflare/templates ↗.

graph LR
    A[Browser Request] --> B[Router Worker]
    B -->|Service Binding| C[Microfrontend A]
    B -->|Service Binding| D[Microfrontend B]
    B -->|Service Binding| E[Microfrontend C]

Router worker:

1. Analyzuje cestu příchozího požadavku
2. Porovná ho s nakonfigurovanými trasami
3. Přeposílá požadavek na příslušný mikrofrontend prostřednictvím service bindingu
4. Přepisuje HTML, CSS a hlavičky, aby se zajistilo správné načítání assetů
5. Vrátí odpověď prohlížeči

Každý mikrofrontend může být:

• Aplikace postavená na plnohodnotném frameworku (Next.js, SvelteKit, Astro atd.)
• Statický web s Workers Static Assets
• Vytvořeno s různými frameworky a technologiemi

Router worker používá ROUTES proměnná prostředí pro určení, který mikrofrontend obsluhuje jednotlivé cesty. Trasy se porovnávají podle specifičnosti, přičemž delší cesty mají přednost.

Příklad ROUTES konfigurace:

{
	"routes": [
		{ "path": "/app-a", "binding": "MICROFRONTEND_A", "preload": true },
		{ "path": "/app-b", "binding": "MICROFRONTEND_B", "preload": true },
		{ "path": "/", "binding": "MICROFRONTEND_HOME" }
	],
	"smoothTransitions": true
}

Každá route vyžaduje:

• path: Cesta připojení pro microfrontend (musí se lišit od ostatních tras)
• binding: Název vazby na službu ve vašem Konfigurační soubor Wrangler
• preload (volitelné): určuje, zda tento mikrofrontend přednačíst pro rychlejší navigaci

Když přijde požadavek na /app-a/dashboard, router:

1. Přiřadí ho k /app-a trasa
2. Přeposílá požadavek na MICROFRONTEND_A
3. Odstraní /app-a prefix, takže microfrontend obdrží /dashboard

Router obsahuje logiku pro porovnávání cest, která podporuje:

// Static paths
{ "path": "/dashboard" }

// Dynamic parameters
{ "path": "/users/:id" }

// Wildcard matching (zero or more segments)
{ "path": "/docs/:path*" }

// Required segments (one or more segments)
{ "path": "/api/:path+" }

Router worker používá HTMLRewriter pro automatické přepsání atributů HTML tak, aby obsahovaly předponu cesty připojení, což zajistí, že se assety načtou ze správného umístění.

Když se mikrofrontend připojený na /app-a vrací HTML:

<link rel="stylesheet" href="/assets/styles.css" />
<script src="/assets/app.js"></script>
<img src="/static/logo.png" />

Router jej přepíše na:

<link rel="stylesheet" href="/app-a/assets/styles.css" />
<script src="/app-a/assets/app.js"></script>
<img src="/app-a/static/logo.png" />

Rewriter zpracovává tyto atributy napříč všemi HTML elementy:

• href, src, poster, action, srcset
• data-* atributy jako data-src, data-href, data-background
• Atributy specifické pro framework, například astro-component-url

Router přepisuje pouze cesty, které začínají nakonfigurovanými předponami assetů, aby nedošlo k narušení externích URL adres:

// Default asset prefixes
const DEFAULT_ASSET_PREFIXES = [
	"/assets/",
	"/static/",
	"/build/",
	"/_astro/",
	"/fonts/",
];

Většina frameworků funguje s výchozími prefixy. U frameworků s jiným výstupem sestavení (například Next.js, který používá /_next/), můžete nakonfigurovat vlastní předpony pomocí ASSET_PREFIXES proměnná prostředí:

["/_next/", "/public/"]

Router také přepisuje soubory CSS, aby zajistil url() odkazy fungovaly správně. Když je mikrofrontend připojen na /app-a vrací CSS:

.hero {
	background: url(/assets/hero.jpg);
}

.icon {
	background: url("/static/icon.svg");
}

Router jej přepíše na:

.hero {
	background: url(/app-a/assets/hero.jpg);
}

.icon {
	background: url("/app-a/static/icon.svg");
}

Router také zpracovává:

• Přesměrovací hlavičky: Přepíše Location hlavičky tak, aby obsahovaly cestu připojení
• Cesty cookies: Aktualizuje Set-Cookie hlavičky tak, aby omezily platnost cookies na cestu připojení

Když preload: true je nastaveno na statické mount route, router tyto trasy automaticky přednačítá, aby umožnil rychlejší navigaci. Router používá optimalizace specifická pro prohlížeč pro zajištění nejlepšího výkonu pro každý prohlížeč:

U prohlížečů založených na Chromiu router používá Speculation Rules API - moderní mechanismus prefetchingu nativní pro prohlížeč:

• Vkládá <script type="speculationrules"> do <head> element
• Prohlížeč řeší prefetching automaticky s optimální správou priorit
• Respektuje uživatelská nastavení (režim šetření baterie, režim šetření dat)
• Pro rychlejší přístup používá cache v paměti pro každý dokument
• Není blokováno hlavičkami Cache-Control
• Efektivnější než načítání založené na JavaScriptu

Příklad vložených Speculation Rules:

{
	"prefetch": [
		{
			"urls": ["/app1", "/app2", "/dashboard"]
		}
	]
}

Plynulé přechody mezi mikrofrontendy můžete povolit pomocí View Transitions API ↗.

Chcete-li zapnout plynulé přechody, nastavte "smoothTransitions": true ve vašem ROUTES konfigurace:

{
	"routes": [
		{ "path": "/app-a", "binding": "MICROFRONTEND_A" },
		{ "path": "/app-b", "binding": "MICROFRONTEND_B" }
	],
	"smoothTransitions": true
}

Router automaticky vkládá CSS do odpovědí HTML:

@supports (view-transition-name: none) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.3s;
		animation-timing-function: ease-in-out;
	}
	main {
		view-transition-name: main-content;
	}
	nav {
		view-transition-name: navigation;
	}
}

Tato funkce funguje pouze v prohlížečích, které podporují View Transitions API. Prohlížeče bez této podpory budou navigovat běžným způsobem bez animací.

Chcete-li po počátečním nastavení přidat do aplikace nový microfrontend:

1. Vytvoření a nasazení nového mikrofrontend workeru

   Nasaďte svůj nový mikrofrontend jako samostatný Worker. Může to být aplikace ve frameworku (Next.js, Astro atd.) nebo statický web s Workers Static Assets.

2. Přidejte service binding v konfiguračním souboru Wrangler vašeho routeru

   {
     "$schema": "./node_modules/wrangler/config-schema.json",
     "services": [
       {
         "binding": "MICROFRONTEND_C",
         "service": "my-new-microfrontend"
       }
     ]
   }

   [[services]]
   binding = "MICROFRONTEND_C"
   service = "my-new-microfrontend"

3. Aktualizujte ROUTES proměnná prostředí

   Přidejte svou novou trasu do ROUTES konfigurace:

   {
   	"routes": [
   		{ "path": "/app-a", "binding": "MICROFRONTEND_A", "preload": true },
   		{ "path": "/app-b", "binding": "MICROFRONTEND_B", "preload": true },
   		{ "path": "/app-c", "binding": "MICROFRONTEND_C", "preload": true },
   		{ "path": "/", "binding": "MICROFRONTEND_HOME" }
   	]
   }

4. Znovu nasaďte router worker

   npx wrangler deploy

Váš nový mikrofrontend je nyní dostupný na nakonfigurované cestě (například /app-c).

Při vývoji můžete svou architekturu microfrontendu testovat lokálně pomocí podpory service bindings ve Wrangleru. Router Worker spusťte lokálně pomocí wrangler dev, a poté v samostatných terminálech spusťte jednotlivé microfrontendy.

Pokud potřebujete pracovat pouze na jednom z mikrofrontendů, ostatní můžete spouštět vzdáleně pomocí vzdálené bindings, aniž byste potřebovali přístup ke zdrojovému kódu nebo museli spouštět místní vývojový server.

Pro každý mikrofrontend, který chcete při lokálním vývoji spouštět vzdáleně, nakonfigurujte jeho service binding s příznakem remote:

{
"services": [
	{
	"binding": "<BINDING_NAME>",
	"service": "<WORKER_NAME>",
	"remote": true
	}
]
}

[[services]]
binding = "<BINDING_NAME>"
service = "<WORKER_NAME>"
remote = true

Každý mikrofrontend lze nasadit nezávisle, bez nutnosti znovu nasazovat router nebo ostatní mikrofrontendy. Díky tomu mohou týmy:

• Nasazujte aktualizace podle vlastního harmonogramu
• Vraťte zpět jednotlivé mikrofrontendy, aniž byste ovlivnili ostatní
• Testujte a vydávejte funkce nezávisle na sobě

Když nasadíte microfrontend worker, router automaticky směruje požadavky na nejnovější verzi přes service binding. Změny routeru nejsou potřeba, pokud nepřidáváte nové trasy nebo neaktualizujete ROUTES konfigurace.

Chcete-li nasadit do produkce, můžete použít vlastní domény pro váš router worker a nakonfigurujte Workers Builds pro průběžné nasazování z vašeho Git repozitáře.