Problem using environment variables in a VueJs3 + Nuxt3 application

Question

I have a Vue.js 3 + Nuxt.js 3 app built, and we have 2 environments: STAGING and PRODUCTION. I am trying to set things up so that our pipeline can build the app every time we push changes to the Staging or Main branches.

I have the following Dockerfile:

FROM node:16.13.0 AS build-stage

ARG NUXT_ENV_N_API
ARG NUXT_ENV_SETUP
ARG NUXT_ENV_VR_API

WORKDIR /app

COPY . .

RUN npm install
RUN npm run generate

FROM nginx AS runner-stage

COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY --from=build-stage /app/default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

This is my docker-compose-staging.yml:

version: '3'
services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3005:80"
    volumes:
      - /app/node_modules
      - .:/app
    environment:
      NUXT_ENV_SETUP: "staging"
      NUXT_ENV_N_API: "staging-url/api"
      NUXT_ENV_VR_API: "staging-v-url/api"

This is my docker-compose.yml:

version: '3'
services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3005:80"
    volumes:
      - /app/node_modules
      - .:/app
    environment:
      NUXT_ENV_SETUP: "production"
      NUXT_ENV_N_API: "production-url/api"
      NUXT_ENV_VR_API: "production-v-url/api"

According to our DevOps guy, these are our environment variables on AWS:

STAGING:

• NUXT_ENV_N_API: staging-url/api
• NUXT_ENV_SETUP: staging
• NUXT_ENV_VR_API: staging-v-url/api

PRODUCTION:

• NUXT_ENV_N_API: production-url/api
• NUXT_ENV_SETUP: production
• NUXT_ENV_VR_API: production-v-url/api

In my nuxt.config.ts file:

import packageJSON from './package.json';

export default defineNuxtConfig({
  ssr: false,
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ]
    }
  },
  runtimeConfig: {
    public: {
      baseURL: process.env.NUXT_ENV_N_API || 'production-url/api',
      vrUrl: process.env.NUXT_ENV_VR_API || 'production-v-url/api',
      setup: process.env.NUXT_ENV_SETUP || 'production',
      version: packageJSON.version
    }
  }
  // ...
})

If I log the environment variables using:

console.log('config.public.setup', config.public.setup);
console.log('config.public.baseURL', config.public.baseURL);
console.log('config.public.vrUrl', config.public.vrUrl);

Only the default values declared in the nuxt.config.ts file are shown, and not the environment variables.

Do I need to do any other setup to fix this?

Answer 1

I think I've just found the solution. Nuxt uses ARG instead of ENV. So my Dockerfile was changed to:

ARG NUXT_ENV_N_API 
ARG NUXT_ENV_SETUP 
ARG NUXT_ENV_VR_API 

and the docker-compose was changed to:

build: 
  context: . 
  dockerfile: Dockerfile 
  args: 
    NUXT_ENV_SETUP: staging 
    NUXT_ENV_N_API: staging-url/api 
    NUXT_ENV_VERUM_API: staging-v-url ... 

and the "environment:" declaration was removed.