Pages API 使你能够构建自动化并将 Pages 集成到开发工作流中。概言之,API 端点让你管理部署和构建并配置项目。Cloudflare 支持用于无头 CMS 部署的 Deploy Hooks。对象类型和端点的完整说明请参阅 API 文档 ↗。
要创建 API 令牌:
-
在 Cloudflare 仪表板中,前往 Account API tokens(账户 API 令牌) 页面。
Go to Account API tokens ↗ -
选择 Create Token(创建令牌)。
-
可使用 Edit Cloudflare Workers(编辑 Cloudflare Workers) 模板 > Use template(使用模板),或选择 Create Custom Token(创建自定义令牌) > Get started(开始使用)。若创建自定义令牌,需添加 Cloudflare Pages 权限并授予 Edit(编辑) 访问权限。
创建令牌后,可在请求头中使用 API 令牌进行身份验证并向 API 发起请求。例如,以下 API 请求获取项目中的所有部署。
Required API token permissions
At least one of the following token permissions is required:Pages ReadPages Write
curl "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/pages/projects/$PROJECT_NAME/deployments" \
--request GET \
--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN"将 {account_id}、{project_name} 和 <API_TOKEN> 替换为你的项目信息后试用。更多信息请参阅 查找账户 ID。
与 Cloudflare Workers 结合使用时 API 更加强大:Workers 是在 Cloudflare 全球网络上部署无服务器函数的最简便方式。以下部分包含三个使用 Pages API 的代码示例。要构建和部署这些示例,请参阅 快速入门指南。
假设我们有一个 CMS,从实时来源拉取数据以编译静态输出。你可以使用 API 定期触发新构建,使静态内容尽可能保持最新。
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);
},
};部署 JavaScript Worker 后,在 Worker 中设置 cron 触发器以定期运行此脚本。更多详情请参阅 Cron Triggers。
Cloudflare Pages 在预览链接上托管并提供所有项目部署。假设你希望保持项目私有并阻止访问旧部署。你可以使用 API 在一个月后删除部署,使其不再公开在线。分支的最新部署无法删除。
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}`,
},
});
}
}
},
};部署 JavaScript Worker 后,可在 Worker 中设置 cron 触发器以定期运行此脚本。更多详情请参阅 Cron Triggers 指南。
假设你正在使用 Pages 构建网站的开发团队中工作。你希望有一种简便方式共享部署预览链接和构建状态,而无需共享 Cloudflare 账户。使用 API,你可以轻松共享项目信息(包括部署状态和预览链接),并作为 HTML 从 Cloudflare Worker 提供此内容。
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",
},
});
},
};