Firebase + Next.js serverless, on GCP - How to manage staging, production + local

问题

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.

• Production: Uses production credentials
• Staging: Uses staging credentials
• Local: Also uses staging credentials

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 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

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.

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?

Thanks,

Paul

回答1:

I've finally tracked down an answer to this.

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.

As seen in action here from an answer here, firebase has a firebase setup:web --json command on the cli. You can add a script to npm that creates a firebase config file each time the site gets built. Since it uses the firebase use [environment] it knows which version of the config to output when you're deploying:

package.json

  "scripts": {
   "clean": "rm -rf ./public/bundle.* ./src/firebase-config.json",
   "build": "npm run clean && npm run createfirebaseconf; NODE_ENV=production webpack -p;",
   "createfirebaseconf": "firebase setup:web --json > ./src/firebase-config.json",
   "serve": "firebase serve"
  },

Then, in your app.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;

// Instantiate a Firebase app.
const firebaseApp = firebase.initializeApp(firebaseConfig);

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)

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.

来源：https://stackoverflow.com/questions/54984776/firebase-next-js-serverless-on-gcp-how-to-manage-staging-production-loca