Passing environment variables at runtime to Vue.js application with docker-compose

Question

This is my second post about this particular issue. I've since deleted that question because I've found a better way to explain what exactly I'd like to do.

Essentially, I'd like to pass command line arguments to docker-compose up and set them as environment variables in my Vue.js web application. The goal is to be able to change the environment variables without rebuilding the container every time.

I'm running into several issues with this. Here are my docker files:

Dockerfile for Vue.js application.

FROM node:latest as build-stage
WORKDIR /app

# Environment variable.
ENV VUE_APP_FOO=FOO

COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

VUE_APP_FOO is stored and accessible via Node's process.env objected and seems to be passed in at build time.

And my docker-compose.yml:

version: '3.5'

services:
    ms-sql-server:
        image: mcr.microsoft.com/mssql/server:2017-latest-ubuntu
        ports: 
            - "1430:1433"
    api:
        image: # omitted (pulled from url)
        restart: always
        depends_on: 
            - ms-sql-server
        environment:
            DBServer: "ms-sql-server"
        ports:
            - "50726:80"
    client:
        image: # omitted(pulled from url)
        restart: always
        environment:
            - VUE_APP_BAR="BAR"
        depends_on: 
            - api
        ports:
            - "8080:80"

When I ssh into the client container with docker exec -it <container_name> /bin/bash, the VUE_APP_BAR variable is present with the value "BAR". But the variable is not stored in the process.env object in my Vue application. It seems like something odd is happening with Node and it's environmental variables. It's like it's ignoring the container environment.

Is there anyway for me to access the container level variables set in docker-compose.yml inside my Vue.js application? Furthermore, is there anyway to pass those variables as arguments with docker-compose up? Let me know if you need any clarification/more information.

Answer 1

So I figured out how to do this in sort of a hacky way that works perfectly for my use case. A quick review of what I wanted to do: Be able to pass in environment variables via a docker-compose file to a Vue.js application to allow different team members to test different development APIs depending on their assignment(localhost if running the server locally, api-dev, api-staging, api-prod).

The first step is to declare your variables in a JS file inside your VueJS project (it can be defined anywhere) formatted like this:

export const serverURL = 'VUE_APP_SERVER_URL'

Quick note about the value of this string: it has to be completely unique to your entire project. If there is any other string or variable name in your application that matches it, it will get replaced with the docker environment variable we pass using this method.

Next we have to go over to our docker-compose.yml and declare our environment variable there:

docker-compose.yml

your_vuejs_client:
    build: /path/to/vuejs-app
    restart: always
    environment: 
        VUE_APP_SERVER_URL: ${SERVER_URL}
    ports:
        - "8080:80"

Now when you run docker-compose up in your terminal, you should see something like this: WARNING: The SERVER_URL variable is not set. Defaulting to a blank string.

After we have our docker-compose setup properly, we need to create a entrypoint script in the VueJS application to run before the app is launched via nginx. To do this, navigate back to your VueJS directory and run touch entrypoint.sh to create a blank bash script. Open that up and this is what I have in mine:

entrypoint.sh

#!/bin/sh

ROOT_DIR=/usr/share/nginx/html

echo "Replacing env constants in JS"
for file in $ROOT_DIR/js/app.*.js* $ROOT_DIR/index.html $ROOT_DIR/precache-manifest*.js;
do
  echo "Processing $file ...";

  sed -i 's|VUE_APP_SERVER_URL|'${VUE_APP_SERVER_URL}'|g' $file

done

sed -i 's|VUE_APP_SERVER_URL|'${VUE_APP_SERVER_URL}'|g' $file This line transverses your entire application for the string 'VUE_APP_SERVER_URL' and replaces it with the environment variable from docker-compose.yml.

Finally we need to add some lines to our VueJS application Dockerfile to tell it to run the entrypoint script we just created before nginx is started. So right before the CMD ["nginx", "-g", "daemon off;"] line in your Dockerfile, add the lines below:

VueJS Dockerfile

# Copy entrypoint script as /entrypoint.sh
COPY ./entrypoint.sh /entrypoint.sh

# Grant Linux permissions and run entrypoint script
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

After that, running docker-compose run -e SERVER_URL=yourserverapi.com/api, the serverURL constant we set in a JS file at the beginning will be replaced with whatever you supply in the docker-compose command. This was a pain to finally get working, but I hope this helps out anyone facing similar troubles. The great thing is that you can add as many environment variables as you want, just add more lines to the entrypoint.sh file and define them in the Vue.js application and your docker-compose file. Some of the ones I've used are providing a different endpoint for the USPS API depending on whether you're running locally or hosted in the cloud, providing different Maps API keys based on whether the instance is running in production or development, etc. etc.

I really hope this helps someone out, let me know if anyone has any questions and I can hopefully be of some help.

Answer 2

The client app runs on a web browser, but environment variables on are on the server. The client needs a way to obtain the environment variable value from the server.

To accomplish that, you have several options, including:

1. Leverage Nginx to serve the environment variable itself for this using an approach like one of these: nginx: use environment variables. This approach may be quick, more dynamic or more static depending on your needs, maybe less formal and elegant. Or

2. Implement a server API (Node.js?) that reads the environment variable and returns it to the client over an AJAX call. This approach is elegant, dynamic, API-centric. Or

3. Lastly if the environment variable is static per nginx instance per deployment, you could build the static assets of the Vue app during deployment and hard-code the environment variable right there in the static assets. This approach is somewhat elegant but does pollute client code with server details and is somewhat static (can only change on deployment).

Answer 3

As i posted here https://stackoverflow.com/a/63097312/4905563, I have developed a package that could help.

Try with npm install jvjr-docker-env take a look to README.md to see some examples of use.

Answer 4

Even though the question title says how to consume environment variables from vue.js side, the questioner's goal is to be able to configure backend api endpoint dynamically without rebuilding docker image.

I achieved it by using reverse proxy.

1. For dev run, configure reverse proxy on vue.config.js, which is consumed by vue-cli web server.
2. For nginx run, configure reverse proxy on nginx.conf. You can use nginx template to read environment variables.

This approach also eliminates the need for CORS configuration on web-api server side, since web api is called from vue app's web server, not from the browser directly.

More thorough working sample can be found on this commit.

vue.config.js:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://host.docker.internal:5000',
      },
    },
  },
};

nginx.conf:

...
http {
  ...
  include /etc/nginx/conf.d/*.conf;
}

nginx.default.conf.template:

  server {
    listen       80;
...
    location /api {
      proxy_pass ${WEBAPI_ENDPOINT};
    }
  }

Dockerfile:

...
COPY nginx.conf /etc/nginx/nginx.conf
COPY nginx.default.conf.template /etc/nginx/templates/default.conf.template

Answer 5

Add a static config.js script in index.html. This file is not processed by Webpack, but included verbatim. Use your docker-compose file or kubernetes manifest or AWS ECS task config or similar to override that file at run time.

For example, in my Vue project:

public/config.js

// Run-time configuration. Override this in e.g. your Dockerfile, kubernetes pod or AWS ECS Task.
// Use only very simple, browser-compatible JS.
window.voxVivaConfig = {};

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... -->

    <!-- Allow injection of run-time config -->
    <script async src="config.js"></script>
    
    <!-- ... -->
</head>
<body>
<div id="app" aria-busy="true">
    <noscript><p>This app requires JavaScript.</p></noscript>
</div>
</body>
</html>

src/config.js

function getRunTimeConfig() {
  if (typeof window.voxVivaConfig === "object") {
    return window.voxVivaConfig || {};
  }

  return {};
}

export default Object.freeze({
  appTitle: "My App",

  backEndBaseUrl: process.env.VUE_APP_BACK_END_BASEURL || "https://example.com",
  whatever: process.env.VUE_APP_WHATEVER || "",

  /**
   * Allow config specified at run time to override everything above.
   */
  ...getRunTimeConfig(),
});

Advantages

This puts all config in one place, and lets you choose which config values should be specified at compile time, build time or run time, as you see fit.