如何在客户端隐藏firebaseConfig信息

Question

我正在通过设置身份验证功能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

我设置process.env了firebaseConfig。

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

这在本地环境中运行良好。
但在生产环境（elastic beanstalk）中，我不知道设置这些环境变量，因为它们位于客户端。

完整源代码在这里： https:
//github.com/jpskgc/article
生产 URL 在这里：
http://multidocker-env.vwnrixavuv.ap-northeast-1.elasticbeanstalk.com/

我希望 firebase 身份验证可以在生产环境（elastic beanstalk）中工作。
但实际情况并非如此。

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

Answer 1

公开 firebaseConfig 没有问题。这样问题就解决了。