Firebase部署后页面空白，出现auth/invalid-api-key错误求助

• ReactJS项目以Firebase为后端，通过Firebase Hosting部署
• 初始部署后访问正常，1小时后页面变为空白
• Windows浏览器控制台无报错，Ubuntu虚拟机中提示Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)
• 本地运行完全正常，存储密钥的.env文件未做修改
• 已启用GitHub Actions，但部署通过npm run build和firebase deploy手动完成
• 项目的firebase.json配置如下：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

• 确认环境变量构建时注入情况
  React生产构建时，仅会注入前缀为REACT_APP_的环境变量。部署后打开build/static/js下的主JS文件，搜索你的Firebase API密钥，确认是否存在：

  • 若不存在，检查.env文件是否在项目根目录，变量名是否符合REACT_APP_FIREBASE_API_KEY这类格式
  • 执行npm run build前，通过echo $REACT_APP_FIREBASE_API_KEY验证终端是否能读取到变量

• 检查Firebase API密钥的有效性与限制

  • 登录Firebase控制台，进入项目设置→对应Web应用的配置页，确认apiKey与本地.env中的值完全一致
  • 进入Google Cloud控制台→API和服务→凭据，找到对应Firebase API密钥，检查是否设置了过严的域名/IP限制：若仅允许本地域名访问，需将Firebase Hosting的域名（如xxx.web.app、xxx.firebaseapp.com）添加到允许列表

• 排查GitHub Actions的自动部署干扰
  即使手动部署，已启用的Actions可能触发自动部署覆盖内容：

  • 查看GitHub仓库的Actions页面，确认是否有自动执行的部署工作流
  • 若存在自动部署，检查工作流中是否配置了正确的环境变量，构建步骤是否正常

• 清除缓存强制刷新资源

  • 执行firebase deploy --only hosting时强制刷新缓存，或在Firebase控制台的Hosting→存储页面手动清除缓存
  • 在Ubuntu虚拟机中使用无痕模式访问，或清除浏览器缓存后重试

• 验证Firebase初始化代码
  确保初始化代码正确读取环境变量，避免硬编码：

  import { initializeApp } from "firebase/app";
  
  const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    // 其余配置项
  };
  
  const app = initializeApp(firebaseConfig);
  

内容的提问来源于stack exchange，提问作者Valentin-Constantin Baltatescu