Astro

1. Vytvořte nový projekt pomocí create-cloudflare CLI (C3).

   npmyarnpnpm

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

   Co se děje v zákulisí?

   Když spustíte tento příkaz, C3 vytvoří nový adresář projektu, zahájí Oficiální nástroj Astro pro nastavení ↗, a nakonfiguruje projekt pro Cloudflare. Poté nabídne možnost okamžitě nasadit vaši aplikaci na Cloudflare.

2. Vývoj lokálně.

   Po vytvoření projektu spusťte v adresáři projektu následující příkaz, který spustí lokální vývojový server.

   npmyarnpnpm

   npm run dev

3. Nasaďte svůj projekt.

   Svůj projekt můžete nasadit do *.workers.dev subdoména nebo vlastní doména z vašeho lokálního počítače nebo libovolného systému CI/CD (včetně Workers Builds). Sestavení a nasazení proveďte pomocí následujícího příkazu. Pokud používáte službu CI, nezapomeňte odpovídajícím způsobem upravit svůj "deploy command".

   npmyarnpnpm

   npm run deploy

1. Přidání konfiguračního souboru Wrangler

   V kořenovém adresáři projektu vytvořte konfigurační soubor Wrangler s následujícím obsahem:

   {
   	"name": "my-astro-app",
   	// Set this to today's date
   	"compatibility_date": "2026-08-28",
   	"assets": {
   		"directory": "./dist"
   	}
   }

   name = "my-astro-app"
   # Set this to today's date
   compatibility_date = "2026-08-28"
   
   [assets]
   directory = "./dist"

   Co dělá tato konfigurace?

   Klíčovou částí této konfigurace je assets pole, které Wrangleru říká, kde má hledat vaše statická aktiva. V tomto případě Wrangleru říkáme, aby hledal ve složce ./dist adresář. Pokud se vaše aktiva nacházejí v jiném adresáři, aktualizujte directory hodnotu podle toho. Přečtěte si o dalších možnosti konfigurace pro assets.

   Všimněte si také, že zde není žádné main pole v této konfiguraci, protože obsluhujete jen statické assety, takže pro rendering na vyžádání (SSR) není kód Workeru potřeba.

2. Vytvořte a nasaďte svůj projekt

   Svůj projekt můžete nasadit do *.workers.dev subdoména nebo vlastní doména z vašeho lokálního počítače nebo libovolného systému CI/CD (včetně Workers Builds). Sestavení a nasazení proveďte pomocí následujícího příkazu. Pokud používáte službu CI, nezapomeňte odpovídajícím způsobem upravit svůj "deploy command".

   npmyarnpnpm

   npx astro build

   npmyarnpnpm

   npx wrangler@latest deploy

1. Nainstalujte adaptér Astro Cloudflare

   npmyarnpnpm

   npx astro add cloudflare

   Co se děje v zákulisí?

   Tento příkaz nainstaluje adaptér Cloudflare a provede příslušné změny ve vašem astro.config.mjs soubor v jednom kroku. Ve výchozím nastavení se tím konfigurace výstupu sestavení nastaví na output: 'server', který ve výchozím nastavení vykresluje všechny vaše stránky na serveru. Pokud existují určité stránky, které ne nevyžadují rendrování na vyžádání (SSR), například statické stránky jako zásady ochrany osobních údajů, měli byste nastavit export const prerender = true pro danou stránku nebo trasu a předvykreslit ji. Více o možnostech konfigurace adaptéru se dozvíte v dokumentaci Astro ↗.

2. Přidejte .assetsignore soubor Vytvořte .assetsignore soubor v public/ složku a přidejte do ní následující řádky:

   .assetsignore

   _worker.js
   _routes.json

3. Přidání konfiguračního souboru Wrangler

   V kořenovém adresáři projektu vytvořte konfigurační soubor Wrangler s následujícím obsahem:

   {
   	"name": "my-astro-app",
   	"main": "./dist/_worker.js/index.js",
   	// Update to today's date
   	// Set this to today's date
   	"compatibility_date": "2026-08-28",
   	"compatibility_flags": ["nodejs_compat"],
   	"assets": {
   		"binding": "ASSETS",
   		"directory": "./dist"
   	},
   	"observability": {
   		"enabled": true
   	}
   }

   name = "my-astro-app"
   main = "./dist/_worker.js/index.js"
   # Set this to today's date
   compatibility_date = "2026-08-28"
   compatibility_flags = [ "nodejs_compat" ]
   
   [assets]
   binding = "ASSETS"
   directory = "./dist"
   
   [observability]
   enabled = true

   Co dělá tato konfigurace?

   Klíčové části této konfigurace jsou:

   • main odkazuje na vstupní bod vašeho skriptu Worker. Generuje ho adaptér Astro a pohání jím vaše stránky vykreslované na serveru.
   • assets.directory říká Wrangleru, kde má hledat statické assety. V tomto případě Wrangleru říkáme, aby se podíval do ./dist adresář. Pokud se vaše aktiva nacházejí v jiném adresáři, aktualizujte directory hodnotu podle toho.

   Přečtěte si více o Možnosti konfigurace Wrangleru a možnosti konfigurace pro assets.

4. Vytvořte a nasaďte svůj projekt

   Svůj projekt můžete nasadit do *.workers.dev subdoména nebo vlastní doména z vašeho lokálního počítače nebo libovolného systému CI/CD (včetně Workers Builds). Sestavení a nasazení proveďte pomocí následujícího příkazu. Pokud používáte službu CI, nezapomeňte odpovídajícím způsobem upravit svůj "deploy command".

   npmyarnpnpm

   npx astro build

   npmyarnpnpm

   npx wrangler@latest deploy

---
export const prerender = false;
const cart = await Astro.session?.get("cart");
---

<a href="/checkout">{cart?.length ?? 0} items</a>