title: Passing environment variables at runtime to Vue.js application with docker-compose
body: <p>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.</p>
  <p>Essentially, I'd like to pass command line arguments to <code>docker-compose up</code> 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.</p>
  <p>I'm running into several issues with this. Here are my docker files:</p>
  <p>Dockerfile for Vue.js application.</p>
  <pre class="lang-dockerfile prettyprint-override"><code>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
  </code></pre>
  <p><code>VUE_APP_FOO</code> is stored and accessible via Node's <code>process.env</code> objected and seems to be passed in at build time.</p>
  <p>And my docker-compose.yml:</p>
  <pre class="lang-yaml prettyprint-override"><code>version: '3.5'
  
  services:
      ms-sql-server:
          image: mcr.microsoft.com/mssql/server:2017-latest-ubuntu
          ports: 
              - &quot;1430:1433&quot;
      api:
          image: # omitted (pulled from url)
          restart: always
          depends_on: 
              - ms-sql-server
          environment:
              DBServer: &quot;ms-sql-server&quot;
          ports:
              - &quot;50726:80&quot;
      client:
          image: # omitted(pulled from url)
          restart: always
          environment:
              - VUE_APP_BAR=&quot;BAR&quot;
          depends_on: 
              - api
          ports:
              - &quot;8080:80&quot;
  </code></pre>
  <p>When I ssh into the client container with <code>docker exec -it &lt;container_name&gt; /bin/bash</code>, the VUE_APP_BAR variable is present with the value &quot;BAR&quot;. But the variable is not stored in the <code>process.env</code> 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.</p>
  <p>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 <code>docker-compose up</code>? Let me know if you need any clarification/more information.</p>