Firebase 托管是否允许环境变量？

Question

我正在运行一个单页 React 应用程序，该应用程序使用 Firebase 授权和 Twilio API 进行视频聊天。在开发环境中本地一切工作正常，并且在我的 Firebase 托管生产版本中似乎一切工作正常，除了 Twilio 的 API 无法工作。

如何将应用程序部署到 .env 文件中具有环境变量的 Firebase 托管？

我的环境变量如下所示：

TWILIO_ACCOUNT_SID="XXXXXXXXXXXXXXXXX"

Answer 1

是的，Firebase Hosting 允许您使用环境变量。但是，Firebase Hosting 本身并不像传统服务器环境那样直接支持环境变量。相反，您通常使用其他 Firebase 服务（例如 Firebase 实时数据库、Firebase Cloud Firestore 或 Firebase 身份验证）管理特定于环境的配置和机密，并从前端代码或云功能访问它们。

因此您可以选择：

1. Env-cmd 这是一个实用程序，允许您将环境变量从外部文件加载到应用程序的环境中。当您想要将 API 密钥、数据库凭据或配置设置等敏感信息与代码库和版本控制系统分开时，它会特别有用。

npm install --save-dev env-cmd 或 yarn add --dev env-cmd

创建环境文件：为不同的环境创建单独的环境文件，例如 .env.development、.env.Production 等。这些文件应包含格式为 VARIABLE_NAME=value 的环境变量。例如：

REACT_APP_API_KEY=your_api_key_here

注意：如果您正在使用 Create React App (CRA) 项目，请确保为变量添加 REACT_APP_ 前缀，因为 CRA 会自动处理带有此前缀的变量。

修改 Package.json 脚本：更新 package.json 脚本以使用 env-cmd 从适当的文件加载环境变量。例如：

"scripts": {
  "start": "env-cmd -f .env.development react-scripts start",
  "build": "env-cmd -f .env.production react-scripts build",
  "test": "env-cmd -f .env.test react-scripts test",
  "eject": "react-scripts eject"
}

在此配置中， env-cmd -f .env.development 告诉 env-cmd 在运行开发服务器（npm start）时从 .env.development 文件加载环境变量，对于其他脚本也是如此。现在您可以像往常一样使用 npm 或yarn 运行脚本，env-cmd 将处理从指定文件加载环境变量。

然后，当您firebase部署时，环境变量将起作用，您可以在代码中的任何位置访问它们：

process.env.REACT_APP_API_KEY

2. 管理环境变量的其他常见做法 Firebase 托管：

Firebase 项目配置： Firebase 提供了一个 firebase.json 文件，您可以在其中配置 Firebase 托管的设置。虽然此文件不直接处理环境变量，但您可以使用它来指定不同的部署目标（例如开发、登台、生产）并自定义每个目标的托管行为。

特定于环境的文件：您可以为前端代码创建特定于环境的配置文件（例如 firebase-config.js），并将其包含在版本控制中。每个文件都包含与特定环境（开发、生产等）相关的设置。在构建过程中，您可以将这些文件中的占位符替换为实际的环境特定值。

Firebase 函数环境变量： 如果您将 Firebase Cloud Functions 与 Firebase 托管一起使用，则可以使用 Firebase CLI（firebase 函数：config：set 和 firebase 函数：config：get）管理函数的环境变量。可以在您的 Cloud Functions 代码中访问这些变量。

使用机密管理解决方案：对于 API 密钥等敏感信息，请考虑使用 Firebase 的机密管理功能或外部机密管理解决方案。 Firebase Secrets Management 可帮助安全地存储和访问 Firebase 项目中的敏感数据。

在处理 Firebase 项目中的环境变量和敏感信息时，请记住遵循安全最佳实践，例如避免在源代码中硬编码机密并限制对敏感数据的访问。

Answer 2

是的，如果您使用的是 ReactJS，只需声明以

REACT_APP

开头的环境变量即可。