.env 环境变量没有被使用

Question

I am trying to deploy my react web app to Firebase. I have a github workflow setup in order to deploy to a preview channel when pull request is created, and then when it is merged it will deploy that to be live. I have my firebase api key and other details stored in a.env file, which is in my.gitignore as to not check that into the git repository. However, these variables are not being used when the app is deployed to firebase. A blank page is displayed and an error in the console saying that an incorrect API key is being used and to please use correct api key. However, if I hardcode the exact same value into the config for firebase directly, it works without any issue. Any ideas on how to fix this? The.env example and how I am using it is below. (without the actual values in.env file of course). Also, the.env file is in the root of the project as well.

.env sample:

REACT_APP_API_KEY={{value}}
REACT_APP_AUTH_DOMAIN={{value}}
REACT_APP_DATABASE_URL={{value}}
REACT_APP_PROJECT_ID={{value}}
REACT_APP_STORAGE_BUCKET={{value}}
REACT_APP_MESSAGING_SENDER_ID={{value}}

firebase.js

const config = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_DATABASE_URL,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
};

Answer 1

I think that you should add .production at the end of the .env filename. It becomes .env.production ,then build and deploy.