PR后Firebase Hosting部署正常，合并后报invalid-api-key错误如何解决

核心问题分析 #

auth/invalid-api-key错误说明前端构建产物中没有正确注入有效的Firebase API Key，大概率是构建时环境变量加载异常导致的——你的PR工作流能正常运行，但合并到main后的工作流在环境变量读取或构建模式上存在差异。

具体排查与修复步骤 #

1. 检查构建命令的环境模式 #

绝大多数前端框架（如Vue、React、Vite）默认npm run build会使用生产环境模式，此时会优先读取.env.production文件，而非你写入的.env.development。

• 打开front/package.json，查看scripts中的build命令：

  "scripts": {
    "build": "vite build" // 或类似vue-cli-service build、react-scripts build
  }
  

• 如果没有指定--mode development，构建时会自动切换到生产模式，忽略.env.development的变量。

修复方案：
修改工作流中的build命令，二选一即可：

# 方案1：指定构建模式为development，匹配你写入的环境文件
sh -ac ". $PWD/.env.development; npm run build --mode development"

# 方案2：改为写入.env.production（更适合生产环境部署逻辑）
echo "$ENV_DEVELOPMENT" > .env.production
sh -ac ". $PWD/.env.production; npm run build"

2. 验证环境变量的前缀是否符合框架要求 #

不同框架对环境变量有强制前缀要求，未加前缀的变量会在构建时被过滤：

• Vite：变量需以VITE_开头（如VITE_FIREBASE_API_KEY=xxx）
• Create React App：变量需以REACT_APP_开头
• Vue CLI：变量需以VUE_APP_开头

如果你的ENV_DEVELOPMENT中的Firebase变量没有对应前缀，前端代码将无法读取到有效配置。

修复方案：
更新GitHub Secrets中的ENV_DEVELOPMENT，给所有Firebase变量加上对应框架的前缀，示例：

VITE_FIREBASE_API_KEY=your-real-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-app.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id

3. 检查ENV_DEVELOPMENT的格式是否正确 #

确保Secrets中的ENV_DEVELOPMENT是纯文本KEY=VALUE格式，没有多余的引号、换行或转义字符，示例正确格式：

FIREBASE_API_KEY=abc123xyz
FIREBASE_AUTH_DOMAIN=myapp-dev.firebaseapp.com
FIREBASE_STORAGE_BUCKET=myapp-dev.appspot.com

格式错误会导致写入.env.development后变量解析失败，最终API Key为空或无效。

4. 对比PR工作流的构建逻辑 #

既然PR工作流能正常运行，直接对比两个工作流的run步骤：

• 确认PR工作流是否也使用了.env.development，还是用了其他环境文件
• 确认PR工作流的build命令是否指定了模式，或是用开发服务器（如npm run serve）而非生产构建命令

如果PR工作流用的是开发模式启动，而合并后的工作流用了生产模式构建，就会出现变量加载的差异。

验证方法（可选） #

在工作流中添加临时步骤，确认变量是否正确注入（测试完成后移除，避免泄露敏感信息）：

cd front
echo "$ENV_DEVELOPMENT" > .env.development
cat .env.development # 打印环境文件内容，确认变量正确写入
npm run build
cat dist/index.html | grep "FIREBASE_API_KEY" # 检查构建产物中是否包含API Key

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