我正在通过 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://imgur.com/a/XvjL4dh
最佳答案
没有公开 firebaseConfig 的问题。
我看看流动的文章。
所以问题已解决。
关于reactjs - 如何在客户端隐藏 firebaseConfig 信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57456270/