在cloudflare Workers上部署WordPress的完整指南

896 字

4 分钟

在cloudflare Workers上部署WordPress的完整指南

2025-08-06

WordPress

guide

IMPORTANT
本指南目前仅作理论依据参考，缺乏实质性操作，在部分位置上很可能有些许偏差，请见谅

理解部署方式#

Cloudflare Workers 是边缘计算平台，无法直接运行 WordPress 的 PHP 代码。但我们可以通过以下两种方式部署：

推荐方法：反向代理配置#

将 Cloudflare Workers 作为现有 WordPress 站点的反向代理，提供加速和安全功能。

替代方法：无头 WordPress#

使用 WordPress 作为内容管理后端，通过 Workers 提供 API 驱动的无头架构。

反向代理方案部署步骤#

前提条件#

已部署的 WordPress 站点（可在任何主机/VPS）
Cloudflare 账户
域名已添加到 Cloudflare

配置步骤#

1. 创建新的 Cloudflare Worker#

1
addEventListener('fetch', event => {
2
  event.respondWith(handleRequest(event.request))
3
})
4

5
async function handleRequest(request) {
6
  // 替换为你的 WordPress 源站 URL
7
  const originUrl = 'https://your-wordpress-site.com'
8

9
  // 获取请求 URL
10
  const url = new URL(request.url)
11

12
  // 构建目标 URL
13
  const targetUrl = new URL(url.pathname + url.search, originUrl)
14

15
  // 复制原始请求头
16
  const headers = new Headers(request.headers)
17
  headers.set('Host', targetUrl.hostname)
18

19
  // 转发请求到 WordPress 源站
20
  const response = await fetch(targetUrl.toString(), {
21
    method: request.method,
22
    headers: headers,
23
    body: request.body,
24
    redirect: 'follow'
25
  })
26

27
  // 返回响应
28
  return response
29
}

2. 部署 Worker#

登录 Cloudflare 仪表板
进入 “Workers” 部分
创建新服务
粘贴上述代码
保存并部署

3. 配置自定义域名#

在 Worker 的 “触发器” 选项卡中
添加路由：*.yourdomain.com/*
关联你的域名

4. WordPress 配置调整#

在 WordPress 的 wp-config.php 中添加：

1
// 确保 WordPress 识别 Cloudflare 的代理
2
if ($_SERVER['HTTP_CF_VISITOR']) {
3
    $cf_visitor = json_decode($_SERVER['HTTP_CF_VISITOR']);
4
    if ($cf_visitor->scheme == 'https') {
5
        $_SERVER['HTTPS'] = 'on';
6
    }
7
}
8

9
// 设置正确的站点 URL
10
define('WP_HOME', 'https://yourdomain.com');
11
define('WP_SITEURL', 'https://yourdomain.com');

5. 配置缓存规则（可选）#

在 Worker 中添加缓存逻辑：

1
// 在 handleRequest 函数中添加
2
const cache = caches.default
3
const cacheKey = new Request(url.toString(), request)
4

5
// 检查缓存
6
let response = await cache.match(cacheKey)
7

8
if (!response) {
9
  // 从源站获取
10
  response = await fetch(targetUrl.toString(), {
11
    method: request.method,
12
    headers: headers,
13
    body: request.body,
14
    redirect: 'follow'
15
  })
16

17
  // 只缓存 GET 请求和成功响应
18
  if (request.method === 'GET' && response.status === 200) {
19
    const cacheResponse = response.clone()
20
    const cacheTtl = 60 * 60 * 24 // 1天缓存
21
    cacheResponse.headers.append('Cache-Control', `max-age=${cacheTtl}`)
22
    event.waitUntil(cache.put(cacheKey, cacheResponse))
23
  }
24
}
25

26
return response

无头 WordPress 方案（高级）#

架构概览#

1
WordPress (后端) → REST API → Cloudflare Worker (前端) → 用户

配置步骤#

设置 WordPress REST API
- 安装必要的插件（如 JWT Authentication）
- 配置 API 端点权限
创建前端 Worker

1
addEventListener('fetch', event => {
2
  event.respondWith(handleRequest(event.request))
3
})
4

5
async function handleRequest(request) {
6
  const API_URL = 'https://your-wordpress-site.com/wp-json/wp/v2'
7
  const { pathname } = new URL(request.url)
8

9
  // 示例：获取最新文章
10
  if (pathname === '/posts') {
11
    const response = await fetch(`${API_URL}/posts?_embed`)
12
    const posts = await response.json()
13

14
    // 构建前端页面
15
    const html = `
16
      <!DOCTYPE html>
17
      <html>
18
      <head><title>无头 WordPress</title></head>
19
      <body>
20
        <h1>最新文章</h1>
21
        <ul>
22
          ${posts.map(post => `
23
            <li>
24
              <h2>${post.title.rendered}</h2>
25
              <div>${post.excerpt.rendered}</div>
26
            </li>
27
          `).join('')}
28
        </ul>
29
      </body>
30
      </html>
31
    `
32

33
    return new Response(html, {
34
      headers: { 'Content-Type': 'text/html' }
35
    })
36
  }
37

38
  // 处理其他路由...
39
}

最佳实践与注意事项#

安全配置#

1
// 添加安全头
2
response = new Response(response.body, response)
3
response.headers.set('X-Content-Type-Options', 'nosniff')
4
response.headers.set('X-Frame-Options', 'DENY')
5
response.headers.set('Content-Security-Policy', "default-src 'self'")
6
response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin')
7
return response