CODEWITHSUNDEEP
dockervue.jsdocker-composeenvironment-variablesdocker-image
delux
delux

Reputation: 1886

How to pass environment variable from docker-compose to the project?

I'm using AWS ECS repository for docker images.

My docker-compose.yml file looks like:

version: "3"
services:
  my-front-end:
    image: myFrontEndImage:myTag
    links:
      - my-back-end
    ports:
      - "8080:8080"
    logging:
      driver: 'json-file'
      options:
        max-size: "50m"
  my-back-end:
    image: myBackEndImage:myTag
    ports:
      - "3000:3000"
    logging:
      driver: 'json-file'
      options:
        max-size: "50m"

And what I need is, to be able to pass a environment variable from the docker-compose file, into my docker image.

What I tried was adding the lines for environment (following the example).

version: "3"
services:
  my-front-end:
    image: myFrontEndImage:myTag
    links:
      - my-back-end
    environment:
      - BACKEND_SERVER_PORT=3001
    ports:
      - "8080:8080"
    logging:
      driver: 'json-file'
      options:
        max-size: "50m"
  my-back-end:
    image: myBackEndImage:myTag
    ports:
      - "3000:3000"
    logging:
      driver: 'json-file'
      options:
        max-size: "50m"

And then in my project (which is a VueJS project) I'm trying to access it by process.env.BACKEND_SERVER_PORT. But I do not see my value and when I tried console.log(process.env); I see that it has only the value {NODE_ENV: "development"}.

So my question here is, how to pass the env variable from the docker-compose to my docker image, so that I will be able to use it inside my project?

Everything in the project works fine, I'm working on this project a long time and docker-compose file works, it's just, now when I have a need of adding this environment variable, I can't make it work.

EDIT: adding few more files, per request in comment.

The .Dockerfile for my-front-end looks like:

FROM node:8.11.1
WORKDIR /app
COPY package*.json ./
RUN npm i npm@latest -g && \
    npm install
COPY . .
CMD ["npm", "start"]

As mentioned, this is an VueJS application and here is the part of package.json which you may be interested in:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
},

While the .Dockerfile for my-back-end looks like:

FROM node:8.11.1
WORKDIR /app/server
COPY package*.json ./
RUN npm i npm@latest -g && \
    npm install
COPY . .
CMD ["npm", "start"]

My back-end is actually an express.js app that is listening on a separate port and the app is placed in a folder server under the root of the project. Here is the part of package.json which you may be interested in:

"scripts": {
  "start": "nodemon src/app.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

Upvotes: 1

Views: 2515

Answers (1)

Alik Khilazhev
Alik Khilazhev

Reputation: 1117

I think you are doing everything right in terms of configuring docker-compose. And it seems like there is some nuances on passing an environment variable to VueJS application.

According to answers to this question you need to name your variables with VUE_APP_* to be able to get them from client-side

Upvotes: 1

Related Questions