Firebase App Hosting接入Cloudflare代理失败，求解决方案

一、先优化Firebase自身缓存，从根源降低TTFB #

如果Firebase自带CDN无法命中缓存，优先解决这个问题，不一定需要额外接入Cloudflare：

• 配置Next.js缓存头：在next.config.js中通过headers字段为不同资源设置缓存策略：

  module.exports = {
    async headers() {
      return [
        {
          source: '/_next/static/:path*',
          headers: [
            {
              key: 'Cache-Control',
              value: 'public, max-age=31536000, immutable',
            },
          ],
        },
        {
          source: '/api/:path*',
          headers: [
            {
              key: 'Cache-Control',
              value: 'public, s-maxage=60, stale-while-revalidate=120',
            },
          ],
        },
      ];
    },
  };
  

• 补充Firebase Hosting缓存规则：在firebase.json的hosting字段中添加全局或路径级别的缓存配置，确保覆盖Next.js的设置：

  {
    "hosting": {
      "headers": [
        {
          "source": "**/*.@(js|css|png|jpg|jpeg|gif|svg|ico)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public, max-age=31536000, immutable"
            }
          ]
        },
        {
          "source": "/api/**",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public, s-maxage=60, stale-while-revalidate=120"
            }
          ]
        }
      ],
      "rewrites": [
        {
          "source": "**",
          "function": "nextjsServerless"
        }
      ]
    }
  }
  

• 验证缓存状态：用浏览器DevTools的Network面板查看响应头的x-cache（Firebase CDN标识），确认静态资源是否显示HIT。若仍为MISS，排查是否有动态参数附加在静态资源URL上，或手动提交静态资源到Firebase CDN预热。

二、Cloudflare与Firebase App Hosting的正确配置方案 #

若必须接入Cloudflare，按以下步骤避免域名失效和Backend错误：

• 正确完成域名关联与解析：
  1. 在Firebase控制台添加自定义域名，获取需要验证的TXT记录，在Cloudflare DNS中添加该记录，等待Firebase验证完成（状态变为「已完成」）。
  2. 在Cloudflare DNS中添加CNAME记录，将自定义域名指向Firebase提供的目标域名（如your-project.web.app），并开启橙色云（代理模式）。
• 禁用Cloudflare冲突功能：
  • 关闭「自动HTTPS重定向」：Firebase已自带HTTPS，避免重定向循环。
  • 关闭「Rocket Loader」：Next.js的客户端渲染逻辑与该功能冲突，易导致加载异常。
  • 关闭「Email Obfuscation」「Mirage」等非必要功能，减少请求干扰。
• 配置Cloudflare缓存规则：
  • 对静态资源路径（/_next/static/**、/*.js、/*.css等）设置「缓存级别：缓存一切」，TTL设为365天。
  • 对动态内容（/api/**、SSR页面路径）设置「缓存级别：不缓存」或「缓存静态内容」，避免缓存动态数据。
  • 添加页面规则，对动态路由设置「绕过缓存」，确保实时请求能到达Firebase后端。
• 解决「Backend not found」错误：
  • 将Cloudflare SSL模式设为「严格」：Firebase提供完整的SSL证书，严格模式可保证端到端加密，避免证书不匹配导致的后端连接失败。
  • 保留原始Host头：在Cloudflare页面规则中为自定义域名添加「保留原始Host头」规则，确保请求正确转发到Firebase的后端服务器。
  • 检查Firebase日志：在Firebase控制台的「Hosting > 日志」中查看请求是否到达，是否有域名不匹配的错误，若有则重新确认自定义域名的关联状态。

三、排查与验证 #

• 用curl -I https://your-domain.com命令查看响应头，确认Cache-Control、x-cache、cf-cache-status等字段是否符合预期。
• 测试不同地区的访问速度，通过Cloudflare Analytics查看缓存命中比例，调整缓存规则。
• 若TTFB仍无改善，检查Next.js的SSR逻辑是否存在性能瓶颈，比如数据库查询慢、API请求阻塞等，优先优化应用本身的响应速度。

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