5

I want to dockerize my vuejs app and to pass it environment variables from the docker-compose file.

I suspect the app gets the environment variables only at the build stage, so it does not get the environment variables from the docker-compose.

vue app:

process.env.FIRST_ENV_VAR

Dockerfile:

FROM alpine:3.7

RUN apk add --update nginx nodejs

RUN mkdir -p /tmp/nginx/vue-single-page-app
RUN mkdir -p /var/log/nginx
RUN mkdir -p /var/www/html

COPY nginx_config/nginx.conf /etc/nginx/nginx.conf
COPY nginx_config/default.conf /etc/nginx/conf.d/default.conf

WORKDIR /tmp/nginx/vue-single-page-app

COPY . .

RUN npm install

RUN npm run build

RUN cp -r dist/* /var/www/html

RUN chown nginx:nginx /var/www/html

CMD ["nginx", "-g", "daemon off;"]

docker-compose:

version: '3.6'

services:

  app:
    image: myRegistry/myProject:tag
    restart: always
    environment:
      - FIRST_ENV_VAR="first environment variable"
      - SECOND_ENV_VAR="first environment variable"
    ports:
      - 8080:8080

Is there any way to pass environment variables to a web application after the build stage?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
nati nati
  • 73
  • 1
  • 8
  • you are already pass the ENV in your run stage , for build stage you need to use `Build ARGs` the problem must be somehting else ... – LinPy Aug 21 '19 at 07:55
  • possible duplicate: https://stackoverflow.com/questions/30494050/how-do-i-pass-environment-variables-to-docker-containers – Yasen Aug 21 '19 at 07:56
  • I know how to pass environment variables to the container, but once the app has been built it can't get any environment variable anymore – nati nati Aug 21 '19 at 12:48
  • 2
    I couldn't find how to solve this problem for Vue. But I found for Angluar. We can take the idea from there and use in Vue: https://www.jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/ Briefly: they have an env.js file that is not part of obfuscated code after build (it served as asset). So it can be replaced by mounted env.js right in environment. – Michael A. Dec 27 '19 at 13:59

4 Answers4

2

In vue js apps you need to pass the env variables as VUE_APP_ so in your case it should be VUE_APP_FIRST_ENV_VAR

Harloveleen Kaur
  • 82
  • 6
1

Based on this https://medium.com/@rakhayyat/vuejs-on-docker-environment-specific-settings-daf2de660b9, I have made a silly npm package that help to acomplish what you want.

Go to https://github.com/juanise/jvjr-docker-env and take a look to README file.

Basically just run npm install jvjr-docker-env. A new Dockerfile, entrypoint and json file will be added to your project.

Probably you will need to modify some directory and/or file name in Dockerfile in order to work.

Juan
  • 544
  • 6
  • 20
0

You can try this. The value of FIRST_ENV_VAR inside docker will be set to the value of FIRST_ENV_VAR_ON_HOST on your host system.

version: '3.6'

services:

  app:
    image: myRegistry/myProject:tag
    restart: always
    environment:
      - FIRST_ENV_VAR=$FIRST_ENV_VAR_ON_HOST
      - SECOND_ENV_VAR=$SECOND_ENV_VAR_ON_HOST
    ports:
      - 8080:8080
7_R3X
  • 3,904
  • 4
  • 25
  • 43
  • 4
    He knows how to pass environment variables to the container, but once the app has been built it can't get any environment variable anymore which is normal because the SPA is already built – walox Sep 27 '19 at 12:52
-3

As you can see in the docker docs docker-compose reference envs the defined environment values are always available in the container, not only at build stage.

You can check this by change the CMD to execute the command "env" to display all environments in your container.

If your application is not getting the actual values of the env variables it should be anything else related with your app

Facundo Diaz Cobos
  • 363
  • 2
  • 9
  • 1
    He knows how to pass environment variables to the container, but once the app has been built it can't get any environment variable anymore which is normal because the SPA is already built – walox Sep 27 '19 at 12:52