← Cloudflare Pages / pages / framework-guides

Astro

Astro ↗ je komplexní webový framework pro tvorbu rychlých webů zaměřených na obsah. Astro ve výchozím nastavení vytváří weby zcela bez JavaScriptového runtime kódu.

Viz Dokumentace Astro ↗ a zjistěte více o Astro nebo získejte pomoc s projektem Astro.

V tomto průvodci vytvoříte novou aplikaci Astro a nasadíte ji pomocí Cloudflare Pages.

Chcete-li použít create-cloudflare k vytvoření nového projektu Astro spusťte následující příkaz:

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

Astro se zeptá:

1. Jaký typ projektu chcete nastavit. Vaše odpovědi neovlivní zbytek tohoto tutoriálu. Vyberte odpověď, která je pro váš projekt nejvhodnější.

2. Pokud chcete inicializovat repozitář Git. Doporučujeme vybrat No a postupujte podle tohoto průvodce, sekce Pokyny pro Git níže. Pokud vyberete Yes, nepostupujte podle níže uvedených pokynů pro Git doslovně, ale upravte si je podle svých potřeb.

create-cloudflare poté nainstaluje závislosti, mimo jiné Wrangler CLI a @astrojs/cloudflare adaptér a položí vám otázky k nastavení.

Web Astro s vykreslováním na straně serveru (SSR) můžete na Cloudflare Pages nasadit pomocí @astrojs/cloudflare adaptér ↗. Weby SSR se vykreslují pomocí Pages Functions a umožňují dynamickou funkčnost a přizpůsobení.

Přidejte @astrojs/cloudflare adaptér ↗ do vašeho projektu package.json spuštěním:

npm run astro add cloudflare

Všechny průvodce frameworky předpokládají, že již máte základní znalosti Git ↗. Pokud s Gitem začínáte, podívejte se na tento shrnutá příručka ke Gitu ↗ jak nastavit Git na svém lokálním počítači.

Pokud klonujete přes SSH, musíte vygenerujte SSH klíče ↗ na každém počítači, který používáte pro push nebo pull z GitHubu.

Viz dokumentace GitHub ↗ a Dokumentace Git ↗ s dalšími informacemi.

Vytvořte nový repozitář GitHub na repo.new ↗. Po vytvoření nového repozitáře přejděte do adresáře nově vytvořeného projektu a v terminálu spusťte následující příkazy, kterými připravíte a odešlete svou místní aplikaci na GitHub:

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Pokud používáte create-cloudflare(C3) ↗ k vytvoření nového projektu Astro nainstaluje C3 všechny závislosti, které projekt potřebuje, a vyzve vás k nasazení projektu přes CLI. Pokud jej nasadíte, web se zveřejní a získáte URL adresu nasazení.

Chcete-li nasadit svůj web do Pages:

1. V dashboardu Cloudflare přejděte na Workers & Pages stránce.

   Přejděte na Workers & Pages ↗

2. Vyberte Vytvoření aplikace.

3. Vyberte Pages kartě.

4. Vyberte Importujte existující repozitář Git.

5. Vyberte nově vytvořený repozitář GitHub a poté vyberte Zahájit nastavení.

6. V Nastavení sestavení a nasazení sekci uveďte následující informace:

Volitelně můžete přizpůsobit Název projektu pole. Ve výchozím stavu odpovídá názvu repozitáře GitHub, ale shodovat se nemusí. Název projektu hodnota se přiřadí jako váš *.pages.dev subdoména.

Po dokončení konfigurace vyberte Save and Deploy.

Uvidíte své první probíhající nasazení. Pages nainstaluje všechny závislosti a sestaví projekt podle zadání.

Cloudflare Pages při každém novém odeslaném commitu automaticky znovu sestaví váš projekt a nasadí ho.

Kromě toho budete mít přístup k náhledová nasazení, které opakují proces sestavení a nasazení pro pull requesty. Díky nim můžete náhled změn ve svém projektu zobrazit na skutečné URL adrese ještě před jejich nasazením do produkce.

Podpora lokálního runtime se konfiguruje pomocí platformProxy možnost:

import { defineConfig } from "astro/config";
import cloudflare from "@astrojs/cloudflare";

export default defineConfig({
	adapter: cloudflare({
		platformProxy: {
			enabled: true,
		},
	}),
});

A binding umožňuje vaší aplikaci komunikovat s vývojářskými produkty Cloudflare, například s KV, Durable Object, R2, a D1 ↗.

Vazby v komponentách Astro a API routes použijte pomocí context.locals z Astro Middleware ↗ pro přístup k Cloudflare runtime, který mimo jiné obsahuje prostředí Cloudflare a následně i případné vazby nastavené pro vaši aplikaci.

Příklad přístupu k KV namespace pomocí TypeScriptu najdete níže.

Nejprve musíte definovat typ Cloudflare runtime a KV úpravou env.d.ts. Ujistěte se, že jste vygenerovali runtime typy Cloudflare spuštěním wrangler types.

/// <reference types="astro/client" />

type ENV = {
	// replace `MY_KV` with your KV namespace
	MY_KV: KVNamespace;
};

// use a default runtime configuration (advanced mode).
type Runtime = import("@astrojs/cloudflare").Runtime<ENV>;
declare namespace App {
	interface Locals extends Runtime {}
}

Poté můžete k vašemu KV přistupovat z koncového bodu API následujícím způsobem:

import type { APIContext } from "astro";

export async function get({ locals }: APIContext) {
	const { MY_KV } = locals.runtime.env;

	return {
		// ...
	};
}

Kromě koncových bodů můžete bindings používat i přímo ve svých komponentách Astro:

---
const myKV = Astro.locals.runtime.env.MY_KV;
const value = await myKV.get("key");
---
<div>{value}</div>

Chcete-li se dozvědět více o runtime Astro Cloudflare, přečtěte si Přístup k Cloudflare runtime ↗ v dokumentaci Astro.

Dokončením tohoto návodu jste úspěšně nasadili svůj web Astro na Cloudflare Pages. Chcete-li začít s dalšími frameworky, podívejte se na seznam návodů pro frameworky.