Docker compose is using the env which was built by Dockerfile, instead of using env_file located in docker-compose.yml directory because of webpack

Mohamed Sameer 0
Viewed 32

First I want to use my application .env variables on my webpack.config.prod.js, so I did this in my webpack file.

enter image description here

enter image description here

enter image description here

I am successfully able to access process.env.BUILD variables.

My application’s env has this configuration -

enter image description here

My nodejs web app is running fine locally, no problem at all. I want to build docker image of this application and need to use docker-compose to create the container.

I built my docker image and everything good so far.

now to create container, instead of docker run. I am using separate folder which consists of docker-compose.yml and .env files. Attached the screenshot below

![enter image description here

My docker-compose.yml has this code -

version: '3.9'
services:     
  api:
    image: 'api:latest'
    ports:
      - '17000:17000'
    env_file:
      - .env
    volumes:
      - ./logs:/app/logs
    networks:
      - default

My docker-compose .env has this redis details

enter image description here


My application has this logs -

enter image description here

I started my docker container by doing docker-compose up. Containers created and up and running, but the problem is

In the console, after connecting to redis.. process.env.REDIS_HOST contains the value called ‘localhost’ (which came from the first env where I used to build docker image). Docker compose .env is not getting accessed.

After spending 5+ hours. I found the culprit, It was webpack. On my initial code, I added some env related things in my webpack right? Once I commented those, taken a new build. Everything is working fine.

But my problem is how I can actually use process.ENV in webpack, also docker-compose need to use the .env from its directory.


Updated -

My DockerFile looks like this:

enter image description here

Just, It will copy the dist which contains bundle.js, npm start will do - pm2 run bundle.js.

environment-variables webpack docker-compose docker node.js
1 Answers

From what I know webpack picks up the .env at build time, not at runtime. This means that it needs the environment variables when the image is built.

The one you pass in docker-compose.yml is not used because by then your application is already built. Is that correct? In order to user your .env you should build the image with docker-compose and pass the env variables as build arguments to your Dockerfile.

In order to build the image using your docker-compose.yml, you should do something like this:

version: '3.9'
services:     
  api:
    image: 'api:latest'
    build:
      context: .
      args:
      - REDIS_HOST
      - REDIS_PORT
    ports:
      - '17000:17000'
    volumes:
      - ./logs:/app/logs

Note: the context above points to the current folder. You can change it to point to a folder where you Dockerfile (and the rest of the project is) or you can put your docker-compose.yml together with the rest of the project directly and then context stays ..

In your Dockerfile you need to specify these arguments:

FROM node:14 as build

ARG REDIS_HOST
ARG REDIS_PORT

...

With these changes you can build and run with docker-compose:

docker-compose up -d --build
useruGkL0
Related