MultiStage Dockerfile for Next.js app in production

Answered

Crested Myna posted this in #help-forum

Crested MynaOP

2024-08-04T12:00:37.827Z

Hi, I'm trying to build a MultiStage Docker file to create the lightest possible image of my next application. Currently, I have this

FROM node:20-alpine AS deps

WORKDIR /app

RUN apk add --no-cache libc6-compat

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./

COPY ./prisma ./prisma

RUN \
  if [ -f package-lock.json ]; then npm ci; \
  elif [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


FROM node:20-alpine AS builder

WORKDIR /app

COPY --from=deps /app/node_modules ./node_modules

COPY . .

RUN \
  if [ -f package-lock.json ]; then run build; \
  elif [ -f yarn.lock ]; then yarn build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm build; \
  else echo "Lockfile not found." && exit 1; \
  fi

but i have this error :

 => ERROR [builder 5/5] RUN   if [ -f package-lock.json ]; then run build;   elif [ -f yarn.lock ]; then yarn build;   elif [ -f pnpm-lock.yaml ];  2.6s 
------
 > [builder 5/5] RUN   if [ -f package-lock.json ]; then run build;   elif [ -f yarn.lock ]; then yarn build;   elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm build;   else echo "Lockfile not found." && exit 1;   fi:
0.676 ! Corepack is about to download https://registry.npmjs.org/pnpm/-/pnpm-9.6.0.tgz
1.055 ! The local project doesn't define a 'packageManager' field. Corepack will now add one referencing pnpm@9.6.0+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e.
1.055 ! For more details about this field, consult the documentation at https://nodejs.org/api/packages.html#packagemanager
1.055
1.372
1.372 > nowts@0.1.0 build /app
1.372 > next build
1.372
1.394 node:internal/modules/cjs/loader:1148
1.394   throw err;
1.394   ^
1.394
1.394 Error: Cannot find module '/app/node_modules/next/dist/bin/next'
1.394     at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15)
1.394     at Module._load (node:internal/modules/cjs/loader:986:27)
1.394     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)
1.394     at node:internal/main/run_main_module:28:49 {
1.394   code: 'MODULE_NOT_FOUND',
1.394   requireStack: []
1.394 }
1.394
1.394 Node.js v20.16.0
1.399  ELIFECYCLE  Command failed with exit code 1.
------
Dockerfile.release:34
--------------------
  33 |
  34 | >>> RUN \
  35 | >>>   if [ -f package-lock.json ]; then run build; \
  36 | >>>   elif [ -f yarn.lock ]; then yarn build; \
  37 | >>>   elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm build; \
  38 | >>>   else echo "Lockfile not found." && exit 1; \
  39 | >>>   fi
  40 |
--------------------
ERROR: failed to solve: process "/bin/sh -c if [ -f package-lock.json ]; then run build;   elif [ -f yarn.lock ]; then yarn build;   elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm build;   else echo \"Lockfile not found.\" && exit 1;   fi" did not complete successfully: exit code: 1

If someone has already done something similar, I'm interested!

Answered by Crested Myna

FROM node:20-alpine AS deps

WORKDIR /app

RUN apk add --no-cache libc6-compat

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./

COPY ./prisma ./prisma

RUN \
  if [ -f package-lock.json ]; then npm ci; \
  elif [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


FROM node:20-alpine AS builder

ARG DATABASE_URL

WORKDIR /app

COPY --from=deps /app/node_modules ./node_modules

COPY . .

# Ajoute ici les nom des variable d'env que tu as dans ton fichier .env
ENV DATABASE_URL=buildMode://buildMode:buildMode@buildMode:0000/buildMode

ENV GITHUB_ID=buildMode
ENV GITHUB_SECRET=buildMode

ENV GOOGLE_ID=buildMode
ENV GOOGLE_SECRET=buildMode

ENV NEXTAUTH_SECRET=buildMode

ENV RESEND_API_KEY=buildMode
ENV RESEND_AUDIENCE_ID=buildMode

ENV STRIPE_SECRET_KEY=buildMode
ENV STRIPE_WEBHOOK_SECRET=buildMode
ENV NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=buildMode

RUN \
  if [ -f package-lock.json ]; then npm run build; \
  elif [ -f yarn.lock ]; then yarn build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm build; \
  else echo "Lockfile not found." && exit 1; \
  fi


FROM node:20-alpine AS runner

WORKDIR /app

ENV NODE_ENV=production

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

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

RUN mkdir .next
RUN chown nextjs:nodejs .next

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

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

View full answer

5 Replies

Crested MynaOP

2024-08-07T07:41:38.105Z

https://tenor.com/view/cave-dive-darkness-leap-gif-5803442

Thrianta

2024-08-07T08:10:24.503Z

Can we see the updated Dockerfile?

Here's one that I was using. I think I based it off WebDevCody's example.

FROM node:20-slim AS base


# Install the dependencies
FROM base 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 pnpm-lock.yaml ./
RUN corepack enable pnpm && pnpm i --frozen-lockfile
COPY . .

# Build the app
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN corepack enable pnpm && pnpm run build

# Run the app
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

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

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

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD HOSTNAME="0.0.0.0" node server.js

Notice how the base image is only defined once.

@Thrianta Here's one that I was using. I think I based it off WebDevCody's example. Dockerfile FROM node:20-slim AS base # Install the dependencies FROM base 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 pnpm-lock.yaml ./ RUN corepack enable pnpm && pnpm i --frozen-lockfile COPY . . # Build the app FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . RUN corepack enable pnpm && pnpm run build # Run the app FROM base AS runner WORKDIR /app ENV NODE_ENV production ENV NEXT_TELEMETRY_DISABLED 1 RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs COPY --from=builder /app/public ./public # Set the correct permission for prerender cache RUN mkdir .next RUN chown nextjs:nodejs .next COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static USER nextjs EXPOSE 3000 ENV PORT 3000 CMD HOSTNAME="0.0.0.0" node server.js Notice how the base image is only defined once.

Crested MynaOP

2024-08-07T14:50:56.242Z

FROM node:20-alpine AS deps

WORKDIR /app

RUN apk add --no-cache libc6-compat

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./

COPY ./prisma ./prisma

RUN \
  if [ -f package-lock.json ]; then npm ci; \
  elif [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


FROM node:20-alpine AS builder

ARG DATABASE_URL

WORKDIR /app

COPY --from=deps /app/node_modules ./node_modules

COPY . .

# Ajoute ici les nom des variable d'env que tu as dans ton fichier .env
ENV DATABASE_URL=buildMode://buildMode:buildMode@buildMode:0000/buildMode

ENV GITHUB_ID=buildMode
ENV GITHUB_SECRET=buildMode

ENV GOOGLE_ID=buildMode
ENV GOOGLE_SECRET=buildMode

ENV NEXTAUTH_SECRET=buildMode

ENV RESEND_API_KEY=buildMode
ENV RESEND_AUDIENCE_ID=buildMode

ENV STRIPE_SECRET_KEY=buildMode
ENV STRIPE_WEBHOOK_SECRET=buildMode
ENV NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=buildMode

RUN \
  if [ -f package-lock.json ]; then npm run build; \
  elif [ -f yarn.lock ]; then yarn build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm build; \
  else echo "Lockfile not found." && exit 1; \
  fi


FROM node:20-alpine AS runner

WORKDIR /app

ENV NODE_ENV=production

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

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

RUN mkdir .next
RUN chown nextjs:nodejs .next

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

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

Answer

@Crested Myna https://tenor.com/view/cave-dive-darkness-leap-gif-5803442

joulev

2024-08-07T16:55:29.624Z

This is not a solution