Containerizing a React Application with Docker
About This Guide ℹ️
This guide will teach you how to containerise your Next.js application with Docker and run your container. We will accomplish this by creating a custom container image that uses
nodeas a base image.
Hello! My name is Daniel Medina and today you'll be learning how to use Docker to containerise a Next.js project. By the end of this guide you will have built a container image you can deploy to your favourite cloud provider or to your own server.
To follow along with this tutorial you will need a Next project and Docker installed on your computer. You can click this link and follow the installation instructions for your operating system.
If you don't have a Next.js app you can create a boilerplate project by running the following command in your terminal:
Our first step will be to create the
Dockerfile in the root of our project. Next we'll set the base image to
Now we'll set the working directory to
/app using the
FROM node:14 WORKDIR /app
Next we'll copy our
FROM node:14 WORKDIR /app COPY ./package.json ./ COPY ./yarn.lock ./
The next step is to install the dependencies needed for our app. To do that we will use the
RUN keyword followed by the command we want to run.
FROM node:14 WORKDIR /app COPY ./package.json ./ COPY ./yarn.lock ./ RUN yarn install
Following the installation of the dependecies, we will now copy the application code directly into the container.
FROM node:14 WORKDIR /app COPY ./package.json . COPY ./yarn.lock . RUN yarn install COPY . .
But wait... We run into a problem. Won't this copy our
node_modules folder too? Yes. How do we solve that? We can create a
.dockerignore file that works similarly to a
.gitignore and allows us to tell docker which directories to ignore. We will now create the
.dockerignore file and add
node_modules to it.
Now that we fixed that, what's next? Now we have to expose the port that our app will run on. By default Next.js runs on port 3000, so we will need to expose port 3000 on our docker container. We can do that by using the
FROM node:14 WORKDIR /app COPY ./package.json . COPY ./yarn.lock . RUN yarn install COPY . . EXPOSE 3000
The next step is to build the Next.js app. Next.js requires us to run
next build before running
next start to be able to pre-render all static pages. To do that we will run the command within our
Dockerfile. We will run it with our package manager, in this case I'm using yarn.
FROM node:14 WORKDIR /app COPY ./package.json . COPY ./yarn.lock . RUN yarn install COPY . . EXPOSE 3000 RUN yarn build
For our final step in the Dockerfile we have to specify the command. The command is the entrypoint to the container. In this case our command will be
next start or
yarn start. Let's add that to our Dockerfile. It uses this array-like syntax where the command is the first item and arguments are the second.
FROM node:14 WORKDIR /app COPY ./package.json . COPY ./yarn.lock . RUN yarn install COPY . . EXPOSE 3000 RUN yarn build CMD ["yarn", "start"]
We finished our
Dockerfile. Now we need to build the image. Let's run this command to build it. (Don't forget the period at the end!)
docker build -t <image name> .
The command will take some time depending on the amount of dependencies and how large your project is, so leave it do it's magic alone.
Finally we can run the container with this following command:
docker run -dp <host machine port>:3000 <image name>
Now open up your browser in localhost at the port you selected and boom! There is your Next.js app running in a container. I containerised my portfolio website! Check it out at medina.dev
Thank you for reading my article! Most importantly I hope you learned how to containerise Next.js applications. I encourage you to containerise your own apps!