Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 28, 2022 05:01 pm GMT

Dockerizing your Next.js/React Application!

What is Docker?

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.

Requirements:

In order to complete Dockerizing your Next.js app, you will need the following:

  • Docker installed on your computer.
  • Node.js and npm/yarn installed on your system in order to create Next app.

Creating a sample Next.js app

If you already have an application that you want to dockerize then, you can proceed with further steps else lets create a next.js app.

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 next.js application.

Creating a Dockerfile

First, lets 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 thats why you are seeing tsconfig.json and files that ends with .ts ]

file contents

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.

Inside the 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 npm]

FROM node:lts as dependenciesWORKDIR /<your-app-name>COPY package.json yarn.lock ./RUN yarn install --frozen-lockfileFROM node:lts as builderWORKDIR /<your-app-name>COPY . .COPY --from=dependencies /<your-app-name>/node_modules ./node_modulesRUN yarn buildFROM node:lts as runnerWORKDIR /<your-app-name>ENV NODE_ENV productionCOPY --from=builder /<your-app-name>/public ./publicCOPY --from=builder /<your-app-name>/package.json ./package.jsonCOPY --from=builder /<your-app-name>/.next ./.nextCOPY --from=builder /<your-app-name>/node_modules ./node_modulesEXPOSE 3000CMD ["yarn", "start"]

Building Docker Image

Execute the following command to build the Docker image.

docker build . -t <project-name>

This command will build the Docker image with the name <project-name>.

Running the 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

http://localhost:3000 

to view your project.

CONGRATULATIONS! You have successfully dockerized your application!

Congrats

Visiting contents of the Dockerfile

Now, lets go through the code contents of the Dockerfile.

Remember, the code are executed based on how they are written, top-down approach.

Lets go through the code in three different stages in top-down approach:

  1. Installing dependencies
  2. Building our Next.js application
  3. Configuring the runtime environment for our application

1. Installing Dependencies

FROM node:lts as dependenciesWORKDIR /<your-app-name>COPY package.json yarn.lock ./RUN yarn install --frozen-lockfile

Lets 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 node:lts

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 docker.

Second, we want to create an application directory which holds our application code with WORKDIR.

Third, we want to copy our package.json and 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 yarn.lock or 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)

For yarn its --frozen-lockfile

2. Building our Next.js application

FROM node:lts as builderWORKDIR /<your-app-name>COPY --from=dependencies /<your-app-name>/node_modules ./node_modulesRUN yarn build

Lets 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 runnerWORKDIR /<your-app-name>ENV NODE_ENV production

After building our project, we want to be able to run it.

3. Configuring the runtime environment for our application

COPY --from=builder /<your-app-name>/public ./publicCOPY --from=builder /<your-app-name>/package.json ./package.jsonCOPY --from=builder /<your-app-name>/.next ./.nextCOPY --from=builder /<your-app-name>/node_modules ./node_modulesEXPOSE 3000CMD ["yarn", "start"]

Here, we want to be able to bundle the app source code inside our Docker image thats why we are using COPY.

Finally, we want to define a command to run our app using CMD which defines the runtime.

For our runtime, we are using yarn command.

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.

Docker Dashboard

Docker Dashboard



You did it!

Thanks for reading. If you have any questions, feel free to send them my way on Twitter @developernit

Original Link: https://dev.to/kaflenitish/dockerizing-your-nextjsreact-application-42ob

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To