← Cloudflare Workers / workers

Static Assets

Statické assets (HTML, CSS, obrázky a další soubory) můžete nahrát jako součást svého Workeru a Cloudflare se postará o jejich ukládání do mezipaměti a doručování webovým prohlížečům.

Začít z CLI - Vytvořte kostru React SPA s API Workerem a použijte Cloudflare Vite plugin.

npm create cloudflare@latest -- my-react-app --framework=react

Nebo jen nasaďte na Cloudflare

Zjistěte více o podporovaných frameworcích na Workers.

Když nasadíte projekt, Cloudflare v rámci jedné operace nasadí jak kód Workeru, tak statické prostředky. Toto nasazení funguje jako těsně integrovaná „jednotka“ běžící napříč sítí Cloudflare, která spojuje hosting statických souborů, vlastní logiku a globální ukládání do mezipaměti.

adresář assets zadaný ve vašem Konfigurační soubor Wrangler je pro tento návrh klíčová. Během nasazení Wrangler automaticky nahraje soubory z tohoto adresáře do infrastruktury Cloudflare. Po nasazení se požadavky na tato aktiva efektivně směrují do lokalit nejbližších vašim uživatelům.

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "my-spa",
  "main": "src/index.js",
  // Set this to today's date
  "compatibility_date": "2026-08-28",
  "assets": {
    "directory": "./dist",
    "binding": "ASSETS"
  }
}

"$schema" = "./node_modules/wrangler/config-schema.json"
name = "my-spa"
main = "src/index.js"
# Set this to today's date
compatibility_date = "2026-08-28"

[assets]
directory = "./dist"
binding = "ASSETS"

Přidáním vazba assets, assety můžete přímo načítat a poskytovat v kódu svého Workeru.

// index.js

export default {
	async fetch(request, env) {
		const url = new URL(request.url);

		if (url.pathname.startsWith("/api/")) {
			return new Response(JSON.stringify({ name: "Cloudflare" }), {
				headers: { "Content-Type": "application/json" },
			});
		}

		return env.ASSETS.fetch(request);
	},
};

from workers import WorkerEntrypoint, Response
from urllib.parse import urlparse

class Default(WorkerEntrypoint):
	async def fetch(self, request):
		# Example of serving static assets
		url = urlparse(request.url)
		if url.path.startswith("/api/):
			return Response.json({"name": "Cloudflare"})

		return await self.env.ASSETS.fetch(request)

Ve výchozím nastavení platí, že pokud požadovaná URL adresa odpovídá souboru v adresáři statických assetů, tento soubor se odešle přímo, aniž by se spustil kód Workeru. Pokud odpovídající asset nenajde a je k dispozici skript Workeru, požadavek zpracuje Worker. Worker může vrátit odpověď, nebo se znovu vrátit ke statickým assetům pomocí vazba assets (např. env.ASSETS.fetch(request)). Pokud skript Workeru chybí, 404 Not Found odpověď se vrátí.

Výchozí chování pro požadavky, které neodpovídají žádnému statickému souboru, lze změnit nastavením not_found_handling možnost v části assets ve vašem konfiguračním souboru Wrangler:

• not_found_handling = "single-page-application": Nastaví, aby vaše aplikace vracela 200 OK odpověď s index.html pro požadavky, které neodpovídají žádnému statickému aktivu. Použijte to, pokud máte Single Page Application. Doporučujeme to kombinovat se selektivním směrováním pomocí run_worker_first pro pokročilé řízení směrování.
• not_found_handling = "404-page": Nastaví, aby vaše aplikace vracela 404 Not Found odpověď s nejbližším 404.html pro požadavky, které neodpovídají žádnému statickému aktivu.

{
  "assets": {
    "directory": "./dist",
    "not_found_handling": "single-page-application"
  }
}

[assets]
directory = "./dist"
not_found_handling = "single-page-application"

Pokud chcete, aby se kód Workeru spustil ještě před doručením statických souborů, můžete použít run_worker_first možnost. Lze ji nastavit na true k vyvolání skriptu Workeru pro všechny požadavky, nebo nakonfigurováno jako pole vzorů tras pro výběrové směrování s prioritou skriptu Workeru:

Vyvolání skriptu Workeru na konkrétních cestách:

{
	"name": "my-spa-worker",
	// Set this to today's date
	"compatibility_date": "2026-08-28",
	"main": "./src/index.ts",
	"assets": {
		"directory": "./dist/",
		"not_found_handling": "single-page-application",
		"binding": "ASSETS",
		"run_worker_first": ["/api/*", "!/api/docs/*"]
	}
}

name = "my-spa-worker"
# Set this to today's date
compatibility_date = "2026-08-28"
main = "./src/index.ts"

[assets]
directory = "./dist/"
not_found_handling = "single-page-application"
binding = "ASSETS"
run_worker_first = [ "/api/*", "!/api/docs/*" ]

Pokročilejší vzor najdete v shellu SPA s bootstrap daty, který pomocí HTMLRewriter vkládá předem načtená data z API do HTML streamu.

Cloudflare poskytuje automatické ukládání statických assetů do cache v rámci celé své sítě, což zajišťuje rychlé doručení uživatelům po celém světě. Když je statický asset požadován, automaticky se uloží do cache pro budoucí požadavky.

• První požadavek: Když je asset vyžádán poprvé, načte se z úložiště a uloží se do mezipaměti v nejbližší lokalitě Cloudflare.

• Následující požadavky: Pokud požadavek na stejné aktivum dorazí do datacentra, které jej nemá v cache, systém tiered caching umožňuje jeho načtení z blízké cache namísto opětovného přístupu do úložiště. Zlepšuje se tím poměr zásahů v cache, snižuje se latence a omezují se zbytečné dotazy na origin server.