GitHub 持续部署到 Firebase 托管和环境变量

Question

I am currently working on a React application with Firebase initialised. I am initialising my React App with Firebase by doing the following:

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'

const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
})

const db = firebase.firestore()

export { db, app }

For obvious reasons, I do not want to push my env file to GitHub. But if I do not, my application build fails. I am wondering how I can configure GitHub to house my env variables and for my production build to use the GitHub env variables. I have attempted to set up a GitHub build workflow, which contains the env variables, but my build still seems to fail.

On a separate note, I am curious how much of a security risk it is for my Firebase config to be exposed. I read if my application is using an email/password sign-in method, I should protect these variables. Any advice, suggestions, critiques would be much appreciated.

Answer 1

Just use GitHub Actions with secrets and echo with the runner:

- name: 🗄️ Provide credentials
  id: firebase-credentials
  run: echo 'const app = firebase.initializeApp({apiKey: "${{ secrets.FIREBASE_API_KEY }}", ... })' > ./some.js

Answer 2

You can use Firebase Cloud Functions and set an environment variable in the terminal:

firebase functions:config:set someservice.key="API KEY" someservice.id="CLIENT ID"

For example, to set up the Cloud Function for Firebase:

firebase init functions
npm install --save firebase-functions@latest
npm install -g firebase-tools

You can then access the variables from a function:

const functions = require('firebase-functions');
const request = require('request-promise');

exports.userCreated = functions.database.ref('/users/{id}').onWrite(event => {
  let email = event.data.child('email').val();

  return request({
    url: 'https://someservice.com/api/some/call',
    headers: {
      'X-Client-ID': functions.config().someservice.id,
      'Authorization': `Bearer ${functions.config().someservice.key}`
    },
    body: {email: email}
  });
});