docker compose with create react app procedure 未定义的环境变量

Question

I have a problem when I declare environment variables in the docker-compose.yml file, but when I try to read them I get "undefined".

My steps:

I created a React app with "create react app", then I ran "eject" (but not changed anything yet). Also, I added Ngix to the docker.

Then I created a Dockerfile and added it to the root:

FROM node:alpine

WORKDIR '/app'

COPY ./package.json ./

RUN npm i

COPY . .

CMD ["npm", "run", "start"]

Then I created the docker-compose.yml file:

version: '3'
services:
  nginx:
    restart: always
    build:
      dockerfile: Dockerfile
      context: ./nginx
    ports:
      - '3050:80'
  client:
    build:
      context: ./client
      dockerfile: Dockerfile
      args:
        - MAXIMUM_CAMERAS_COUNT=9
    volumes:
      - /app/node_modules
      - ./client:/app

Then i do "docker-compose up --build" and it works fine.
But when I do somewhere in the app:

console.log('process.env.MAXIMUM_CAMERAS_COUNT:', process.env.MAXIMUM_CAMERAS_COUNT);

I get "undefined".

Already tried:
-Add to Dockerfile:

ARG MAXIMUM_CAMERAS_COUNT
ENV MAXIMUM_CAMERAS_COUNT $MAXIMUM_CAMERAS_COUNT

and in the docker-compose.yml:

  args:
    - MAXIMUM_CAMERAS_COUNT=9

-Add to compose-docker.yml:

 environment: - MAXIMUM_CAMERAS_COUNT=9

-Add to compose-docker.yml:

 environment: MAXIMUM_CAMERAS_COUNT: 9

Any other ideas?

Answer 1

如本文档中所述，您需要在变量前加上REACT_APP_前缀，因此在您的情况下，它将是REACT_APP_MAXIMUM_CAMERAS_COUNT 。