title: Deploying Nuxt with Docker, env variables not registering and unexpect API call?
body: <p>I am re-re-re-reading the docs on <a href="https://nuxtjs.org/api/configuration-env" rel="noreferrer">environment variables</a> and am a bit confused.</p>
  
  <p>MWE repo: <a href="https://gitlab.com/SumNeuron/docker-nf" rel="noreferrer">https://gitlab.com/SumNeuron/docker-nf</a></p>
  
  <p>I made a plugin /plugins/axios.js which creates a custom axios instance:</p>
  
  <pre class="lang-js prettyprint-override"><code>import axios from 'axios'
  
  const apiVersion = 'v0'
  const api = axios.create({
    baseURL: `${process.env.PUBLIC_API_URL}/api/${apiVersion}/`
  })
  
  export default api
  </code></pre>
  
  <p>and accordingly added it to nuxt.config.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import colors from 'vuetify/es5/util/colors'
  
  import bodyParser from 'body-parser'
  import session from 'express-session'
  console.log(process.env.PUBLIC_API_URL)
  export default {
    mode: 'spa',
    env: {
      PUBLIC_API_URL: process.env.PUBLIC_API_URL || 'http://localhost:6091'
    },
    //  ...
     plugins: [
     //...
     '@/plugins/axios.js'
    ]
  }
  </code></pre>
  
  <p>I set <code>PUBLIC_API_URL</code> to <code>http://localhost:9061</code> in the <code>.env</code> file. Oddly, the log statement is correct (port <code>9061</code>) but when trying to reach the site there is an api call to port <code>6091</code> (the fallback)</p>
  
  <h1>System setup</h1>
  
  <pre><code>project/
  |-- backend (flask api)
  |-- frontend (npx create-nuxt-app frontend)
      |-- assets/
      |-- ...
      |-- plugins/
          |-- axios.js
      |-- restriced_pages
          |-- index.js (see other notes 3)
      |-- ...
      |-- nuxt.config.js
      |-- Dockerfile
  
  |-- .env
  |-- docker-compose.yml
  </code></pre>
  
  <h2>Docker</h2>
  
  <h3>docker-compose.yml</h3>
  
  <pre><code>version: '3'
  
  services:
    nuxt: # frontend
      image: frontend
      container_name: my_nuxt
      build:
        context: .
        dockerfile: ./frontend/Dockerfile
      restart: always
      ports:
        - "3000:3000"
      command: "npm run start"
      environment:
        - HOST
        - PUBLIC_API_URL
  
    flask: # backend
      image: backend
      container_name: my_flask
      build:
        context: .
        dockerfile: ./backend/Dockerfile
      command: bash deploy.sh
  
      environment:
        - REDIS_URL
        - PYTHONPATH
      ports:
        - "9061:9061"
      expose:
        - '9061'
      depends_on:
        - redis
  
    worker:
      image: backend
      container_name: my_worker
      command: python3 manage.py runworker
      depends_on:
        - redis
      environment:
        - REDIS_URL
        - PYTHONPATH
  
    redis: # for workers
      container_name: my_redis
      image: redis:5.0.3-alpine
      expose:
          - '6379'
  
  </code></pre>
  
  <h3>Dockerfile</h3>
  
  <pre><code>FROM node:10.15
  
  ENV APP_ROOT /src
  
  RUN mkdir ${APP_ROOT}
  WORKDIR ${APP_ROOT}
  
  
  COPY ./frontend ${APP_ROOT}
  
  RUN npm install
  
  RUN npm run build
  
  </code></pre>
  
  <h1>Other notes:</h1>
  
  <ol>
  <li><p>The reason the site fails to load is because the new axios plugin (<code>@/plugins/axios.js</code>) makes a weird call xhr call when the page is loaded, triggered by <code>commons.app.js</code> line 464. I do not know why, this call is no where explicitly in my code.</p></li>
  <li><p>I see this warning:  </p>
  
  <blockquote>
    <p>WARN  Warning: connect.session() MemoryStore is not designed for a production environment, as it will leak memory, and will not scale past a single process.</p>
  </blockquote></li>
  </ol>
  
  <p>I do not know what caused it or how to correct it</p>
  
  <ol start="3">
  <li>I have a "restricted" page:</li>
  </ol>
  
  <pre class="lang-js prettyprint-override"><code>// Create express router
  const router = express.Router()
  
  // Transform req &amp; res to have the same API as express
  // So we can use res.status() &amp; res.json()
  const app = express()
  router.use((req, res, next) =&gt; {
    Object.setPrototypeOf(req, app.request)
    Object.setPrototypeOf(res, app.response)
    req.res = res
    res.req = req
    next()
  })
  
  // Add POST - /api/login
  router.post('/login', (req, res) =&gt; {
  
    if (req.body.username === username &amp;&amp; req.body.password === password) {
      req.session.authUser = { username }
      return res.json({ username })
    }
    res.status(401).json({ message: 'Bad credentials' })
  })
  
  // Add POST - /api/logout
  router.post('/logout', (req, res) =&gt; {
    delete req.session.authUser
    res.json({ ok: true })
  })
  
  // Export the server middleware
  export default {
    path: '/restricted_pages',
    handler: router
  
  }
  </code></pre>
  
  <p>which is configured in <code>nuxt.config.js</code> as</p>
  
  <pre class="lang-js prettyprint-override"><code>serverMiddleware: [
      // body-parser middleware
      bodyParser.json(),
      // session middleware
      session({
        secret: 'super-secret-key',
        resave: false,
        saveUninitialized: false,
        cookie: { maxAge: 60000 }
      }),
      // Api middleware
      // We add /restricted_pages/login &amp; /restricted_pages/logout routes
      '@/restricted_pages'
    ],
  </code></pre>
  
  <p>which uses the default <code>axios</code> module:</p>
  
  <pre class="lang-js prettyprint-override"><code>//store/index.js
  import axios from 'axios'
  import api from '@/plugins/axios.js'
  
  //...
  
  const actions = {
     async login(...) {
          // ....
          await axios.post('/restricted_pages/login', { username, password })
          // ....
      }
  }
  
  // ...
  </code></pre>