Docker is a software framework for building, running, and managing containers on servers and the cloud. Think of Docker as a CLI but for the cloud.
For this tutorial, we will be using
Next.js sample application and create a
Dockerfile in order to Dockerize it.
In order to complete Dockerizing your
Next.js app, you will need the following:
Dockerinstalled on your computer.
npm/yarninstalled on your system in order to create Next app.
If you already have an application that you want to dockerize then, you can proceed with further steps else let’s create a
Run the following command on your terminal:
yarn create next-app
This command will initialize files and configurations that are required to create and run your
First, let’s open our app in VS Code or any Code Editor of your choice.
Run the following commands:
cd <your app name> code .
(assuming you have vscode configured)
Here, you will see the directories of your application. That would look something similar like this.
[Note: I am using TypeScript that’s why you are seeing
tsconfig.json and files that ends with
Go ahead and create a new file and name it
Dockerfile. By default, this file is recognized by
docker and it will executes bunch of commands and instructions that we will provide.
Remember: The commands will be executed in order of how they are written.
Dockerfile write these codes. I will go through each one and explain how it works at the end of the tutorial.
[Note: I am using
yarn for this tutorial, you can use
npm but you will have to swap those
yarn executable code with
FROM node:lts as dependencies WORKDIR /<your-app-name> COPY package.json yarn.lock ./ RUN yarn install --frozen-lockfile FROM node:lts as builder WORKDIR /<your-app-name> COPY . . COPY --from=dependencies /<your-app-name>/node_modules ./node_modules RUN yarn build FROM node:lts as runner WORKDIR /<your-app-name> ENV NODE_ENV production COPY --from=builder /<your-app-name>/public ./public COPY --from=builder /<your-app-name>/package.json ./package.json COPY --from=builder /<your-app-name>/.next ./.next COPY --from=builder /<your-app-name>/node_modules ./node_modules EXPOSE 3000 CMD ["yarn", "start"]
Execute the following command to build the
docker build . -t <project-name>
This command will build the
Docker image with the name
Docker image once the build is over with the following command.
docker run -p 3000:3000 <project-name>
Now, open the browser and navigate to
to view your project.
Now, let’s go through the code contents of the
Remember, the code are executed based on how they are written,
Lets go through the code in three different stages in top-down approach:
- Installing dependencies
- Building our
- Configuring the runtime environment for our application
FROM node:lts as dependencies WORKDIR /<your-app-name> COPY package.json yarn.lock ./ RUN yarn install --frozen-lockfile
Let’s talk about what is happening on this code.
First, we want to define what image we want to build from for which we are using the latest
node version with
You could use any specific version of node. For example:
FROM node:16 would build your image with Node version 16. We are using
as dependencies so that we can export this code and reuse it later when building our application in
Second, we want to create an application directory which holds our application code with
Third, we want to copy our
yarn.lock files which allows us to take advantage of cached Docker layers. A good explanation of Docker Caching is here.
Finally, we want to be able to run our
yarn install to install these dependencies. We are using
--frozen-lockfile because our
package-lock.json gets updated when running
yarn install ( or
npm install). We do not want to check for these changes.
If you are using
npm you can use
npm ci (ci means clean install / use it for production or else just use
RUN npm install)
FROM node:lts as builder WORKDIR /<your-app-name> COPY --from=dependencies /<your-app-name>/node_modules ./node_modules RUN yarn build
Let’s look at the build.
Here, we build our application copying dependencies from node_modules.
If you are using
npm then use
RUN npm build.
FROM node:lts as runner WORKDIR /<your-app-name> ENV NODE_ENV production
After building our project, we want to be able to run it.
COPY --from=builder /<your-app-name>/public ./public COPY --from=builder /<your-app-name>/package.json ./package.json COPY --from=builder /<your-app-name>/.next ./.next COPY --from=builder /<your-app-name>/node_modules ./node_modules EXPOSE 3000 CMD ["yarn", "start"]
Here, we want to be able to bundle the app source code inside our Docker image that’s why we are using
Finally, we want to define a command to run our app using
CMD which defines the runtime.
For our runtime, we are using
If you have
Docker Application installed, you can view your container on the dashboard and run it from there which would look something like the images below.
You did it!
Thanks for reading. If you have any questions, feel free to send them my way on Twitter @developernit