如何借助Cloudflare从单个Azure存储账户托管多个SPA

场景说明 #

我需要在Cloudflare非企业版计划下管理多个自定义域名的流量，将它们指向托管了多个SPA的单个Azure存储账户，每个域名对应一个SPA：

• app1.example.com → mystorageaccount.z6.web.core.windows.net/app1/
• app2.example.com → mystorageaccount.z6.web.core.windows.net/app2/
  两个SPA均托管在同一启用静态网站托管的Azure存储账户（mystorageaccount）的不同文件夹中。

问题1：在Cloudflare非企业版计划下，此类路由的最佳实现方式是什么？ #

非企业版计划下，结合Cloudflare Page Rules + 自定义CNAME解析是最直接高效的方案：

1. 域名解析配置
   • 为每个自定义域名（app1.example.com、app2.example.com）添加CNAME记录，指向Azure存储账户的静态网站终结点mystorageaccount.z6.web.core.windows.net。
   • 确保Cloudflare代理状态（云朵图标）设为橙色（开启代理），让流量经过Cloudflare处理。
2. Page Rules路由设置
   • 针对每个域名创建独立的Page Rule：
     • 匹配URL：app1.example.com/*
     • 添加设置：选择「Forwarding URL (Status Code: 200 - Rewrite)」（推荐用200重写，避免前端URL跳转），目标URL设为https://mystorageaccount.z6.web.core.windows.net/app1/$1
     • 同理为app2.example.com创建规则，目标URL替换为/app2/$1
   • 补充SPA路由兼容规则：针对每个域名添加404处理规则，匹配URLapp1.example.com/*，设置「Custom Error Page」为404，指向/app1/index.html；app2.example.com对应指向/app2/index.html，解决SPA刷新页面404的问题。

注：非企业版计划默认提供5条Page Rules，完全满足少量域名的场景需求。

问题2：是否可通过Cloudflare Workers实现路径重写和头部调整？ #

完全可以，且在域名数量多、逻辑复杂时，Worker比Page Rules更灵活：

1. 核心实现脚本 #

编写Worker脚本，完成域名匹配、路径重写、SPA路由兼容及头部调整：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  let targetPath = ''

  // 根据域名匹配对应SPA路径
  switch(url.hostname) {
    case 'app1.example.com':
      targetPath = '/app1' + url.pathname
      break
    case 'app2.example.com':
      targetPath = '/app2' + url.pathname
      break
    default:
      return new Response('无效域名', { status: 400 })
  }

  // 构造指向Azure存储的请求
  const azureUrl = new URL('https://mystorageaccount.z6.web.core.windows.net' + targetPath)
  const newRequest = new Request(azureUrl, {
    method: request.method,
    headers: request.headers,
    body: request.body,
    redirect: 'follow'
  })

  let response = await fetch(newRequest)

  // SPA路由处理：404时返回对应SPA的index.html
  if (response.status === 404) {
    const indexPath = targetPath.split('/').slice(0,2).join('/') + '/index.html'
    const indexRequest = new Request(`https://mystorageaccount.z6.web.core.windows.net${indexPath}`, {
      method: 'GET',
      headers: request.headers
    })
    response = await fetch(indexRequest)
  }

  // 自定义响应头部（示例：添加缓存控制）
  const modifiedHeaders = new Headers(response.headers)
  modifiedHeaders.set('Cache-Control', 'public, max-age=3600')

  return new Response(response.body, {
    status: response.status,
    headers: modifiedHeaders
  })
}

2. 部署与路由绑定 #

• 在Cloudflare Workers控制台创建新Worker，粘贴脚本并替换域名、存储账户信息。
• 为每个自定义域名添加Worker路由，比如app1.example.com/*和app2.example.com/*都指向该Worker。

Worker优势：不受Page Rules数量限制，能灵活处理复杂逻辑，非企业版计划提供每天10万次免费请求额度，完全覆盖中小流量场景。

内容的提问来源于stack exchange，提问作者ZSH