GCP 上的 Firebase + Next.js 无服务器 - 如何管理暂存、生产 + 本地

Question

我正在将 React 与 next.js 和 Google Cloud 函数结合使用来为应用程序提供服务。我也使用firebase。我正在寻找为 3 个环境自动配置暂存和生产配置的最佳方法。

• 生产：使用生产凭证
• 登台：使用登台凭证
• 本地：也使用登台凭证

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

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

我可以看到这是通过以下方式解决的：

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

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

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

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

谢谢，

保罗

Answer 1

我终于找到了这个问题的答案。

我发现处理这个问题的最好方法React/nextjs是结合使用我最初问题中的想法 #4 和 #5。

正如所看到的在这里，firebase有一个firebase apps:sdkconfig在CLI该命令：

打印 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环境。