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

我正在使用React with next.js和Google Cloud函数为应用程序提供服务。我也使用firebase。我正在寻找为3种环境自动配置登台和生产配置的最佳方法

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

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

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

谷歌云平台环境变量，但我尝试过从客户端读取它们，但失败了。也许我会在运行时更改next.js配置以读取云中的内容，而不是在部署时更改配置？ 本地nextjs环境配置，但这不知道关于两个不同服务器的任何信息，仅dev vs prod与本地和云不完全匹配 React dotenv配置与上述点相同 编译时交换配置的webpack/npm配置 基于firebase在部署时在命令行上使用[environment]交换环境 第1点和第5点似乎最有可能实现自动无缝部署，但我不知道如何读取React中的GCP配置变量，第5点我不知道如何运行自定义脚本，该脚本可以根据命令行上当前使用的firebase项目交换变量

我在这方面看到的大多数信息都没有准确地解决这个问题——所有的env变量要么仅在cloud函数中，要么区分local与cloud或dev与prod，但无法区分两个云和一个与其中一个云使用相同配置的local

一定有人有这方面的经验

谢谢

---

保罗

我终于找到了答案

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

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

打印Firebase应用程序的Google服务配置

因此，您可以在npm中添加脚本，以便在每次构建站点时创建firebase配置文件。因为它知道您当前在命令行上使用的firebase项目，所以它知道您部署时要输出的配置版本

然后，在package.json中，可以将其设置为run

  "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使用

---

您可能需要调整它运行在哪个npm脚本上或其他一些小东西以满足您的需要，但是这个常规设置对于我来说在生产、登台和开发环境中非常有用。

我终于找到了答案

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

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

打印Firebase应用程序的Google服务配置

因此，您可以在npm中添加脚本，以便在每次构建站点时创建firebase配置文件。因为它知道您当前在命令行上使用的firebase项目，所以它知道您部署时要输出的配置版本

然后，在package.json中，可以将其设置为run

  "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使用

---

您可能需要调整它运行在哪个npm脚本上或其他一些小东西以满足您的需要，但是这个通用设置对于我来说在生产、登台和开发环境中非常有用。

从Firebase/GCP的角度来看，分离环境的唯一建议是为每个环境创建不同的项目。@DougStevenson对，是的，我在GCP中有两个不同的项目。我想知道的是，如何用正确的配置将代码推送到这两个环境中。我有一个运行firebase use production和firebase use default的代码库。那么现在，我怎样才能让这两个GCP项目

---

有正确的Firebase配置吗？GCF提供了一系列环境变量，可以帮助您确定运行的位置@Dough Stevenson是的，我在我的问题中提到了这些，但据我所知，客户无法使用它们，对吗？我正在使用无服务器，需要设置客户端应用程序。使用正确的配置。您需要在客户端上提出自己的首选解决方案。从Firebase/GCP的角度来看，分离环境的唯一建议是为每个环境创建不同的项目。@DougStevenson对，是的，我在GCP中有两个不同的项目。我想知道的是，如何用正确的配置将代码推送到这两个环境中。我有一个运行firebase use production和firebase use default的代码库。那么现在，我该如何使这两个GCP项目中的每一个都具有正确的Firebase配置呢？GCF提供了一系列环境变量来帮助您确定运行的位置@Dough Stevenson是的，我在我的问题中提到了这些，但据我所知，客户无法使用它们，对吗？我正在使用无服务器，需要设置客户端应用程序。使用正确的配置。您需要在客户端上提出自己的首选解决方案。是否有适当的文档可供Next.js使用Google Cloud功能和无服务器托管@paintedbicycleCould u请告诉我如何在CI服务器上使用您的脚本部署到Firebase主机？是否有适当的文档供Next.js使用Google云功能和无服务器托管@PaintedBicycleCoull您能告诉我如何在CI服务器上使用您的脚本部署到Firebase主机吗？