← Cloudflare Pages / pages / configuration

REST API

Pages API vám umožňuje vytvářet automatizace a integrovat Pages do vašeho vývojového workflow. Zjednodušeně řečeno, koncové body API vám umožňují spravovat nasazení a sestavení a konfigurovat projekty. Cloudflare podporuje Deploy Hooks pro nasazení headless CMS. Další informace najdete v Dokumentace API ↗ s úplným přehledem typů objektů a koncových bodů.

Jak používat API

Získání API tokenu

Chcete-li vytvořit token API:

V dashboardu Cloudflare přejděte na API tokeny účtu stránce.
Přejděte na API tokeny účtu ↗
Vyberte Create Token.
Můžete přejít na Úprava Cloudflare Workers šablonu > Použít šablonu nebo přejděte na Create Custom Token > Začínáme. Pokud vytvoříte vlastní token, nezapomeňte přidat Cloudflare Pages oprávnění s Úprava přístup.

Odesílání požadavků

Po vytvoření tokenu se můžete ověřit a odesílat požadavky na API pomocí API tokenu v hlavičkách požadavku. Následuje příklad požadavku API, který získá všechna nasazení v projektu.

Požadovaná oprávnění API tokenu

Alespoň jeden z následujících oprávnění tokenu je povinné:

Pages Read
Pages Write

Získání nasazení

curl "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/pages/projects/$PROJECT_NAME/deployments" \
	--request GET \
	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN"

Vyzkoušejte to na jednom ze svých projektů tak, že nahradíte {account_id}, {project_name}, a <API_TOKEN>. Viz Najděte své ID účtu s dalšími informacemi.

Příklady

Rozhraní API je ještě výkonnější v kombinaci s Cloudflare Workers, nejjednodušším způsobem nasazení serverless funkcí do globální sítě Cloudflare. Následující část obsahuje tři ukázky kódu, jak Pages API používat. Chcete-li tyto ukázky sestavit a nasadit, přečtěte si Úvodní návod.

Spouštění nového sestavení každou hodinu

Představte si, že máte CMS, který čerpá data z živých zdrojů a sestavuje z nich statický výstup. Statický obsah udržíte co nejaktuálnější tak, že pomocí API budete pravidelně spouštět nová sestavení.

const endpoint =
	"https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";

export default {
	async scheduled(_, env) {
		const init = {
			method: "POST",
			headers: {
				"Content-Type": "application/json;charset=UTF-8",
				// We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/general/#secret
				Authorization: `Bearer ${env.API_TOKEN}`,
			},
		};

		await fetch(endpoint, init);
	},
};

Jakmile nasadíte JavaScript Worker, nastavte v něm cron trigger, aby se tento skript spouštěl pravidelně. Více informací najdete v Cron Triggers pro další podrobnosti.

Odstranění starých nasazení po týdnu

Cloudflare Pages hostuje a poskytuje všechna nasazení projektu na náhledových odkazech. Pokud chcete projekt udržet soukromý a zamezit přístupu ke starým nasazením, můžete pomocí API smazat nasazení starší než měsíc, aby už nebyla veřejně dostupná online. Poslední nasazení dané větve smazat nelze.

const endpoint =
	"https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";
const expirationDays = 7;

export default {
	async scheduled(_, env) {
		const init = {
			headers: {
				"Content-Type": "application/json;charset=UTF-8",
				// We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/general/#secret
				Authorization: `Bearer ${env.API_TOKEN}`,
			},
		};

		const response = await fetch(endpoint, init);
		const deployments = await response.json();

		for (const deployment of deployments.result) {
			// Check if the deployment was created within the last x days (as defined by `expirationDays` above)
			if (
				(Date.now() - new Date(deployment.created_on)) / 86400000 >
				expirationDays
			) {
				// Delete the deployment
				await fetch(`${endpoint}/${deployment.id}`, {
					method: "DELETE",
					headers: {
						"Content-Type": "application/json;charset=UTF-8",
						Authorization: `Bearer ${env.API_TOKEN}`,
					},
				});
			}
		}
	},
};

Jakmile nasadíte JavaScript Worker, můžete v něm nastavit cron trigger, aby se tento skript spouštěl pravidelně. Více informací najdete v Průvodce Cron Triggers pro další podrobnosti.

Představte si, že pracujete ve vývojovém týmu, který pro tvorbu webů používá Pages. Potřebujete snadný způsob, jak sdílet odkazy na náhledy nasazení a stav sestavení, aniž byste museli sdílet účty Cloudflare. Pomocí API můžete snadno sdílet informace o projektu, včetně stavu nasazení a náhledových odkazů, a poskytovat tento obsah jako HTML z Cloudflare Workeru.

const deploymentsEndpoint =
	"https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";
const projectEndpoint =
	"https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}";

export default {
	async fetch(request, env) {
		const init = {
			headers: {
				"content-type": "application/json;charset=UTF-8",
				// We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/general/#secret
				Authorization: `Bearer ${env.API_TOKEN}`,
			},
		};

		const style = `body { padding: 6em; font-family: sans-serif; } h1 { color: #f6821f }`;
		let content = "<h2>Project</h2>";

		let response = await fetch(projectEndpoint, init);
		const projectResponse = await response.json();
		content += `<p>Project Name: ${projectResponse.result.name}</p>`;
		content += `<p>Project ID: ${projectResponse.result.id}</p>`;
		content += `<p>Pages Subdomain: ${projectResponse.result.subdomain}</p>`;
		content += `<p>Domains: ${projectResponse.result.domains}</p>`;
		content += `<a href="${projectResponse.result.canonical_deployment.url}"><p>Latest preview: ${projectResponse.result.canonical_deployment.url}</p></a>`;

		content += `<h2>Deployments</h2>`;
		response = await fetch(deploymentsEndpoint, init);
		const deploymentsResponse = await response.json();

		for (const deployment of deploymentsResponse.result) {
			content += `<a href="${deployment.url}"><p>Deployment: ${deployment.id}</p></a>`;
		}

		let html = `
      <!DOCTYPE html>
      <head>
        <title>Example Pages Project</title>
      </head>
      <body>
        <style>${style}</style>
        <div id="container">
          ${content}
        </div>
      </body>`;

		return new Response(html, {
			headers: {
				"Content-Type": "text/html;charset=UTF-8",
			},
		});
	},
};