Injecting Next Js Application Environment in Build and Runtime Environment

Next JS Environment Docker Github Action.md

Inject Next Js Environment Variable in Github Action and Docker

So you're wondering how can i inject my environment variable easily without hardcoding it into a file? Easy use Github Action Environment Variables and also Docker Args.

Github Action

# Web service in development branch (main)

name: LMNTS - Dev - web

on:
  push:
    branches: ['main']
    paths: ['web/**', '.github/workflows/web-dev.yaml']

env:
  TAGS: ${{ github.sha }}

  # Please fill this
  DOCKER_REPOSITORY: test/image
  DOCKER_REGISTRY: YourRegistry.com

defaults:
  run:
    working-directory: ./web

jobs:
  Docker-Imaging:
    runs-on: ubuntu-22.04
    steps:
      - name: Set up Docker
        uses: crazy-max/ghaction-setup-docker@v3
        with:
          daemon-config: |
            {
              "insecure-registries":["..."] 
            }

      - name: Checkout latest code
        uses: actions/checkout@v2

      - name: Docker Login
        run: echo ${{ secrets.DOCKER_PASSWORD }} | docker login --username ${{ secrets.DOCKER_USER }} --password-stdin $DOCKER_REGISTRY

      - name: Build Docker Image
        run: docker build --tag "$DOCKER_REGISTRY/$DOCKER_REPOSITORY:$TAGS" --tag "$DOCKER_REGISTRY/$DOCKER_REPOSITORY:latest" -f Dockerfile --build-arg ENV_FILE="${{ secrets.WEB_ENV_DEV_FILE }}" .

      - name: Dockerhub Push
        run: docker push "$DOCKER_REGISTRY/$DOCKER_REPOSITORY" --all-tags

As you can see i have an additional tag --build-arg ENV_FILE="${{ secrets.WEB_ENV_DEV_FILE }}" Where the secrets are from Github Action environment variables:

You paste all the content of your .env into there and it will inject it to the docker build

Dockerfile

In here I use ARG on Dockerfile to create the .env file to build.

# Builder
FROM node:20.11.1-alpine3.19 AS builder
WORKDIR /build

## Prepare Environment Variable
ARG ENV_FILE
ENV ENV_FILE=$ENV_FILE
RUN echo "$ENV_FILE" >> .env.local

## Prepare Bun and Glibc
RUN apk add make unzip curl
RUN apk --no-cache add ca-certificates wget
RUN wget -q -O /etc/apk/keys/sgerrand.rsa.pub https://alpine-pkgs.sgerrand.com/sgerrand.rsa.pub
RUN wget https://github.com/sgerrand/alpine-pkg-glibc/releases/download/2.28-r0/glibc-2.28-r0.apk
RUN apk add --no-cache --force-overwrite glibc-2.28-r0.apk
RUN npm install -g bun

## Build Next.js
COPY package.json package.json
COPY bun.lockb bun.lockb
RUN bun install
COPY . .
RUN bun run s:build

# Runner
FROM node:20.11.1-alpine3.19 AS runner
WORKDIR /app
COPY --from=builder /build/.next/standalone/ /app
ENV HOSTNAME=0.0.0.0
ENV PORT=3000
EXPOSE 3000
CMD ["node", "server.js"]

Endnote

With this, you can safely put your environment variable to build into the Github Action environment variable