Firebase + Next.js 无服务器，在 GCP 上 - 如何管理暂存、生产 + 本地
Firebase + Next.js serverless, on GCP - How to manage staging, production + local
我使用带有 next.js 和 Google 云函数的 React 来为应用程序提供服务。我也使用火力基地。我正在寻找自动配置 3 种环境的暂存和生产配置的最佳方法。
- 生产：使用生产凭证
- 暂存：使用暂存凭据
- 本地：也使用暂存凭据
我有两个 Firebase 项目，目前在我的应用程序中使用 firebase.js 文件在配置之间切换。我换出配置对象，然后部署。我希望能够在本地 运行 应用程序，并且在暂存和生产阶段都可以，而无需在部署时更改任何内容，因为这会导致错误。
我的问题是为两个云项目设置了不同的环境变量...我可以读取我在那里设置的云环境变量，但只能在云函数环境中读取，而不是在面向客户端的应用程序中，这是我当前正在交换配置的地方。
我可以通过以下方式解决此问题：
- Google Cloud Platform 环境变量（但我已经尝试从客户端读取它们但失败了）。也许我更改 next.js 配置以在 运行ning 时读取云中的内容，而不是在部署时更改配置？
- 本地 nextjs 环境配置，但这对两个不同的服务器一无所知（只有开发与生产与本地和云不完全匹配）
- React dotenv配置（同上）
- 编译时交换配置的webpack/npm配置
- 部署时在命令行上基于
firebase use [environment]交换环境
第 1 点和第 5 点似乎是自动和无缝部署最有可能的候选者，但我不知道如何在 React 中读取 GCP 配置变量，而第 5 点我不知道如何 运行 一个自定义脚本，可以根据当前在命令行上使用的 firebase project 交换变量。
我在这方面看到的大多数信息并没有完全解决这个问题——所有环境变量要么只在云函数中，要么区分 local 与 cloud 或 dev vs prod，但无法区分两个云和使用与其中一个云相同配置的本地。
有人一定有这方面的经验吧？
我终于找到了答案。
我发现在 React/nextjs 中处理此问题的最佳方法是结合使用我最初问题中的想法 #4 和 #5。
正如所见 here，firebase 在 cli 上有一个 firebase apps:sdkconfig 命令：
Prints the Google services configuration of a Firebase App.
知道这一点后，您可以向 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 云函数的 React 来为应用程序提供服务。我也使用火力基地。我正在寻找自动配置 3 种环境的暂存和生产配置的最佳方法。
- 生产：使用生产凭证
- 暂存：使用暂存凭据
- 本地：也使用暂存凭据
我有两个 Firebase 项目，目前在我的应用程序中使用 firebase.js 文件在配置之间切换。我换出配置对象，然后部署。我希望能够在本地 运行 应用程序，并且在暂存和生产阶段都可以，而无需在部署时更改任何内容，因为这会导致错误。
我的问题是为两个云项目设置了不同的环境变量...我可以读取我在那里设置的云环境变量，但只能在云函数环境中读取，而不是在面向客户端的应用程序中，这是我当前正在交换配置的地方。
我可以通过以下方式解决此问题：
- Google Cloud Platform 环境变量（但我已经尝试从客户端读取它们但失败了）。也许我更改 next.js 配置以在 运行ning 时读取云中的内容，而不是在部署时更改配置？
- 本地 nextjs 环境配置，但这对两个不同的服务器一无所知（只有开发与生产与本地和云不完全匹配）
- React dotenv配置（同上）
- 编译时交换配置的webpack/npm配置
- 部署时在命令行上基于
firebase use [environment]交换环境
第 1 点和第 5 点似乎是自动和无缝部署最有可能的候选者，但我不知道如何在 React 中读取 GCP 配置变量，而第 5 点我不知道如何 运行 一个自定义脚本，可以根据当前在命令行上使用的 firebase project 交换变量。
我在这方面看到的大多数信息并没有完全解决这个问题——所有环境变量要么只在云函数中，要么区分 local 与 cloud 或 dev vs prod，但无法区分两个云和使用与其中一个云相同配置的本地。
有人一定有这方面的经验吧？
我终于找到了答案。
我发现在 React/nextjs 中处理此问题的最佳方法是结合使用我最初问题中的想法 #4 和 #5。
正如所见 here，firebase 在 cli 上有一个 firebase apps:sdkconfig 命令：
Prints the Google services configuration of a Firebase App.
知道这一点后，您可以向 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 环境。