Firebase + Next.js 无服务器，在 GCP 上 - 如何管理登台、生产 + 本地

Question

我正在使用带有 next.js 和 Google Cloud 函数的 React 来为应用程序提供服务。我也使用火力基地。我正在寻找为 3 个环境自动配置暂存和生产配置的最佳方式。

• 生产：使用生产凭证
• 暂存：使用暂存凭据
• 本地：也使用暂存凭据

我有两个 Firebase 项目，目前在我的应用中使用 firebase.js 文件在配置之间切换。我换出配置对象，然后部署。我希望能够在本地运行应用程序，并且在暂存和生产环境中都无需更改任何部署内容，因为这会导致错误。

我的问题是为两个云项目设置不同的环境变量...我可以读取我在那里设置的云环境变量，但只能在云功能环境中，而不是在客户端- 面向应用程序，这是我目前正在交换配置的地方。

我可以通过以下方式解决这个问题：

1. Google Cloud Platform 环境变量（但我已尝试从客户端读取它们但未能成功）。也许我在运行时更改 next.js 配置以在云中读取某些内容，而不是在部署时更改配置？
2. 本地 nextjs 环境配置，但这对两个不同的服务器一无所知（仅 dev 与 prod，与本地和云不完全匹配）
3. React dotenv 配置（同上）
4. webpack / npm 配置在编译时交换配置
5. 在部署时在命令行上基于firebase use [environment] 交换环境

第 1 点和第 5 点似乎最有可能自动和无缝部署，但我不知道如何在 React 中读取 GCP 配置变量，而对于第 5 点，我不知道如何运行自定义脚本可以根据命令行上当前使用的firebase project 交换变量。

我在这方面看到的大多数信息并没有完全解决这个问题 - 所有环境变量要么仅在云函数中，要么区分 local 与 cloud 或 dev 与 prod，但无法区分在两个云和一个使用与其中一个云相同的配置的本地之间。

一定有人有这方面的经验吗？

Answer 1

我终于找到了答案。

我发现在React/nextjs 中处理此问题的最佳方法是结合我最初问题中的想法#4 和#5。

如here 所见，firebase 在 cli 上有一个 firebase apps:sdkconfig 命令：

打印 Firebase 应用的 Google 服务配置。

知道了这一点，您可以向npm 添加一个脚本，该脚本会在每次构建网站时创建一个firebase 配置文件。由于它知道您当前在命令行上使用的是哪个 firebase 项目，因此它知道您在部署时要输出的配置版本。

然后，在您的package.json 中，您可以将其设置为运行。

  "scripts": {
   ...
   "build": "npm run getconfig && next build",
   "getconfig": "firebase apps:sdkconfig web --json > ./firebase-config.json",
   ...
  },

然后，在您的 firebase.js 或您在应用中配置 firebase 的任何位置：

// Get the Firebase config from the auto generated file.
const firebaseConfig = require('./firebase-config.json').result.sdkConfig;

// Instantiate a Firebase app.
const firebaseApp = firebase.initializeApp(firebaseConfig);

这在本地和云端都有效，除了您已经在做的切换您正在使用的环境（即firebase use）之外，无需手动更改。

您可能需要调整它运行的 npm 脚本或其他小东西以满足您的需求，但这种通用设置对我来说非常适合 production、staging 和 development 环境。