隐藏FirebaseConfig信息在客户端的操作方法

大家好，我们又见面了啊~本文《隐藏FirebaseConfig信息在客户端的操作方法》的内容中将会涉及到等等。如果你正在学习Golang相关知识，欢迎关注我，以后会给大家带来更多Golang相关文章，希望我们能一起进步！下面就开始本文的正式内容~

我正在通过 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;

这在本地环境中运行良好。

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

完整的源代码在这里：

https://github.com/jpskgc/article

制作网址在这里：

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

****更新****

我在 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://i.stack.imgur.com/m8hrx.jpg

解决方案

不存在公开 firebaseConfig 的问题。
我看一下流动的文章。
这样问题就解决了。

Is it safe to expose Firebase apiKey to the public?

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《隐藏FirebaseConfig信息在客户端的操作方法》文章吧，也可关注golang学习网公众号了解相关技术文章。