Enviroment Variables not working in GCP in deployment APP - NuxtJS 3

Question

I'm trying to deploy my app in NuxtJS 3, using environment variables.

However, the environment variables are not being recognized when I deploy to GCP in a Cloud Run. Next I will show you my configuration.

This is my Docker file:

# Stage 1 - build

FROM node:14 AS builder
WORKDIR /app
COPY package\*.json ./
RUN  npm install
COPY . .
RUN npm run build

# Stage 2 - production

FROM node:14 AS final
WORKDIR /usr/src/app

ADD package.json .
ADD nuxt.config.ts .

COPY --from=builder /app/.nuxt ./.nuxt
COPY --from=builder /app/.output ./.output
COPY --from=builder /app/node_modules ./.output/server/node_modules

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000

EXPOSE 3000

ENTRYPOINT ["node", ".output/server/index.mjs"]

This is my nuxt.config.ts:

let enviroment = process.env.NODE_ENV !== 'production'

export default defineNuxtConfig({
    css: [
        ...
    ],
    postcss: {
        plugins: {
        ...
        },
    },
    runtimeConfig: {
        public: {
            baseUrl: enviroment ? process.env.BASE_URL_TST : process.env.BASE_URL_PRD
        }
    }
})

When I deploy my app in GCP, I'm using the following command:

gcloud run deploy ${APP_NAME_CLOUD_RUN} --image gcr.io/${APP_NAMESPACE}/${APP_NAME_CLOUD_RUN} --region us-central1 --tag blue --set-env-vars NODE_ENV=test,BASE_URL_TST=http://test.domain.org/api/,BASE_URL_PRD=http://prd.domain.org/api/

In my login.ts file (store in stores directory), I put this for check if my public URL have the value:

const config = useRuntimeConfig()
console.log('Configuration Runtime: ', config)

But in my browser, when I check the console.log of my useRuntimeConfig() function, I get the following:

config Runtime:
Proxy {
    app {
        baseURL: "/",
        buildAssetsDir: "/_nuxt/",
        cdnURL : ""
    },
    public { /* EMPTY */ } }
}

I check the environment variables in the cloud run and they are created correctly.

When I run the app using npm run dev on localhost, the variables do work (.env file). Am I doing something wrong?

I'm trying to deploy to GCP (Cloud Run) using the environment variables for the files in stores folder.

I try to make my project recognize these variables in the runtimeConfig section of nuxt.config.ts but it doesn't work for me.

I hope to be able to make the environment variables recognized to call the APIs according to the deployed environment.

Answer 1

I had the same problem and I was able to find a workaround for Cloud Run.

I had to add the public env variables into the Dockerfile as well in order for them to be accessible in nuxt.config.ts like this:

FROM node:18.15.0
WORKDIR /usr/src/app
COPY . ./
RUN npm install --legacy-peer-deps
EXPOSE 8080
ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=8080

## PUBLIC ENV VARS MUST BE PLACED HERE AS WELL, NEED TO FIND A FIX
ENV auth_cookie=publicvalue
ENV otherpublickey=otherpublicvalue

RUN npm run build
CMD ["npm", "run", "start"]

runtimeConfig in nuxt.config.ts now works as expected:

runtimeConfig: {
    public: {
      auth_cookie: process.env.auth_cookie,
      otherpublickey: process.env.otherpublickey
    }
}

This works, however I have to add the env values in 2 places (Dockerfile and within CloudRun).

Another important thing to note is that you don't want to include any private keys inside the Dockerfile as those will be included in the repository, so this only works for public keys.

For the private keys I didn't need any of those in the nuxt.config.ts file since any Nuxt 3 API endpoints can still easily access it via process.env and those work as normal in Cloud Run.

There likely is a better way but the above solution is the best I was able to come up with for me.

In trying to find a better way to handle this and came across this question which had some clues but couldn't really get anything working: How to access cloud run environment variables in Dockerfile