使用Github Actions部署Firebase Hosting时出现invalid-api-key错误

问题背景 #

我在为Vue3/Vite4应用做安全优化：开发环境将Firebase API密钥存于.env文件，生产环境使用GitHub仓库Secrets避免密钥提交到仓库。但通过Firebase CLI生成的GitHub Actions工作流部署成功后，网站加载失败，抛出Firebase: Error (auth/invalid-api-key)错误。工作流运行时打印密钥变量显示正确，且开发环境完全正常。

当前配置 #

GitHub Actions 工作流配置 #

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main

env:
  FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_DATABATTLE_BOGA }}'
          channelId: live
          projectId: databattle-boga

Firebase初始化代码 #

import { initializeApp } from 'firebase/app'

export const firebaseApp = initializeApp({
    apiKey: import.meta?.env?.VITE_FIREBASE_API_KEY ? import.meta.env.VITE_FIREBASE_API_KEY : process.env.FIREBASE_API_KEY,
    authDomain: "databattle-boga.firebaseapp.com",
    projectId: "databattle-boga",
    storageBucket: "databattle-boga.appspot.com",
    messagingSenderId: "656991003457",
    appId: "1:656991003457:web:3b377396a4bb8680cf77c0",
    measurementId: "G-PP2V9JHQQT"  
});

问题原因及解决方法 #

核心问题 #

Vite仅会识别前缀为VITE_的环境变量并注入到静态构建产物中，当前工作流里设置的FIREBASE_API_KEY未映射到Vite所需的VITE_FIREBASE_API_KEY，导致生产构建后代码无法获取有效密钥。同时浏览器环境不存在process.env，初始化代码的 fallback 逻辑无效。

修复步骤 #

1. 调整GitHub Actions环境变量
   将工作流中的env字段修改为Vite识别的变量名：

   env:
     VITE_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
   

   这样Vite在构建时会自动将该变量注入到import.meta.env中。

2. 简化Firebase初始化代码
   移除冗余的process.env fallback，直接使用Vite注入的环境变量：

   import { initializeApp } from 'firebase/app'
   
   export const firebaseApp = initializeApp({
       apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
       authDomain: "databattle-boga.firebaseapp.com",
       projectId: "databattle-boga",
       storageBucket: "databattle-boga.appspot.com",
       messagingSenderId: "656991003457",
       appId: "1:656991003457:web:3b377396a4bb8680cf77c0",
       measurementId: "G-PP2V9JHQQT"  
   });
   

   开发环境下，只需在.env文件中定义VITE_FIREBASE_API_KEY=你的密钥即可正常读取。

更简便安全的实现方案 #

1. 使用Firebase Hosting内置环境变量
   直接在Firebase控制台的「Hosting > 环境变量」中添加VITE_FIREBASE_API_KEY，部署时Firebase会自动将变量注入应用，无需修改GitHub Actions配置，流程更简洁。

2. 关于Firebase API密钥的安全认知
   Firebase的API密钥本身属于公开可暴露的配置，它仅用于标识项目，不会直接导致安全风险。真正控制资源访问权限的是Firebase的安全规则，只要确保规则配置正确（限制未授权用户的读写操作），无需过度隐藏API密钥。

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