如何在运行时读取通过 docker-compose.yaml 文件传递​​的反应应用程序中的环境变量？

Question

I am unable to read environment variables declared in docker-compose.yml in my react app. The app is created using create-react-app

# docker-compose.yml

 ```
 image: sample-app
 container_name: sample-app
 restart: always
 ports:
   - "80:80"
 environment:
   REACT_APP_FIREBASE_API_KEY: "dsdsdsdsdHUXfYg5_QpQ"
   REACT_APP_FIREBASE_PROJECT_ID: "simple_project"
   REACT_APP_FIREBASE_MESSAGING_SENDER_ID: "22762762"
   REACT_APP_PRISMA_EXPRESS_URL: "http://trial.com:4000"
   REACT_APP_PYTHON_DEVELOPMENT_URL: "http://trial:4200"

 ```

The below is the config.js file in my react app. Here I try to read the environment variable which are passed through docker-compose.yml. The actual values passed through docker-compose are not read in config.js

 # config.js

 ```
   export const stored_values={
    //firebase configuration
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    backendURL: process.env.REACT_APP_PRISMA_EXPRESS_URL
   }

 ```

What am I doing wrong here ?

Answer 1

I implemented it with the help of these articles

https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/

How to access window variable in Javascript object?