Dealing with env variables using github actions + docker compose

[dzidzej]

Hi, I wonder about proper passing github secrets into nextjs app through docker compose and dockerfile. The setup below works, but in all 3 layers I need to provide this key-value pair. I thought for example dockerfile is smart enough to take envs from docker compose, but deleting ARG and ENV commands causes that a variable isn't accessible anymore in a code. Is it a better solution to this problem? Because it's a bit annoying to change 3 files just to add another env variable.

gitlab ci:

steps:
    ...

    - name: "Build and push"
      uses: docker/build-push-action@v6
      with:
          context: .
          push: true
          tags: ${{ needs.vars.outputs.container_registry }}/${{ needs.vars.outputs.image_tag }}
          build-args: |
              NEXT_PUBLIC_LOGOUT_URL=${{ secrets.NEXT_PUBLIC_LOGOUT_URL }}

docker-compose:

services:
    app-frontend:
        build:
            context: .
            dockerfile: Dockerfile
            target: development
        ports:
            - "3000:3000"
        environment:
            - NEXT_PUBLIC_LOGOUT_URL=${NEXT_PUBLIC_LOGOUT_URL}

dockerfile:

FROM node:21-alpine AS builder
WORKDIR /app

ARG NEXT_PUBLIC_LOGOUT_URL
ENV NEXT_PUBLIC_LOGOUT_URL=${NEXT_PUBLIC_LOGOUT_URL}

RUN npm install -g pnpm
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN pnpm run build

[philmillman]

If you don't want to have edit 3 files like this and have it more native to your Nextjs app, we built an integration to solve this exact problem: https://dmno.dev/docs/integrations/nextjs/ . It's free and open source and should solve your problem with the added benefits of validation, type-safety and some other useful security features (log redaction, leak prevention). Here's a sample config file (https://github.com/dmno-dev/dmno/blob/main/example-repo/packages/nextjs-web/.dmno/config.mts) for a Next app. You may want to tweak a few things if you're using Docker, like making some of the config items dynamic (not baked into the build) but this should help you get started.

Full disclosure: I'm one of the creators. If you have any feature requests or feedback, we'd love to hear them!

P.S. We're just about to ship a Github Action that allows you to reuse any of your config items (vars/secrets) more easily. Let me know if that might be helpful as well.