Problem

I’m setting up Docker environments for my Next.js application using Docker Compose. While the development environment works correctly, the production environment fails to recognize environment variables. The container builds without errors, but the application doesn’t seem to recognize the environment variables in production.

Project Structure

project_root/
├── docker/
│   ├── docker-compose.prod.yaml
│   ├── docker-compose.dev.yaml
│   ├── prod.Dockerfile
│   └── dev.Dockerfile
├── production.env
├── development.env
└── [other Next.js project files]

Production Environment

docker-compose.prod.yaml

version: '3'

services:
  semo-ai:
    container_name: semo-ai
    build:
      context: ../
      dockerfile: docker/prod.Dockerfile
      args:
        NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
        NEXT_PUBLIC_SOCKET_URL: ${NEXT_PUBLIC_SOCKET_URL}
        NEXT_PUBLIC_APP_NAME: ${NEXT_PUBLIC_APP_NAME}
        NEXT_PUBLIC_DOMAIN: ${NEXT_PUBLIC_DOMAIN}
        NEXT_PUBLIC_GOOGLE_CLIENT_ID: ${NEXT_PUBLIC_GOOGLE_CLIENT_ID}
        NEXT_PUBLIC_KAKAO_CLIENT_ID: ${NEXT_PUBLIC_KAKAO_CLIENT_ID}
        NEXT_PUBLIC_FLARELANE_PROJECT_ID: ${NEXT_PUBLIC_FLARELANE_PROJECT_ID}
        NEXT_PUBLIC_FLARELANE_API_KEY: ${NEXT_PUBLIC_FLARELANE_API_KEY}
    env_file:
      - ../production.env
    restart: always
    ports:
      - 3000:3000
    networks:
      - my_network

networks:
  my_network:
    external: true

prod.Dockerfile

FROM node:20-alpine AS base

# Step 1. Rebuild the source code only when needed
FROM base AS builder

WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
# Omit --production flag for TypeScript devDependencies
RUN 
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; 
  elif [ -f package-lock.json ]; then npm ci; 
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i; 
  # Allow install without lockfile, so example works even without Node.js installed locally
  else echo "Warning: Lockfile not found. It is recommended to commit lockfiles to version control." && yarn install; 
  fi

COPY src ./src
COPY public ./public
COPY next.config.js .
COPY tsconfig.json .
COPY holiday-kr.d.ts .

# Environment variables must be present at build time
# https://github.com/vercel/next.js/discussions/14030
ARG NEXT_PUBLIC_API_BASE_URL
ENV NEXT_PUBLIC_API_BASE_URL=${NEXT_PUBLIC_API_BASE_URL}
ARG NEXT_PUBLIC_SOCKET_URL
ENV NEXT_PUBLIC_SOCKET_URL=${NEXT_PUBLIC_SOCKET_URL}
ARG NEXT_PUBLIC_APP_NAME
ENV NEXT_PUBLIC_APP_NAME=${NEXT_PUBLIC_APP_NAME}
ARG NEXT_PUBLIC_DOMAIN
ENV NEXT_PUBLIC_DOMAIN=${NEXT_PUBLIC_DOMAIN}
ARG NEXT_PUBLIC_GOOGLE_CLIENT_ID
ENV NEXT_PUBLIC_GOOGLE_CLIENT_ID=${NEXT_PUBLIC_GOOGLE_CLIENT_ID}
ARG NEXT_PUBLIC_KAKAO_CLIENT_ID
ENV NEXT_PUBLIC_KAKAO_CLIENT_ID=${NEXT_PUBLIC_KAKAO_CLIENT_ID}
ARG NEXT_PUBLIC_FLARELANE_PROJECT_ID
ENV NEXT_PUBLIC_FLARELANE_PROJECT_ID=${NEXT_PUBLIC_FLARELANE_PROJECT_ID}
ARG NEXT_PUBLIC_FLARELANE_API_KEY
ENV NEXT_PUBLIC_FLARELANE_API_KEY=${NEXT_PUBLIC_FLARELANE_API_KEY}

# Build Next.js based on the preferred package manager
RUN 
  if [ -f yarn.lock ]; then yarn build; 
  elif [ -f package-lock.json ]; then npm run build; 
  elif [ -f pnpm-lock.yaml ]; then pnpm build; 
  else npm run build; 
  fi

# Step 2. Production image, copy all the files and run next
FROM base AS runner

WORKDIR /app

# Don't run production as root
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
USER nextjs

COPY --from=builder /app/public ./public

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

# Environment variables must be redefined at run time
ARG NEXT_PUBLIC_API_BASE_URL
ENV NEXT_PUBLIC_API_BASE_URL=${NEXT_PUBLIC_API_BASE_URL}
ARG NEXT_PUBLIC_SOCKET_URL
ENV NEXT_PUBLIC_SOCKET_URL=${NEXT_PUBLIC_SOCKET_URL}
ARG NEXT_PUBLIC_APP_NAME
ENV NEXT_PUBLIC_APP_NAME=${NEXT_PUBLIC_APP_NAME}
ARG NEXT_PUBLIC_DOMAIN
ENV NEXT_PUBLIC_DOMAIN=${NEXT_PUBLIC_DOMAIN}
ARG NEXT_PUBLIC_GOOGLE_CLIENT_ID
ENV NEXT_PUBLIC_GOOGLE_CLIENT_ID=${NEXT_PUBLIC_GOOGLE_CLIENT_ID}
ARG NEXT_PUBLIC_KAKAO_CLIENT_ID
ENV NEXT_PUBLIC_KAKAO_CLIENT_ID=${NEXT_PUBLIC_KAKAO_CLIENT_ID}
ARG NEXT_PUBLIC_FLARELANE_PROJECT_ID
ENV NEXT_PUBLIC_FLARELANE_PROJECT_ID=${NEXT_PUBLIC_FLARELANE_PROJECT_ID}
ARG NEXT_PUBLIC_FLARELANE_API_KEY
ENV NEXT_PUBLIC_FLARELANE_API_KEY=${NEXT_PUBLIC_FLARELANE_API_KEY}

RUN echo "NEXT_PUBLIC_APP_NAME"
RUN echo "$NEXT_PUBLIC_APP_NAME"

CMD ["node", "server.js"]

Development Environment (Working Correctly)

docker-compose.dev.yaml

version: '3'

services:
  semo-ai:
    container_name: semo-ai
    build:
      context: ../
      dockerfile: docker/dev.Dockerfile
    env_file:
      - ../development.env
    volumes:
      - ../src:/app/src
      - ../public:/app/public
    restart: always
    ports:
      - 3000:3000
    networks:
      - my_network

networks:
  my_network:
    external: true

dev.Dockerfile

FROM node:20-alpine

WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN 
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; 
  elif [ -f package-lock.json ]; then npm ci; 
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i; 
  # Allow install without lockfile, so example works even without Node.js installed locally
  else echo "Warning: Lockfile not found. It is recommended to commit lockfiles to version control." && yarn install; 
  fi

COPY src ./src
COPY public ./public
COPY next.config.js .
COPY tsconfig.json .

CMD 
  if [ -f yarn.lock ]; then yarn dev; 
  elif [ -f package-lock.json ]; then npm run dev; 
  elif [ -f pnpm-lock.yaml ]; then pnpm dev; 
  else npm run dev; 
  fi

Current Behavior

1. The development environment works correctly, and environment variables are recognized.
2. In the production environment, when building or running the container, the following warnings appear in the terminal:

WARN[0000] The "NEXT_PUBLIC_APP_NAME" variable is not set. Defaulting to a blank string.
WARN[0000] The "NEXT_PUBLIC_DOMAIN" variable is not set. Defaulting to a blank string.
WARN[0000] The "NEXT_PUBLIC_GOOGLE_CLIENT_ID" variable is not set. Defaulting to a blank string.
WARN[0000] The "NEXT_PUBLIC_KAKAO_CLIENT_ID" variable is not set. Defaulting to a blank string.
WARN[0000] The "NEXT_PUBLIC_FLARELANE_PROJECT_ID" variable is not set. Defaulting to a blank string.
WARN[0000] The "NEXT_PUBLIC_FLARELANE_API_KEY" variable is not set. Defaulting to a blank string.
WARN[0000] The "NEXT_PUBLIC_API_BASE_URL" variable is not set. Defaulting to a blank string.
WARN[0000] The "NEXT_PUBLIC_SOCKET_URL" variable is not set. Defaulting to a blank string.

What I’ve Tried

I tried adding the following code to the Docker-compose.prod.yml file.

    env_file:
     - ../production.env

Expected Behavior

The environment variables should be accessible within the Next.js application in both development and production environments.

Question

Why are the environment variables recognized in the development environment but not in the production environment? What changes do I need to make to my production setup to properly set up environment variables for my Next.js application using Docker Compose?

Additional Information

• Next.js version: 13.2.4
• Docker version: 4.33.0
• Docker Compose version: 3
• Operating System: Mac

Any help or insights would be greatly appreciated. Thank you!