← Cloudflare Pages / pages / framework-guides

Nuxt

Nuxt ↗ je webový framework, který zjednodušuje a zefektivňuje vývoj založený na Vue.js.

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

create-cloudflare CLI (C3) nakonfiguruje váš web Nuxt pro Cloudflare Pages. Spuštěním následujícího příkazu v terminálu vytvoříte nový web Nuxt:

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

C3 vám položí sérii otázek k nastavení a vytvoří nový projekt s nuxi (oficiální CLI nástroj Nuxtu) ↗. C3 zároveň nainstaluje potřebné adaptéry spolu s Wrangler CLI.

Po vytvoření projektu C3 vygeneruje nový my-nuxt-app adresář pomocí výchozí šablony Nuxt, upravené tak, aby byla plně kompatibilní s Cloudflare Pages.

Při vytváření nového projektu vám C3 nabídne možnost nasadit počáteční verzi vaší aplikace pomocí Direct Upload. Aplikaci můžete kdykoli znovu nasadit spuštěním následujícího příkazu v adresáři projektu:

npm run deploy

Chcete-li nasadit projekt Nuxt bez C3, postupujte podle průvodce Nuxt Get Started ↗. Jakmile máte projekt Nuxt nastavený, zvolte buď Průvodce integrací Git nebo Průvodce Direct Upload k nasazení projektu Nuxt na Cloudflare Pages.

Kromě Direct Upload nasazení můžete projekty nasazovat prostřednictvím Integrace Git. Integrace s Gitem umožňuje propojit repozitář GitHub nebo GitLab s vaší aplikací Pages, díky čemuž se aplikace Pages po každém novém commitu automaticky sestaví a nasadí.

Nastavení vyžaduje základní znalost Git ↗. Pokud s Gitem začínáte, podívejte se na shrnutá příručka ke Gitu ↗ jak nastavit Git na svém lokálním počítači.

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:

# Skip the following three commands if you have built your application
# using C3 or already committed your changes
git init
git add .
git commit -m "Initial commit"

git branch -M main
git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME>
git push -u origin main

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.

7. Po dokončení konfigurace vyberte Save and Deploy.

Podívejte se na svůj první probíhající deploy pipeline. Pages nainstaluje všechny závislosti a sestaví projekt podle zadání. Cloudflare Pages automaticky znovu sestaví váš projekt a nasadí ho při každém novém pushnutém commitu.

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 nasazením těchto změn do produkce.

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

Pokud ve svém projektu plánujete používat bindingy, musíte je nejprve nastavit pro lokální i vzdálený vývoj.

Projekty vytvořené přes C3 obsahují nitro-cloudflare-dev, nitro modul, který zjednodušuje práci s bindings během vývoje:

export default defineNuxtConfig({
	modules: ["nitro-cloudflare-dev"],
});

Tento modul využívá getPlatformProxy pomocná funkce. getPlatformProxy automaticky rozpozná všechny bindingy definované v konfiguračním souboru Wrangler vašeho projektu a při lokálním vývoji je emuluje. Projděte si Informace o konfiguraci vazeb ve Wrangler s dalšími informacemi o konfiguraci vazeb v Konfigurační soubor Wrangler.

Abyste mohli v nasazené aplikaci přistupovat k bindings, musíte nakonfigurujte své vazby na Cloudflare dashboardu.

Chcete-li získat správnou podporu typů, musíte vytvořit nový env.d.ts soubor v kořeni vašeho projektu a deklarujte binding. Ujistěte se, že jste vygenerovali runtime typy Cloudflare spuštěním wrangler types.

Následuje příklad přidání KVNamespace binding:

declare module "h3" {
	interface H3EventContext {
		cf: CfProperties;
		cloudflare: {
			request: Request;
			env: {
				MY_KV: KVNamespace;
			};
			context: ExecutionContext;
		};
	}
}

V Nuxt přidejte kód na straně serveru pomocí Serverové trasy a middleware ↗. defineEventHandler() metoda se používá k definování API endpointů, v nichž máte přístup ke kontextu Cloudflare prostřednictvím poskytnutého context pole. context pole vám umožňuje přistupovat ke všem bindings nastaveným pro vaši aplikaci.

Následující blok kódu ukazuje příklad přístupu k oboru názvů KV v Nuxt.

export default defineEventHandler(({ context }) => {
	const MY_KV = context.cloudflare.env.MY_KV;

	return {
		// ...
	};
});

export default defineEventHandler(({ context }) => {
	const MY_KV = context.cloudflare.env.MY_KV;

	return {
		// ...
	};
});

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