NextJS Not Recognizing Docker Built Env Variables from Secrets Manager

Question

I am having trouble running a GCP Cloud Build for my Docker Image using a NextJS app. Since my application is using API keys, I am using GCP Secret Manager to load my environment variables at build time, which I can confirm from logging are populated, but when my NextJS loads at runtime with the build, there is an error being thrown because the env variables are not populating.

I know NextJS can set env variables at build (next.config.ts) or runtime (.env file), but can't figure out where the disconnect is with NextJS not capturing these values.

In addition, since some API keys are secrets, I would not prefer to expose them to the client side with NEXT_PUBLIC_ unless I'm misinterpreting the security of that approach.

Here is my cloudbuild.yml file:

steps:
  - name: 'gcr.io/cloud-builders/docker'
    entrypoint: 'bash'
    args:
      - '-c'
      - |
        echo "GHOST_CONTENT_API environment variable: $$GHOST_CONTENT_API"
        echo "GA4_MEASUREMENT_ID environment variable: $$GA4_MEASUREMENT_ID"
        docker build -t us-central1-docker.pkg.dev/${PROJECT_ID}/repo/repo-website .
    secretEnv: ['GHOST_CONTENT_API', 'GA4_MEASUREMENT_ID']
availableSecrets:
  secretManager:
    - versionName: projects/${PROJECT_ID}/secrets/GHOST_CONTENT_API/versions/1
      env: 'GHOST_CONTENT_API'
    - versionName: projects/${PROJECT_ID}/secrets/GA4_MEASUREMENT_ID/versions/1
      env: 'GA4_MEASUREMENT_ID'

Which at build, correctly logs the values from secretManager:

BUILD
Already have image (with digest): gcr.io/cloud-builders/docker
GHOST_CONTENT_API environment variable: #####
GA4_MEASUREMENT_ID environment variable: GTM-####

The error comes in when a module in the NextJS using the GHOST_CONTENT_API is missing the key at runtime.

Here is my Dockerfile:

FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm install --omit=dev --production
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Finally I tested with layout.tsx to see if the client or server side version of the ENV is loaded and both come back undefined:

console.log('ENV Variables - Layout.tsx')
console.log('Client ENV') // undefined
console.log(process.env.NEXT_PUBLIC_GHOST_CONTENT_API)
console.log('Server ENV') // undefined
console.log(process.env.GHOST_CONTENT_API)

Hiren F · Accepted Answer · 2023-10-21 05:51:00Z

0

With Google Kubernetes, you need to apply env variables, while you are trying to run the docker image. For that look at deploy part, rather than build part of the flow. Its within your workload I believe. Ref: How to set up an environment variables on google kubernetes engine?

For the case when you are not using GKE service, and in standard docker, you can pass env vars this way https://docs.docker.com/engine/reference/commandline/run/,

Or best solution would be to write the part in our dockerFile to create .env file from our build time env vars.

edited Oct 21, 2023 at 5:51

answered Oct 20, 2023 at 11:55

Hiren F

5292 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cphill Over a year ago

Does this Kubernetes solution operate like Docker? I'm not using Google Kubernetes

Hiren F Over a year ago

For Direct Docker, you can pass env vars this way https://docs.docker.com/engine/reference/commandline/run/, Or best solution would be to write the part in our dockerFile to create .env file from our build time env vars. (updated the answer :) ) And yes, Kubernetes is good way to deploy our dockers on GCP.

Collectives™ on Stack Overflow

NextJS Not Recognizing Docker Built Env Variables from Secrets Manager

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related