如何在客户端隐藏firebaseConfig信息答案

【问题标题】：How to hide firebaseConfig information in client side如何在客户端隐藏firebaseConfig信息
【发布时间】：2019-12-18 17:49:45
【问题描述】：

我正在通过firebase 设置身份验证功能。
它在我的本地 docker 环境中运行良好。
但它的firebaseConfig 位于客户端。
我想将firebaseConfig 信息隐藏为环境变量。

这是堆栈。

・client: react/axios
・api: golang/gin
・web server: nginx
・db: mysql
・container: docker
・ci-tool: travis
・deploy: aws elastic beanstalk

这是存储库结构

article
  ├ client
  ├   └ src
  │      └ firebase.ts
  ├ api
  ├ nginx
  └ docker-compose.yml

我在firebaseConfig 中设置了process.env。

//firebase.ts
import * as firebase from 'firebase';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: '',
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

firebase.initializeApp(firebaseConfig);

export default firebase;

这在本地环境中运行良好。
但是在生产环境（弹性豆茎）中，我不知道设置这些环境变量，因为它们在客户端。

完整的源代码在这里：
https://github.com/jpskgc/article
制作网址在这里：
http://multidocker-env.vwnrixavuv.ap-northeast-1.elasticbeanstalk.com/

我希望 Firebase 身份验证在生产环境中有效（弹性 beantalk）。
但实际没有。

Zr {code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly."}
code: "auth/invalid-api-key"
message: "Your API key is invalid, please check you have copied it correctly."
__proto__: Error

****更新****
我在docker-compose.yml 和elastic beanstalk 中设置了环境变量。
但仍然出现同样的错误。

//docker-compose.yml
  client:
    build:
      dockerfile: Dockerfile.dev
      context: ./client
    volumes:
      - /app/node_modules
      - ./client:/app
    environment:
      - REACT_APP_FIREBASE_API_KEY=${REACT_APP_FIREBASE_API_KEY}
      - REACT_APP_FIREBASE_AUTH_DOMAIN=${REACT_APP_FIREBASE_AUTH_DOMAIN}
      - REACT_APP_FIREBASE_DATABASE_URL=${REACT_APP_FIREBASE_DATABASE_URL}
      - REACT_APP_FIREBASE_PROJECT_ID=${REACT_APP_FIREBASE_PROJECT_ID}
      - REACT_APP_FIREBASE_MESSAGING_SENDER_ID=${REACT_APP_FIREBASE_MESSAGING_SENDER_ID}
      - REACT_APP_FIREBASE_APP_ID=${REACT_APP_FIREBASE_APP_ID}

这里是elastic beanstalk 环境变量设置：
https://imgur.com/a/XvjL4dh

【问题讨论】：

您不能在您的docker-compose.yml 中添加ENV 吗？
我不想将firebaseConfig 信息公开。如果它们列在docker-compose.yml 上，它们就会暴露在 github 上。
只在compose 中添加没有值的ARG 名称，然后在docker up 命令REACT_APP_FIREBASE_APP_ID=TEST && docker-ompose up 中传递值
它可能在本地环境中运行良好，但我说的是elastic beanstalk environment。我现在通过设置docker-compose.yml 和elastic beanstalk 环境变量来尝试它。但仍然发生同样的错误。
Elastic Beanstalk 控制台中定义的所有环境变量都将传递给容器。所以应该可以看到docs.amazonaws.cn/en_us/elasticbeanstalk/latest/dg/…

标签： reactjs firebase docker go amazon-elastic-beanstalk

【解决方案1】：

没有问题可以公开 firebaseConfig。
我看看流动的文章。
这样问题就解决了。

Is it safe to expose Firebase apiKey to the public?

【讨论】：