GCP上的Firebase + Next.js无服务器-如何管理登台，生产和本地 [英] Firebase + Next.js serverless, on GCP - How to manage staging, production + local

问题描述

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

I'm using React with next.js and Google Cloud functions to serve the app. I also use firebase. I'm looking for the best way to automatically configure the staging and production configuration for the 3 environments.

• 生产:使用生产凭据
• 登台:使用登台凭证
• 本地:也使用暂存凭据

我有两个Firebase项目，当前使用我的应用程序中的 firebase.js 文件在配置之间进行切换.我换出配置对象，然后部署.我希望能够在本地运行该应用程序，无论是在阶段运行还是在生产环境下运行，都不会更改部署，因为这会导致错误.

I have two Firebase projects and currently switch between the configuration using the firebase.js file in my app. I swap out the config object, then deploy. I want to be able to run the app locally, and both on staging and production without changing anything on deploy as it leads to errors.

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

The issue for me is setting different environment variables for the two cloud projects...I can read cloud environment variables I set up there, but only in the cloud functions environment, not in the client-facing app, which is where I am currently swapping the configuration.

我看到这可以通过以下方式解决:

I can see this being solved by:

1. Google Cloud Platform环境变量(但是我尝试从客户端读取它们而失败).也许我更改next.js配置以在运行时在云中读取某些内容，而不是在部署时进行配置更改?
2. 本地nextjs环境配置，但这对两台不同的服务器一无所知(只有与本地和云不完全匹配的dev vs prod)
3. 反应dotenv配置(与上面的要点相同)
4. webpack/npm配置，可在编译时交换配置
5. 在部署时基于 firebase使用[environment] 在命令行上交换环境

1. Google Cloud Platform environment variables (but I have tried and failed to read them from the client). Maybe I change the next.js config to read something up in the cloud when running, instead of doing the config change at deploy?
2. Local nextjs environment configuration but this doesn't know anything about the two different servers (only dev vs prod which don't match up exactly with local and cloud)
3. React dotenv configuration (same as the point above)
4. webpack / npm configuration that swaps the config when compiling
5. Swapping env based on firebase use [environment] on the command line at deploy time

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

Points #1 and #5 seem the most likely candidates for automatic and seamless deployment but I can't figure out how to read the GCP config variables in React and for #5 I don't know how to run a custom script that could swap variables based on the firebase project currently being used on the command line.

我在此看到的大多数信息都不能完全解决这个问题-所有env变量要么仅在云函数中，要么区分 local vs cloud 或 dev 与 prod ，但无法区分两个云和使用与其中一个云使用相同配置的本地.

Most info I have seen on this doesn't tackle this issue exactly - all the env variables are either only in the cloud functions or distinguish local vs cloud or dev vs prod, but cannot distinguish between two clouds and a local that uses the same config as one of the clouds.

一定有人对此有经验吗?

Someone must have had experience with this?

谢谢

保罗

推荐答案

我终于找到了答案.

在 React/nextjs 中找到处理此问题的最佳方法是结合使用我最初提出的问题#4和#5的想法.

The best way I've found to handle this in React/nextjs is to use a combination of my ideas #4 and #5 from my original question.

此处所示， firebase 具有cli上的 firebase apps:sdkconfig 命令:

As seen here, firebase has a firebase apps:sdkconfig command on the cli that:

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

Prints the Google services configuration of a Firebase App.

因此，您可以将脚本添加到 npm 中，从而在每次构建站点时创建一个 firebase 配置文件.由于它知道您当前正在命令行上使用的哪个Firebase项目，因此它知道在部署时要输出的配置版本.

So knowing that, you can add a script to npm that creates a firebase config file each time the site gets built. Since it knows which firebase project you are currently using on the command line, it knows the version of the config to output when you're deploying.

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

Then, in your package.json, you can set it to run.

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

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

Then, in your firebase.js or wherever you're configuring firebase in your app:

// 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使用)

This works both locally and in the cloud with no manual changes needed other than what you'd already be doing to switch the environment you're using (i.e. firebase use)

您可能需要调整运行哪个npm脚本或其他满足您需要的小东西，但是对于 production ， staging 而言，此常规设置对我来说非常有用和 development 环境.

You might need to tweak which npm script it runs on or other small things to suit your needs, but this general setup is working great for me with production, staging and development environments.

这篇关于GCP上的Firebase + Next.js无服务器-如何管理登台，生产和本地的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！