Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 8, 2021 05:20 am GMT

How I Dockerized my Next.js website?

Learn how to use Docker to create images for development and production.

Imagine that you have developed a full fledged working application and want other developers to contribute to the project. Now if the application consists of different components like UI, running server, database etc. The new developer should install the exact configuration of the entire stack on to his/her system before starting the development. To overcome this issue Docker comes to the rescue.

What is Docker?

Docker is an open platform for developing, shipping, and running applications. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly. With Docker, you can manage your infrastructure in the same ways you manage your applications. By taking advantage of Dockers methodologies for shipping, testing, and deploying code quickly, you can significantly reduce the delay between writing code and running it in production.

Multistaging dockerfile for development and production

I created a common docker file for both development and production. Dockerfile is used to create an image of the application, using this image n number of containers can be created, which is like a running version of the image.

Dockerfile

#Creates a layer from node:alpine image.FROM node:alpine#Creates directoriesRUN mkdir -p /usr/src/app#Sets an environment variableENV PORT 3000#Sets the working directory for any RUN, CMD, ENTRYPOINT, COPY, and ADD commandsWORKDIR /usr/src/app#Copy new files or directories into the filesystem of the containerCOPY package.json /usr/src/appCOPY package-lock.json /usr/src/app#Execute commands in a new layer on top of the current image and commit the resultsRUN npm install##Copy new files or directories into the filesystem of the containerCOPY . /usr/src/app#Execute commands in a new layer on top of the current image and commit the resultsRUN npm run build#Informs container runtime that the container listens on the specified network ports at runtimeEXPOSE 3000#Allows you to configure a container that will run as an executableENTRYPOINT ["npm", "run"]

Docker-Compose to create containers with ease.

Suppose you have an application that consists of UI, running server, DB and you want to create containers for all the components. One way is to create Dockerfile for each of the component and start the containers one by one manually or docker-compose can be used to start the entire stack with just one command.

Below is the common docker-compose.yml file for both development and production

docker-compose.yml

version: '3' #This denotes that we are using version 3 of Docker Composeservices: #This section defines all the different containers we will create.  blog_deepak: #This is the name of our Nextjs application.    build: #This specifies the location of our Dockerfile      context: . #This specifies the location of our Dockerfile    ports: #This is used to map the containers ports to the host machine.      - "3000:3000"

docker-compose.dev.yml

version: "3" #This denotes that we are using version 3 of Docker Compose    services: #This section defines all the different containers we will create.    blog_deepak: #This is the name of our Nextjs application.        command: dev #command to execute                #This is just like the -v option for mounting disks in Docker. In this              example, we attach our code files directory to the containers ./code              directory.  This way, we wont have to rebuild the images if changes are           made.        volumes:            - .:/usr/src/app            - /usr/src/app/node_modules            - /usr/src/app/.next

docker-compose.prod.yml

version: "3" #This denotes that we are using version 3 of Docker Composeservices: #This section defines all the different containers we will create.    blog_deepak: #This is the name of our Nextjs application.        command: prod #command to execute

I have configured my scripts in package.json to run docker-compose.

package.json

"scripts": {    "dev": "next dev",    "build": "next build",    "prod": "next start",    "dev:up": "docker-compose -f docker-compose.yml -f docker-compose.dev.yml up",    "prod:up": "docker-compose -f docker-compose.yml -f docker-compose.prod.yml up"  },

By default, Compose reads two files, a docker-compose.yml and an optional docker-compose.override.yml file. By convention, the docker-compose.yml contains your base configuration. The override file, as its name implies, can contain configuration overrides for existing services or entirely new services.

To use multiple override files, or an override file with a different name, you can use the -f option to specify the list of files. Compose merges files in the order theyre specified on the command line.


Original Link: https://dev.to/deepakfilth/how-i-dockerized-my-next-js-website-4f3a

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