Docker runtime Environment Variables doesn't work #15651

@jamesmosier actually just tried on my setup (I am running late on everything so I did not have to create example, but will do it soon, sorry) Anyway I tested in a way that next.config.js is setup as

module.exports = {
  publicRuntimeConfig: {
    myPublicVar: process.env.FANCY_ENV_VAR,
  },
}

looks like next.config.js dont have access to the environments like this on runtime because I need to access a sensitive variables that should not be on client side when they open the webpage. On the other hand, your setup works fine which is not what I am actually expecting from app.

@gyto23 Part of the reason you may be experiencing inconsistent results is pages that are statically-generated can't take advantage of the runtime config. I'm in a similar situation as you, and unfortunately, it's not clear I can take advantage of statically generated pages until the static generation is pushed off to runtime.

@mAAdhaTTah which super odd, right? I am trying to build a nextjs project using a docker compose option where variables actually running of the scripts that I wrote to deploy application to the cloud. In addition, it makes harder every time to remember which script should go and what env var have to be used in, that why I came up with idea to use runtime var to populate them in the script after the build is done

@gyto23 Yeah... we ended up using a bit of a hack to ensure none of the static HTML gets built during the build and it's all generated at runtime. We did this by using gSP but returning an empty array during build for the paths and using fallback: 'unstable_blocking', then when the first request comes in, we return the real array of paths, so the HTML isn't generated until the first request, which allows it to use the runtime cars.

I'd prefer this to be a "blessed" implementation, but given Vercel itself doesn't run on Docker, I'm not sure they're planning on making Docker support easier.

@mAAdhaTTah its really interesting hack you did. However, I prefer not to implement any weird hacks on the platform I am developing in. I have battle with nextJs for months, and only way I come up to avoid further issues is to use getServerSideProps and pass the keys I need to the higher components, regarding the runtime env var is still big question to us how to solved, even after using fancy way export on publicRuntimeConfig because it might only work vercel platform, Docker ignoring it for some reason

@kyma per my research still not, waiting for vercel team to this treat and read about issues my team and I have, hope they going to see it one day

#17641 (reply in thread)

Guys I found the solution, basically if you don't really need https://nextjs.org/docs/advanced-features/automatic-static-optimization

Then just add an empty

//pages/_app.js|.tsx
MyApp.getInitialProps = async (appContext: AppContext) => {
  const appProps = await App.getInitialProps(appContext)

  return { ...appProps }
}

Then you will be able to access publicRuntimeConfig env variables from client in runtime even on your Dockerized app on stage/prod

NB: App comes from here:

import App from 'next/app'

@timneutkens Is this a feature or a bug?

@timneutkens More like a bug, but facing the same issue I still have, and it was a year ago :)

Any updates on this?

I'm using the suggested dockerfile but runtime configs are not working.

I found that using the suggested dockerfile won't work, replace it with the following:
The main changes are that we copy all the build folder from the builder stage instead of only the js files, and then start the container with the yarn start command, which makes it work. Probably something in the optimization process there messes it up, not really sure, but that's a good workaround

# Install dependencies only when needed
FROM node:16-alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# Rebuild the source code only when needed
FROM node:16-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED 1
ENV DOCKER_BUILD 1

RUN yarn build


# Production image, copy all the files and run next
FROM node:16-alpine AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/ ./

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["yarn", "start"]