Environment variables returning undefined in prod
Answered
Silver cyprinid posted this in #help-forum
Silver cyprinidOP
Hello.
Most of my environment variables, or at least all prefixed with
For context, I build my app with docker, and the built app is shoved into a docker image. I cannot be passing arguments in CI as that would just be unwise and stupid.
How can I resolve this issue?
Most of my environment variables, or at least all prefixed with
NEXT_PUBLIC_ return undefined in production.For context, I build my app with docker, and the built app is shoved into a docker image. I cannot be passing arguments in CI as that would just be unwise and stupid.
How can I resolve this issue?
Answered by B33fb0n3
the .env file can be commited, yea. But DONT commit your .env.local or any secrets. Place your secrets into .env.local and the public ones in .env.
You may already read this: https://nextjs.org/docs/app/guides/environment-variables#environment-variable-load-order
You may already read this: https://nextjs.org/docs/app/guides/environment-variables#environment-variable-load-order
13 Replies
@Silver cyprinid Hello.
Most of my environment variables, or at least all prefixed with `NEXT_PUBLIC_` return `undefined` in production.
For context, I build my app with docker, and the built app is shoved into a docker image. I cannot be passing arguments in CI as that would just be unwise and stupid.
How can I resolve this issue?
can you share your docker compose and you Dockerfile?
@B33fb0n3 can you share your docker compose and you Dockerfile?
Silver cyprinidOP
Of course!
@B33fb0n3 can you share your docker compose and you Dockerfile?
Silver cyprinidOP
# Compose
services:
verification:
image: # image name
tty: true
stdin_open: true
environment:
NEXT_PUBLIC_APP_URL: ${NEXT_PUBLIC_APP_URL}
NEXT_PUBLIC_DISCORD_CLIENT_ID: ${NEXT_PUBLIC_DISCORD_CLIENT_ID}
DISCORD_CLIENT_SECRET: ${DISCORD_CLIENT_SECRET}
NEXT_PUBLIC_SENTRY_DSN: ${NEXT_PUBLIC_SENTRY_DSN}
networks:
- traefik
deploy:
update_config:
parallelism: 1
replicas: 1
labels:
# traefik labels, likely unrelated
networks:
traefik:
external: true
FROM oven/bun:1 AS base
WORKDIR /usr/src/app
# Hot reload
FROM base AS hot
VOLUME /usr/src/app
COPY package.json bun.lock tsconfig.json ./
RUN bun install --frozen-lockfile
COPY public ./public
COPY src ./src
COPY sentry.edge.config.ts sentry.server.config.ts next.config.ts postcss.config.mjs components.json ./
EXPOSE 3000
ENV NODE_ENV=development
CMD ["bun", "dev"]
# Build image for prod
FROM base AS build
COPY package.json bun.lock tsconfig.json ./
RUN apt-get update
RUN apt-get install ca-certificates -y
RUN bun install --frozen-lockfile
ARG VERSION
ARG COMMIT_SHA
ENV NEXT_PUBLIC_APP_VERSION=${VERSION:-latest}
ENV NEXT_PUBLIC_COMMIT_SHA=${COMMIT_SHA:-localbuild}
COPY src ./src
COPY public ./public
COPY sentry.edge.config.ts sentry.server.config.ts next.config.ts postcss.config.mjs components.json ./
RUN --mount=type=secret,id=SENTRY_AUTH_TOKEN \
SENTRY_AUTH_TOKEN="$(cat /run/secrets/SENTRY_AUTH_TOKEN)" \
VERSION="${VERSION:-latest}" \
bun run build
# Run prod image
FROM build AS prod
WORKDIR /usr/src/app
ARG VERSION
COPY --from=build /usr/src/app/package.json ./
COPY --from=build /usr/src/app/.next ./.next
COPY --from=build /usr/src/app/public ./public
EXPOSE 3000
ENV NODE_ENV=production
CMD ["bun", "run", "start"]as your variables are public, you can place them directly in your project at
.env. Then in your Dockerfile copy the .env file to your image, so its there as well. Then nextjs can access all variables@B33fb0n3 as your variables are public, you can place them directly in your project at `.env`. Then in your Dockerfile copy the .env file to your image, so its there as well. Then nextjs can access all variables
Silver cyprinidOP
Are you.. suggesting I should commit the .env file..?
@Silver cyprinid Are you.. suggesting I should commit the .env file..?
the .env file can be commited, yea. But DONT commit your .env.local or any secrets. Place your secrets into .env.local and the public ones in .env.
You may already read this: https://nextjs.org/docs/app/guides/environment-variables#environment-variable-load-order
You may already read this: https://nextjs.org/docs/app/guides/environment-variables#environment-variable-load-order
Answer
Silver cyprinidOP
Is there no way to make next listen to the runtime variables for both the public and private ones
@Silver cyprinid Is there no way to make next listen to the runtime variables for both the public and private ones
iirc docker will automatically place them in the resulting .env file. But that still means, that you need to copy it over
@B33fb0n3 the .env file can be commited, yea. But DONT commit your .env.local or any secrets. Place your secrets into .env.local and the public ones in .env.
You may already read this: https://nextjs.org/docs/app/guides/environment-variables#environment-variable-load-order
Flemish Giant
Use a .gitignore for that.
@Flemish Giant Use a .gitignore for that.
yes, in the default nextjs project its already pre configured, that .env files can be committed, while .env.local can't
Sun bear
Just pass
--env-file when spinning up docker compose. Docker compose loads env inside containers only when the env vars are available. If the env is just in .env file you'll have to explicitly pass when using docker compose or even reference the file in compose file.@Silver cyprinid solved?
@B33fb0n3 <@1344176447551574078> solved?
Silver cyprinidOP
Ya!