Nếu trang web blog của bạn sử dụng tên miền tùy chỉnh và được lưu trữ bởi **Cloudflare**, bạn có thể tận dụng dịch vụ Phân tích và API GraphQL của Cloudflare để truy xuất dữ liệu lưu lượng truy cập trang web, bao gồm số lượng yêu cầu, khách truy cập duy nhất (UV) và lượt xem trang (PV).
Bài viết này sẽ giới thiệu ba phương pháp để lấy dữ liệu lưu lượng truy cập trang web, từ bảng điều khiển Cloudflare dễ dàng truy cập để xem trực tiếp, đến lấy dữ liệu bằng API lập trình, và cuối cùng là triển khai Worker để cung cấp giao diện dữ liệu cho giao diện người dùng.
Điều kiện tiên quyết: Tên miền của bạn đã được lưu trữ trên Cloudflare. Lấy ví dụ blog của tôi
lxpavilion.top, các bước cấu hình chi tiết có thể tham khảo: Cấu hình tên miền tùy chỉnh và tăng tốc Cloudflare cho blog GitHub Pages.
I. Xem dữ liệu lưu lượng truy cập trực tiếp trên bảng điều khiển Cloudflare
Nếu bạn mới làm quen với phân tích dữ liệu của Cloudflare, cách trực tiếp nhất là xem tổng quan lưu lượng truy cập trên bảng điều khiển.
Truy cập trang Analytics trong quản lý tên miền, bạn có thể thấy nhiều bảng dữ liệu.
Trên trang Analytics, bạn cũng có thể tùy chỉnh bảng điều khiển dữ liệu bằng chức năng Dashboards, tự do kết hợp các mô-đun biểu đồ cần thiết, hoặc nhập các mẫu được đặt sẵn từ cộng đồng hoặc chính thức.
Phương pháp này không yêu cầu viết bất kỳ mã nào, phù hợp để nhanh chóng xem tổng quan lưu lượng truy cập theo thời gian thực.
II. Lấy dữ liệu lưu lượng truy cập bằng API GraphQL
Mặc dù xem trên bảng điều khiển rất tiện lợi, nhưng nếu bạn muốn hiển thị dữ liệu lưu lượng truy cập trên trang giao diện người dùng hoặc cần thu thập và phân tích định kỳ, bạn sẽ cần sử dụng API.
Về giới hạn CORS: API GraphQL của Cloudflare không cho phép gọi trực tiếp từ trình duyệt (do có giới hạn băng thông chéo CORS). Do đó, phương pháp này chỉ phù hợp cho các yêu cầu HTTP từ mã phụ trợ hoặc môi trường máy chủ. Nếu cần truy cập từ trình duyệt, vui lòng tham khảo giải pháp Worker trong phần III.
2.1 Lấy Zone ID và API Token
Việc gọi API yêu cầu hai thông tin xác thực cốt lõi:
- Zone ID: Định danh tên miền của bạn.
- API Token: Khóa bí mật để xác thực.
Lấy Zone ID
Trong trang Overview của quản lý tên miền, cuộn xuống, bạn có thể tìm thấy Zone ID trong thanh thông tin bên phải.
Tạo API Token
Nhấp vào ảnh đại diện tài khoản ở góc trên bên phải -> My Profile -> API Tokens, truy cập trang quản lý Token.
Nhấp vào Create Token. Vì mục đích là lấy dữ liệu lưu lượng truy cập trang web, bạn có thể sử dụng trực tiếp mẫu được đặt sẵn Read analytics and logs.
Sau khi tạo xong, bạn có thể xem phạm vi quyền của Token này trong trang chi tiết Token - chỉ có quyền đọc, có thể đọc thông tin tài khoản và dữ liệu lưu lượng truy cập trang web, không thể sửa đổi bất kỳ tài nguyên nào.
2.2 Ví dụ Python: Lấy dữ liệu lưu lượng truy cập trong 7 ngày qua
Mã sau đây sử dụng API GraphQL của Cloudflare để truy vấn số lượng yêu cầu hàng ngày, khách truy cập duy nhất và lượt xem trang của tên miền được chỉ định trong 7 ngày qua.
import requests
from datetime import datetime, timedelta, timezone
# Cảnh báo bảo mật: Không bao giờ mã hóa cứng API Token và Zone ID trong mã!
# Nếu bị lộ, người khác có thể đọc dữ liệu lưu lượng truy cập trang web của bạn.
# Nên đọc thông qua biến môi trường hoặc quản lý bằng tệp .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}
)
# Phân tích dữ liệu trả về
data = resp.json()["data"]["viewer"]["zones"][0]["httpRequests1dGroups"]
print("Ngày Số yêu cầu Khách truy cập Lượt xem")
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}")
Ngày Số yêu cầu Khách truy cập Lượt xem
2026-06-09 9830 190 1087
2026-06-10 4782 183 439
2.3 Giải thích các chiều và khoảng thời gian truy vấn API
Tùy thuộc vào nhu cầu thực tế, bạn có thể điều chỉnh câu truy vấn GraphQL để lấy dữ liệu với các mức độ chi tiết khác nhau:
| Chiều | Thời gian hồi cứu tối đa | Mô tả |
|---|---|---|
| Theo ngày (httpRequests1dGroups) | 1 năm | Lấy số yêu cầu hàng ngày, số khách truy cập, băng thông, v.v. phù hợp với phân tích xu hướng dài hạn. |
| Theo giờ (httpRequests1hGroups) | 3 ngày | Lấy dữ liệu chi tiết hàng giờ, phù hợp với giám sát ngắn hạn và khắc phục sự cố bất thường. |
| Theo quốc gia/khu vực | 1 ngày | Lấy phân bố địa lý của các yêu cầu; nếu cần thống kê theo quốc gia trong một tuần, bạn cần yêu cầu liên tục từng ngày và tự hợp nhất. |
Tham khảo tài liệu chính thức: Bắt đầu với Cloudflare GraphQL API.
Mẹo hữu ích: Bạn có thể cung cấp liên kết tài liệu API chính thức cho các công cụ AI (như Claude Code, ChatGPT, v.v.) để AI giúp bạn tạo mã truy vấn phù hợp với các nhu cầu cụ thể, hiệu quả hơn so với việc tự mình đọc tài liệu.
III. Triển khai Cloudflare Worker để lấy dữ liệu lưu lượng truy cập
Phương pháp API nêu trên tuy trực tiếp nhưng bị hạn chế bởi chính sách CORS và không thể gọi trực tiếp từ trình duyệt. Để trang giao diện người dùng cũng có thể hiển thị dữ liệu lưu lượng truy cập, chúng ta cần một lớp trung gian phụ trợ - Cloudflare Workers.
3.1 Tổng quan về Worker
Cloudflare Workers là nền tảng tính toán không máy chủ. Bạn chỉ cần viết mã JavaScript đơn giản, Cloudflare sẽ triển khai mã đó trên hơn 330+ nút biên trên toàn cầu.
Nói một cách đơn giản, Worker tương đương với một dịch vụ phụ trợ nhẹ chạy trên các nút biên đám mây, cung cấp giao diện HTTP, trình duyệt có thể truy cập các giao diện này để lấy dữ liệu một cách bình thường.
3.2 Tạo Worker qua bảng điều khiển
Tạo một phiên bản Worker
Trong Bảng điều khiển CF, điều hướng đến Build -> Compute -> Workers & Pages, nhấp vào Create Worker.
Chọn mẫu Hello World! được cung cấp chính thức để bắt đầu tạo.
Cấu hình tên miền tùy chỉnh
Truy cập trang chi tiết Worker, điều hướng đến tab Domains, nhấp vào Add Domain.
Lưu ý: Bạn chỉ có thể cấu hình tên miền phụ của tên miền mà bạn sở hữu. Ví dụ:
helloworld.lxpavilion.top.
Xác minh Worker
Truy cập tên miền bạn đã cấu hình. Nếu Worker hoạt động bình thường, trình duyệt sẽ trả về nội dung phản hồi Hello World!.
Nếu bạn muốn trả về dữ liệu lưu lượng truy cập thực tế, chỉ cần gọi API GraphQL của Cloudflare trong mã Worker (tương tự logic Python ở phần trước), và phản hồi dữ liệu dưới dạng JSON cho giao diện người dùng.
IV. Sử dụng Wrangler để xây dựng Worker cục bộ
Ngoài việc tạo qua giao diện đồ họa trên bảng điều khiển, bạn cũng có thể sử dụng Wrangler (công cụ CLI chính thức của Cloudflare) để phát triển, kiểm thử và triển khai Worker cục bộ. Phương pháp này phù hợp hơn cho các dự án yêu cầu quản lý phiên bản và tích hợp CI/CD.
4.1 Chuẩn bị môi trường
Đảm bảo máy tính của bạn đã cài đặt Node.js (phiên bản >= 18), sau đó cài đặt Wrangler qua npm:
npm install -g wrangler
wrangler --version
4.2 Đăng nhập tài khoản Cloudflare
wrangler login
Sau khi thực thi lệnh, terminal sẽ nhắc bạn mở trình duyệt để ủy quyền OAuth.
Trình duyệt tự động chuyển hướng đến trang ủy quyền Cloudflare, nhấp vào Authorize để hoàn tất đăng nhập.
4.3 Viết tệp cấu hình và tập lệnh Worker
Tạo hai tệp cốt lõi sau trong thư mục dự án:
Tệp cấu hình wrangler.json
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "test",
"main": "main.js",
"compatibility_date": "2026-06-10",
"placement": {
"mode": "smart"
},
"vars": {
"var": "我是环境变量"
}
}
Giải thích các trường:
| Trường | Tác dụng |
|---|---|
$schema |
Đường dẫn JSON Schema, dùng để tự động hoàn thành và kiểm tra IDE (không dùng khi triển khai). |
name |
Tên duy nhất của Worker, hiển thị trên bảng điều khiển và là một phần của tên miền phụ mặc định. |
main |
Đường dẫn tệp đầu vào (tương đối với thư mục gốc dự án). |
compatibility_date |
Phiên bản hành vi API, hành vi trước ngày này sẽ được giữ tương thích. |
placement.mode |
Đặt thông minh, đặt thành smart cho phép CF điều phối Worker đến nút gần người dùng nhất. |
vars |
Biến môi trường thông thường; thông tin nhạy cảm (như API Token) nên được lưu trữ mã hóa riêng bằng wrangler secret. |
Tập lệnh thực thi 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 Triển khai Worker
Trong thư mục dự án, thực thi:
wrangler deploy
Sau khi triển khai thành công, bạn có thể thấy trạng thái của Worker mới triển khai là Active trên trang Workers & Pages trong Bảng điều khiển Cloudflare.
Các phương pháp cấu hình tên miền tùy chỉnh và kiểm tra xác minh tiếp theo giống như trong phần III, không lặp lại ở đây.
V. Hiệu quả cuối cùng
Sau khi cấu hình Worker và viết xong tập lệnh JavaScript lấy dữ liệu lưu lượng truy cập, giao diện người dùng có thể yêu cầu tên miền Worker bằng lệnh fetch để lấy dữ liệu lưu lượng truy cập và hiển thị dưới dạng biểu đồ trên trang.
Dưới đây là ảnh chụp màn hình hiệu quả thực tế của bảng theo dõi trên blog của tôi:
Bạn có thể truy cập 栏轩阁 - Analytics để xem hiệu quả thời gian thực.
VI. Tóm tắt và các thực tiễn tốt nhất
Bài viết này đã giới thiệu ba phương pháp lấy dữ liệu lưu lượng truy cập trang web Cloudflare, được sắp xếp theo mức độ khó kỹ thuật từ thấp đến cao:
| Phương pháp | Trường hợp sử dụng | Ưu điểm | Nhược điểm |
|---|---|---|---|
| Xem trực tiếp trên bảng điều khiển | Tổng quan nhanh, kiểm tra hàng ngày | Không cần mã, dữ liệu thời gian thực | Không thể tùy chỉnh hiển thị, không thể nhúng vào giao diện người dùng |
| Lấy dữ liệu bằng API GraphQL | Thu thập dữ liệu định kỳ của phụ trợ, phân tích dữ liệu | Linh hoạt, có thể tự động hóa | Có giới hạn CORS, trình duyệt không thể gọi trực tiếp |
| Triển khai Worker làm lớp trung gian API | Hiển thị dữ liệu trên giao diện người dùng | Không có giới hạn CORS, tăng tốc toàn cầu, có thể lưu trữ cache | Cần viết và triển khai thêm mã |
Đề xuất các thực tiễn tốt nhất
- An toàn là trên hết: Thông tin nhạy cảm như API Token tuyệt đối không được mã hóa cứng, đề xuất quản lý bằng biến môi trường hoặc wrangler secret.
- Lưu trữ dữ liệu: Dữ liệu trả về bởi Worker có thể thiết lập tiêu đề
Cache-Controlhợp lý để giảm số lượng lệnh gọi API GraphQL (chỉ cần truy vấn 1-2 lần mỗi ngày là đủ cho nhu cầu hiển thị). - Hiển thị trực quan: Giao diện người dùng đề xuất kết hợp các thư viện biểu đồ (như ECharts, Chart.js, ApexCharts) để hiển thị dữ liệu dưới dạng biểu đồ đường hoặc biểu đồ cột.
- Đề xuất kiến trúc: Kiến trúc ba lớp Giao diện người dùng đến Worker (lớp trung gian dữ liệu, bao gồm bộ nhớ đệm) đến API GraphQL Cloudflare, cân bằng giữa bảo mật, hiệu suất và khả năng bảo trì.
Ví dụ Worker trong bài viết này trình bày quy trình gọi API và trả về dữ liệu cơ bản nhất. Nếu bạn muốn xây dựng bảng theo dõi lưu lượng truy cập với chức năng hoàn thiện hơn và hiệu suất tốt hơn (ví dụ: hỗ trợ dữ liệu đa chiều, thống kê chi tiết 30 ngày, bộ nhớ đệm yêu cầu POST, kiểm soát đồng thời, v.v.), bạn có thể đọc thêm bài viết thực tiễn cấp sản phẩm trên blog của tôi.
Thiết kế và triển khai Worker phân tích lưu lượng truy cập cấp sản phẩm — Phân tích chi tiết ý tưởng thiết kế và kỹ thuật cốt lõi của tập lệnh sản phẩm 270 dòng.
Bài viết này được đăng trên 栏轩阁.
Chào mừng bạn theo dõi các nền tảng khác của tôi:
- Blog园
- 掘金
- CSDN
- GitHub
- Gitee
Liên hệ tôi: 2194844980@qq.com