Multi-stage docker build reactjs_nginx's first stage not take environment variable-CodePudding

I use docker compose for the stack of Django Nginx Reactjs_Nginx. The Django and Nginx take environment variables successfully from .env file. But the Reactjs_Nginx does not.
I tried at local for ReactJs and the line bellow can takes environment variable. Even running npm run build and npx serve -s it still works.

const hostName = process.env.REACT_APP_BACKEND_HOST || "http://localhost:8000/";

After run docker-compose up --build, I attach shell of the reactjs_nginx container, and run printenv to check, and still see the required environment variables.
Why does the builder stage not take the environment variable?

FROM node:16.15-alpine AS builder
ENV NODE_ENV production
WORKDIR /app
COPY package* /app/
RUN npm install --only=production
COPY . .
RUN npm run build

FROM nginx:1.21.0-alpine as production
ENV NODE_ENV production
COPY --from=builder  /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
CMD ["nginx", "-g", "daemon off;"]

version: '3.9'

services:
  backend:
    build: 
      context: ./backend
      dockerfile: ./docker/django/Dockerfile
    env_file:
      - .env
    command: gunicorn resume_builder.wsgi -w ${GUNICORN_WORKER_COUNT} -b 0.0.0.0:${DJANGO_PORT}
    networks:
      - resume_builder_network

  backend_nginx:
    build: ./backend/docker/nginx
    volumes:
      - ./backend/docker/nginx/templates:/etc/nginx/templates
    ports: 
      - "${BACKEND_PORT}:${BACKEND_PORT}"
    env_file:
      - .env
    networks:
      - resume_builder_network
    depends_on:
      - backend

  frontend:
    build: 
      context: ./frontend
      target: production
    env_file:
      - .env
    ports:
      - ${FRONTEND_PORT}:${FRONTEND_PORT}
    networks:
      - resume_builder_network

networks:
  resume_builder_network:

CodePudding user response：

Environment variables are only available at run-time. They're not available when the image is built.

You have to use build args for that: https://docs.docker.com/compose/compose-file/compose-file-v3/#args