'Docker-compose.yml environment is undefined in React

i am dockerizing my WebApp. I created one docker-compose.yml for all my services, API, MariaDB, PMA and React-Frontend.

I am using environments variables for DB_Host and API_Host within networks. The env DB_HOST:mariaDB for the API is working perfectly fine. But for the env in the frontend: API_HOST:cbdashboardapi is returning undefined.

Here is my docker-compose

version: "3"

services:
  mariaDB:
    image: mariadb
    networks:
      - db_network
    environment:
      - "MARIADB_ROOT_PASSWORD=123"
    container_name: mariaDB
    ports:
      - "3306:3306"

    volumes:
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql:ro

  pma:
    image: phpmyadmin
    networks:
      - db_network
    ports:
      - "81:80"
    environment:
      - "PMA_HOST=mariaDB"
      - "PMA_USER=root"
      - "PMA_PASSWORD=123"
      - "PMA_PORT=3306"
    depends_on:
      - "mariaDB"

  api:
    image: docker.io/library/cbdashboardapi
    ports:
      - "3000:3000"
    container_name: cbdashboardapi
    networks:
      - db_network
      - api_network
    environment:
      - "DB_HOST=mariaDB"
      - "DB_PORT=3306"
      - "DB_USERNAME=root"
      - "DB_PASSWORD=123"
      - "DB_DATABASE=cbdashboarddb"
    depends_on:
      - "mariaDB"

  cbdashboard:
    image: docker.io/library/cbdashboard
    container_name: cbdashboard
    networks:
      - api_network
    ports:
      - "8080:80"
    environment:
      - API_HOST="cbdashboardapi"

networks:
  db_network:
    external: true
  api_network:
    external: true

the Dockerfile for the React looks like this:

FROM node as builder
ARG API_HOST
ENV NODE_ENV production
COPY . /app
WORKDIR /app
COPY package.json .
COPY package-lock.json .
RUN npm ci --silent
RUN npm install [email protected] -g --silent
RUN npm run build
CMD ["npm", "start"]

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

To use the APIURL i got an APIURL.js file that looks like this:

let env = process.env.API_HOST
console.log(env)

export const APIURL = `http://${env}:3000`

and it logs allways undefined...

Where is the error?

I am thankfull for any help or advise



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source