Firebase托管React项目时如何处理API KEY的配置与隐藏问题

Firebase 用于前端初始化的 apiKey 本质为项目身份标识符，设计上就允许公开在前端代码中，无需刻意隐藏，你项目的数据安全由 Firebase 安全规则负责管控，仅泄露该 apiKey 不会直接导致数据被未授权访问。

本地 .env 配置的生产生效方法 #

• 若你使用 Create React App 脚手架开发，所有需要在前端代码中访问的环境变量必须添加 REACT_APP_ 前缀，示例：REACT_APP_FIREBASE_API_KEY=你实际的APIKEY，只有带此前缀的变量才会被脚手架自动注入到项目的 process.env 对象中。
• 上线托管时，不需要把 .env 文件上传到代码仓库或服务器，直接在你所选托管平台（如 Vercel、Netlify、Firebase Hosting 等）的后台环境变量配置界面，填写和本地 .env 完全同名的键值对即可。

生产构建包读取密钥的逻辑 #

• 执行 npm run build 命令打包时，React 脚手架会直接把所有 process.env.REACT_APP_* 对应的变量值替换为字面量，硬编码到最终输出的 JS 静态文件里，不存在运行时读取外部配置的操作。
• 你在本地和生产环境的代码写法无需做任何修改，直接通过 process.env.REACT_APP_FIREBASE_API_KEY 就能拿到对应密钥值。
• 注意：只有 Firebase 这类允许前端公开的标识字段可以按上述方法配置，后端鉴权密钥、支付密钥等敏感字段绝对不能配置为 REACT_APP_ 开头的环境变量，这类字段必须放在后端服务做中转调用，避免泄露。

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