- Eugene Musebe
Docker is a containerization tool used to speed up the development and deployment processes of applications. It also helps to eliminate environment-specific bugs since you can replicate your production environment locally.
We'll look at how to use Docker to build a production version of our Next.js application as a Docker image in this article. We'll also set up Docker to run this image locally in a container.
- Generate a new app:
npx create-next-app -e with-docker docker
The above command will spin up a Next.js application on your current directory docker folder configured with a setup multi-stage Dockerfile.
On the Dockerfile, we have different stages put together to produce a minimized production build image.
In the first stage, A linux alpine distribution is used to install the project dependencies by copying over the package.json file into the working directory, run
yarn install to install the dependencies.Also, freeze the lockfile as highlighted below :
# Install dependencies only when needed FROM node:alpine 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 yarn.lock ./ RUN yarn install --frozen-lockfile
On the second stage of the build, we are only going to rebuild the image only when needed.At this stage, we mainly copy over the application together with its dependencies and build it as illustrated :
# Rebuild the source code only when needed FROM node:alpine AS builder WORKDIR /app COPY . . COPY --from=deps /app/node_modules ./node_modules RUN yarn build
In the last step of the production build which is named runner, We go into the app directory and tell it its a production build, copy over the needed files, Add users and security groups to the build, expose the application running port and finally give the Docker file a command to start your application :
# Rebuild the source code only when needed FROM node:alpine AS builder WORKDIR /app COPY . . COPY --from=deps /app/node_modules ./node_modules RUN yarn build # Production image, copy all the files and run next FROM node:alpine AS runner WORKDIR /app ENV NODE_ENV production # You only need to copy next.config.js if you are NOT using the default configuration # COPY --from=builder /app/next.config.js ./ COPY --from=builder /app/public ./public COPY --from=builder /app/.next ./.next COPY --from=builder /app/node_modules ./node_modules COPY --from=builder /app/package.json ./package.json RUN addgroup -g 1001 -S nodejs RUN adduser -S nextjs -u 1001 RUN chown -R nextjs:nodejs /app/.next USER nextjs EXPOSE 3000 CMD ["yarn", "start"]
To test the application we shall first build and tag it by using the command:
docker build -t next-docker .
Once the application is build you can first start it by running :
docker run -p 3000:3000 next-docker
The Next.Js team has really put in a lot of efforts to make development of applications easier and faster. Is there any way better than this to setup a dockerized application ?
Hopefully this article saves your time to understand the setup process. 👋🏽👋🏽