给我的博客添加监控板块：使用 Cloudflare API 获取网站流量信息

前言

如果你的博客网站配置了自定义域名并交由 Cloudflare 托管，那么你可以利用 Cloudflare 提供的 Analytics 服务和 GraphQL API 来获取网站的流量数据，包括请求数、独立访客（UV）、页面浏览量（PV）等。

本文将介绍三种获取网站流量数据的方式，从零门槛的 Cloudflare 控制台直接查看，到通过 API 编程获取，再到部署 Worker 为前端提供数据接口。

前置条件：你的域名已托管在 Cloudflare。以我的博客 lxpavilion.top 为例，详细配置步骤可参考：
为 GitHub Pages 博客配置自定义域名与 Cloudflare 加速

一、在 Cloudflare 控制台直接查看流量数据

如果你是初次接触 CF 数据分析，最直接的方式是在控制台查看流量概览。

进入域名管理的 Analytics 页面，可以看到多项数据面板。

在 Analytics 页面中，你还可以通过 Dashboards 功能自定义数据看板，自由组合所需的图表模块，也可以导入社区或官方预设的模板。

这种方式无需编写任何代码，适合快速查看实时流量概况。

二、通过 GraphQL API 编程获取流量数据

控制台查看虽然方便，但如果你希望在前端页面上展示流量数据，或者需要定时采集与分析，就需要通过 API 来获取。

关于 CORS 限制：Cloudflare 的 GraphQL API 不允许浏览器端直接调用（存在 CORS 跨域限制），因此该方式仅适用于后端代码或服务器环境的 HTTP 请求。如果需要浏览器端访问，请参考第三部分的 Worker 方案。

2.1 获取 Zone ID 和 API Token

调用 API 需要两个核心凭证：

Zone ID：标识你的域名
API Token：用于身份验证的密钥

获取 Zone ID

在域名管理的 Overview 页面向下滚动，右侧信息栏中即可看到 Zone ID。

创建 API Token

点击右上角账户头像 -> My Profile -> API Tokens，进入 Token 管理页面。

点击 Create Token，由于用途是获取网站流量数据，可以直接使用预设模板 Read analytics and logs。

创建完成后，在 Token 详情页面可以查看到该 Token 的权限范围——仅有读取权限，可以读取账户信息和网站流量数据，无法对资源做任何修改。

2.2 Python 示例：获取近 7 天的流量数据

以下代码使用 Cloudflare GraphQL API 查询指定域名近 7 天的每日请求数、独立访客和页面浏览量。

import requests
from datetime import datetime, timedelta, timezone

# 安全警告：请勿将 API Token 和 Zone ID 硬编码在代码中！
# 若不慎泄露，他人可读取你的网站流量数据。
# 建议通过环境变量读取，或使用 .env 文件管理。
API_TOKEN = "cfut_YOUR_TOKEN_HERE"
ZONE_ID = "your_zone_id_here"

end = datetime.now(timezone.utc)
start = end - timedelta(days=7)

query = f"""
{{
  viewer {{
    zones(filter: {{zoneTag: "{ZONE_ID}"}}) {{
      httpRequests1dGroups(limit: 8, filter: {{date_geq: "{start:%Y-%m-%d}", date_leq: "{end:%Y-%m-%d}"}}) {{
        dimensions {{ date }}
        sum {{ requests pageViews }}
        uniq {{ uniques }}
      }}
    }}
  }}
}}
"""

resp = requests.post(
    "https://api.cloudflare.com/client/v4/graphql",
    headers={"Authorization": f"Bearer {API_TOKEN}"},
    json={"query": query}
)

# 解析返回数据
data = resp.json()["data"]["viewer"]["zones"][0]["httpRequests1dGroups"]
print("日期       请求数  访客  浏览量")
for day in data:
    d = day["dimensions"]["date"]
    req = day["sum"]["requests"]
    uv = day["uniq"]["uniques"]
    pv = day["sum"]["pageViews"]
    print(f"{d}  {req:6d}  {uv:4d}  {pv:5d}")

运行结果示例：

日期       请求数  访客  浏览量
2026-06-09    9830   190   1087
2026-06-10    4782   183    439

2.3 API 查询维度与时间范围说明

根据实际需求，你可以调整 GraphQL 查询语句来获取不同粒度的数据：

维度	最长回溯时间	说明
按天 (httpRequests1dGroups)	1 年	获取每日的请求数、访客数、带宽等，适合长期趋势分析
按小时 (httpRequests1hGroups)	3 天	获取每小时的细粒度数据，适合短期监控和异常排查
按国家/地区	1 天	获取请求的地理分布；如需一周的按国家统计，需要逐天连续请求后自行合并

官方文档参考：Cloudflare GraphQL API 入门

实用小技巧：你可以将官方 API 文档链接喂给 AI 工具（如 Claude Code、ChatGPT 等），让 AI 帮你生成符合特定需求的查询代码，比自己从零翻阅文档效率更高。

三、部署 Cloudflare Worker 获取流量数据

上述 API 方式虽然直接，但受 CORS 策略限制无法在浏览器中调用。为了让前端页面也能展示流量数据，我们需要一个后端中间层——Cloudflare Workers。

3.1 Worker 概述

Cloudflare Workers 是一个无服务器计算平台，你只需编写简单的 JavaScript 代码，Cloudflare 就会将其部署在全球 330+ 个边缘节点上。

简单来说，Worker 相当于一个运行在云端边缘节点的轻量后端服务，对外暴露 HTTP 接口，浏览器可以正常访问这些接口获取数据。

3.2 通过控制台创建 Worker

创建 Worker 实例

在 CF Dashboard 中，导航到 Build -> Compute -> Workers & Pages，点击 Create Worker。

选择官方提供的 Hello World! 模板开始创建。

配置自定义域名

进入 Worker 详情页，导航到 Domains 选项卡，点击 Add Domain。

注意：只能配置你已拥有域名的子域名。例如：helloworld.lxpavilion.top。

验证 Worker

访问你配置的域名，如果 Worker 正常工作，浏览器会返回 Hello World! 的响应内容。

如需返回实际的网站流量数据，只需在 Worker 代码中调用 Cloudflare GraphQL API（类似前文的 Python 逻辑），将数据以 JSON 格式响应给前端即可。

四、使用 Wrangler 本地构建 Worker

除了在控制台通过图形界面创建外，你还可以使用 Wrangler（Cloudflare 官方 CLI 工具）在本地开发、测试和部署 Worker。这种方式更适合需要版本管理和 CI/CD 集成的项目。

4.1 环境准备

确保电脑上已安装 Node.js（版本 >= 18），然后通过 npm 安装 Wrangler：

npm install -g wrangler

wrangler --version

4.2 登录 Cloudflare 账号

wrangler login

执行命令后，终端会提示正在打开浏览器进行 OAuth 授权。

浏览器自动跳转到 Cloudflare 授权页面，点击 Authorize 即可完成登录。

4.3 编写配置文件和 Worker 脚本

在项目目录下创建以下两个核心文件：

wrangler.json 配置文件

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "test",
  "main": "main.js",
  "compatibility_date": "2026-06-10",
  "placement": {
    "mode": "smart"
  },
  "vars": {
    "var": "我是环境变量"
  }
}

各字段说明：

字段	作用
`$schema`	JSON Schema 路径，用于 IDE 自动补全和校验（部署时无用）
`name`	Worker 唯一名称，仪表盘中显示，也是默认子域名的一部分
`main`	入口文件路径（相对项目根目录）
`compatibility_date`	API 行为版本，此日期前的行为保持兼容
`placement.mode`	智能放置，设为 smart 可让 CF 将 Worker 调度到离用户最近的节点
`vars`	普通环境变量；敏感信息（如 API Token）请使用 wrangler secret 单独加密存储

main.js 执行脚本

export default {
    async fetch(request, env) {
        const message = env.var || "未设置环境变量";
        return new Response(`环境变量的值是: ${message}`, {
            headers: { "Content-Type": "text/plain; charset=utf-8" }
        });
    }
};

4.4 部署 Worker

在项目目录下执行：

wrangler deploy

部署成功后，在 Cloudflare Dashboard 的 Workers & Pages 页面可以看到新部署的 Worker 状态为 Active。

后续配置自定义域名和验证测试的方法与第三节相同，此处不再赘述。

五、最终效果

配置好 Worker 并编写好获取流量数据的 JS 脚本后，前端就可以通过 fetch 请求 Worker 域名获取流量数据，并在页面上以图表形式呈现。

以下是我博客中监控板块的实际效果截图：

你可以访问栏轩阁 - Analytics 查看实时效果。

六、总结与最佳实践

本文介绍了三种获取 Cloudflare 网站流量数据的方式，按技术门槛从低到高排列：

方式	适用场景	优点	缺点
控制台直接查看	快速概览、日常巡检	零代码、实时数据	无法自定义展示、无法嵌入前端
GraphQL API 编程获取	后端定时采集、数据分析	灵活、可自动化	有 CORS 限制，浏览器无法直接调用
Worker 部署为 API 中间层	前端展示流量数据	无 CORS 限制、全球加速、可缓存	需要编写和部署额外代码

最佳实践建议

安全第一：API Token 等敏感信息切勿硬编码，建议通过环境变量或 wrangler secret 管理
数据缓存：Worker 返回的数据可以设置合理的 Cache-Control 头部，减少 GraphQL API 的调用次数（每天查询 1-2 次即可满足展示需求）
可视化展示：前端推荐搭配图表库（如 ECharts、Chart.js、ApexCharts）将数据渲染为折线图或柱状图
架构推荐：前端到 Worker（数据中间层，含缓存）到 Cloudflare GraphQL API 的三层架构，兼顾了安全性、性能和可维护性

本文的 Worker 示例展示了最基础的 API 调用和数据返回流程。如果你希望构建功能更完善、性能更优的流量看板（例如支持多维度数据、30天细分统计、POST 请求缓存、并发控制等），可以进一步阅读我博客的生产级实践文章。

👉 生产级流量分析 Worker 设计与实现 —— 完整拆解 270 行生产脚本的设计思路与核心技巧。

📝 本文发布于栏轩阁

🌐 欢迎关注我的其他平台：

📧 联系我：2194844980@qq.com

posted @ 2026-06-11 09:07 PC2005-cloud 阅读(46) 评论(0) 收藏举报

刷新页面返回顶部

pc2005