← Cloudflare Pages / pages / how-to

Refaktorujte Worker na Pages Function

V tomto průvodci se naučíte, jak refaktorovat Worker určený pro zpracování odeslaných formulářů na Pages Function, kterou lze hostovat ve vaší aplikaci Cloudflare Pages. Pages Functions je bezserverová funkce, která se nachází ve stejném adresáři projektu jako vaše aplikace a nasazuje se spolu s Cloudflare Pages. Umožňuje spouštět serverový kód, který přidává dynamickou funkcionalitu bez nutnosti provozovat vyhrazený server. Worker byste na Pages Function mohli chtít převést z některého z těchto důvodů:

1. Pokud spravujete bezserverovou funkci, na které vaše aplikace Pages závisí, a chcete danou logiku nasadit bez správy Worker jako samostatné služby.
2. Pokud migrujete svůj Worker na Pages Functions a chcete využít možnosti směrování a middlewaru, které Pages Functions nabízí.

1. Odstraňte fetch handler a nahraďte ho příslušným OnRequest metoda. Více informací najdete v Funkce a vyberte vhodnou metodu pro svou Function.
2. Předejte context objekt jako argument svému novému OnRequest metodu pro přístup k vlastnostem parametru context: request,env,params a next.
3. Pomocí middlewaru zpracujte logiku, kterou je potřeba spustit před nebo po route handlerech. Další informace najdete v pomocí Middleware v dokumentaci Functions.

Proces refaktorování si tento návod vysvětluje na jednoduchém příkladu odesílání formuláře.

Odesílání formulářů mohou zpracovávat Workers, ale často se pro to dobře hodí i Pages Functions, protože formuláře bývají většinou specifické pro konkrétní aplikaci.

Pokud k obsluze formuláře již používáte Worker, pravděpodobně jste jej nasadili a jeho URL adresu přidali do atributu action vašeho HTML formuláře. To znamená, že při každé změně způsobu, jakým Worker zpracovává odeslaná data, musíte upravit i skript Workeru. Pokud logiku ve vašem Workeru využívá více aplikací, Pages Functions pro tento případ nejsou vhodnou volbou.

Někdy je však výhodné použít Pages Function pokud chcete mít logiku funkcí uspořádanou ve stejném adresáři projektu jako vaši aplikaci.

Sestavení aplikace pomocí Pages Functions vám pomůže spravovat klientskou i serverless logiku na jednom místě a usnadní psaní a ladění kódu.

Airtable ↗ je low-code platforma pro tvorbu kolaborativních aplikací. Pomáhá přizpůsobit váš workflow, spolupracovat a zpracovávat odeslané formuláře. V tomto příkladu využijete funkci Airtable pro odesílání formulářů.

Airtable ↗ lze použít k ukládání záznamů do různých tabulek v rámci stejného účtu. Při vytváření Workeru pro zpracování logiky odesílání je prvním krokem použít Wrangler a inicializujte nový Worker v konkrétní složce nebo v kořenovém adresáři aplikace.

Tento krok vytvoří základní kostru pro Worker odesílající data do Airtable. Po jeho napsání ho můžete nasadit do globální sítě Cloudflare, jakmile nakonfigurujte svůj projekt pro nasazení. Úplný návod najdete v dokumentaci Workers, kde se dozvíte, jak zpracování odeslaného formuláře pomocí Workers.

Následující blok kódu ukazuje příklad Workeru, který zpracovává odeslání formuláře Airtable.

submitHandler asynchronní funkce se volá, pokud je pathname práce /submit. Tato funkce ověří, že metoda požadavku je POST požadavek a poté zpracuje a odešle položky formuláře do Airtable pomocí vašich přihlašovacích údajů, které můžete uložit pomocí Wrangler secret.

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

		if (url.pathname === "/submit") {
			return submitHandler(request, env);
		}

		return fetch(request.url);
	},
};

async function submitHandler(request, env) {
	if (request.method !== "POST") {
		return new Response("Method not allowed", {
			status: 405,
		});
	}
	const body = await request.formData();

	const { first_name, last_name, email, phone, subject, message } =
		Object.fromEntries(body);

	const reqBody = {
		fields: {
			"First Name": first_name,
			"Last Name": last_name,
			Email: email,
			"Phone number": phone,
			Subject: subject,
			Message: message,
		},
	};

	return HandleAirtableData(reqBody, env);
}

const HandleAirtableData = (body, env) => {
	return fetch(
		`https://api.airtable.com/v0/${env.AIRTABLE_BASE_ID}/${encodeURIComponent(
			env.AIRTABLE_TABLE_NAME,
		)}`,
		{
			method: "POST",
			body: JSON.stringify(body),
			headers: {
				Authorization: `Bearer ${env.AIRTABLE_API_KEY}`,
				"Content-type": `application/json`,
			},
		},
	);
};

Chcete-li výše uvedený Worker refaktorovat, přejděte do adresáře projektu Pages a vytvořte /functions složka. V /functions, vytvořte form.js soubor. Tento soubor bude zpracovávat odesílání formulářů.

Poté v form.js soubor exportujte jediný onRequestPost:

export async function onRequestPost(context) {
	return await submitHandler(context);
}

Každý Worker má addEventListener a naslouchejte fetch události, ale ve vaší Pages Function ji nepotřebujete. Místo toho export jeden onRequest funkci a podle toho, jaký požadavek HTTPS zpracovává, ji odpovídajícím způsobem pojmenujte. Viz Dokumentace k Function a vyberte vhodnou metodu pro svou funkci.

Výše uvedený kód přijímá request a env jako argumenty, které tyto vlastnosti předávají do submitHandler funkci, která zůstává stejná jako původní Worker. Protože však Functions umožňují určit typ HTTPS požadavku, můžete odstranit request.method kontrolu ve vašem Workeru. Nyní to za vás zajišťují Pages Functions pojmenováním onRequest handler.

Nyní zavedete submitHandler funkci a předejte env jako vlastnost. To vám umožní přistupovat k env v HandleAirtableData funkci níže. Tato funkce provádí POST požadavek do Airtable pomocí vašich přihlašovacích údajů Airtable:

export async function onRequestPost(context) {
	return await submitHandler(context);
}

async function submitHandler(context) {
	const body = await context.request.formData();

	const { first_name, last_name, email, phone, subject, message } =
		Object.fromEntries(body);

	const reqBody = {
		fields: {
			"First Name": first_name,
			"Last Name": last_name,
			Email: email,
			"Phone number": phone,
			Subject: subject,
			Message: message,
		},
	};

	return HandleAirtableData({ body: reqBody, env: env });
}

Nakonec vytvořte HandleAirtableData funkce. Tato funkce odešle fetch požadavek do Airtable s vašimi přihlašovacími údaji Airtable a tělem požadavku:

// ..
const HandleAirtableData = async function onRequest({ body, env }) {
	return fetch(
		`https://api.airtable.com/v0/${env.AIRTABLE_BASE_ID}/${encodeURIComponent(
			env.AIRTABLE_TABLE_NAME,
		)}`,
		{
			method: "POST",
			body: JSON.stringify(body),
			headers: {
				Authorization: `Bearer ${env.AIRTABLE_API_KEY}`,
				"Content-type": `application/json`,
			},
		},
	);
};

Svou Function můžete otestovat lokálně pomocí Wrangler. Dokončením tohoto návodu jste úspěšně přepracovali svůj Worker pro odesílání formulářů na Pages Function pro odesílání formulářů.

• HTML formuláře
• Dokumentace k pluginům
• Dokumentace Functions