docker-node VS nvm

Let’s get it running locally first. You should have Node installed (you may also use nvm or docker).

Node

Just use the official node Docker image with the same version as your DDEV project in the Node.js Remote Interpreter settings for your PhpStorm project.

If you’re developing Node.js applications, you may want to consult with the official Docker and Node.js Best Practices.

FROM node:18-alpine AS base LABEL author="author_name" LABEL name="your_application_name" # Install dependencies only when needed 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 # Install dependencies based on the preferred package manager COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ RUN \ if [ -f package-lock.json ]; then npm ci; \ elif [ -f yarn.lock ]; then yarn --frozen-lockfile; \ elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \ else echo "Lockfile not found." && exit 1; \ fi # Rebuild the source code only when needed FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . # RUN cp .env.docker-production .env # Next.js collects completely anonymous telemetry data about general usage. # Learn more here: https://nextjs.org/telemetry # Uncomment the following line in case you want to disable telemetry during the build. # ENV NEXT_TELEMETRY_DISABLED 1 # If using npm comment out above and use below instead RUN npm run build # Production image, copy all the files and run next FROM base AS runner WORKDIR /app ENV NODE_ENV production # Uncomment the following line in case you want to disable telemetry during runtime. # ENV NEXT_TELEMETRY_DISABLED 1 RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 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 USER nextjs EXPOSE 3000 ENV PORT 3000 CMD ["node", "server.js"]

FROM node:20-alpine AS base # 1. Install dependencies only when needed 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 # 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; \ else echo "Lockfile not found." && exit 1; \ fi # Accept build arguments ARG NEXT_PUBLIC_BACKEND_URL # 2. Rebuild the source code only when needed FROM base AS builder WORKDIR /app # Declare ARG again here ARG NEXT_PUBLIC_BACKEND_URL COPY --from=deps /app/node_modules ./node_modules COPY . . RUN echo "NEXT_PUBLIC_BACKEND_URL=$NEXT_PUBLIC_BACKEND_URL" >> .env RUN npm run build # 3. Production image, copy all the files and run next FROM base AS runner WORKDIR /app ENV NODE_ENV=production RUN addgroup -g 1001 -S nodejs RUN adduser -S nextjs -u 1001 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 USER nextjs EXPOSE 3000 ENV PORT=3000 ENV HOSTNAME="0.0.0.0" CMD ["node", "server.js"]

A Dockerfile is a script that contains all the steps necessary to build an image. Dockerfile starts with something called base image. A base image is a pre-configured environment that our images build upon. The base image can be an OS like Linux, alpine, or some application stack. Choosing an appropriate base image is crucial for the overall size and productivity of the image of our application. We will talk more about how to select the appropriate base image in the later part of this series so for now let's keep in mind that a lighter base-image will create a lighter app image(this comes with its limitations which we will talk about in more detail in the later part of this series). So, for this app, we are going to use node:alpine images as a base, you can select your needed version of a base image from an image registry like Docker Hub.

Remember the day you've installed nvm for node and npm?

NVM GitHub Repository

nvm (Node Version Manager): The most popular choice, especially on Linux and macOS. It installs Node.js within your user directory, completely avoiding the need for sudo when installing global packages. It makes switching between different Node.js versions effortless. (GitHub - nvm-sh/nvm). I have used this for years.I used pnpm, you can use npm

Let’s get it running locally first. You should have Node installed (you may also use nvm or docker).

Make sure you have node installed. If not, I recommend installing via nvm(Node Version Manager)

I was welcomed with an error that it couldn’t find npx command, which makes sense - I’m using NVM to manage node.

Reference: https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating