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

Posted 2023-02-22

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

【英文标题】：Firebase + Next.js serverless, on GCP - How to manage staging, production + local

【发布时间】：2019-07-25 20:32:45

【问题描述】：

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

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

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

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

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

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

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

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

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

【问题讨论】：

从 Firebase/GCP 的角度来看，分离环境的唯一推荐建议是为每个环境创建不同的项目。

@DougStevenson 是的，我在 GCP 中有两个不同的项目。我很好奇的是，如何使用正确的配置将我的代码推送到这两个环境。我有一个运行firebase use production 和firebase use default 的代码库。那么现在，我如何才能让这两个 GCP 项目中的每一个都具有正确的 Firebase 配置？

GCF 提供了一堆环境变量来帮助你弄清楚你在哪里运行。 cloud.google.com/functions/docs/…

@DougStevenson 是的，我在我的问题中引用了这些，但据我了解，它们对客户不可用，对吗？我正在使用无服务器，需要设置我的客户端应用程序。使用正确的配置。

您需要在客户端上提出自己喜欢的解决方案。

【参考方案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 环境。

【讨论】：

Next.js 是否有任何适当的文档可以使用 Google Cloud 功能托管并实现无服务器。 @paintedbicycle

您能告诉我如何在 CI 服务器上使用您的脚本部署到 Firebase 托管吗？