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:
PRODUCTION:
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?
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.