DEV Community

Cover image for Setting Up the Multi-Container Application with Docker
Jemmy Dalsaniya
Jemmy Dalsaniya

Posted on • Edited on

Setting Up the Multi-Container Application with Docker

Introduction

Docker is an open-source platform that automates the process of deploying applications inside lightweight, portable containers. These containers bundle an application with all of its dependencies, including libraries, frameworks, and other necessary components, into a single package. This encapsulation ensures that the application runs consistently and reliably across different environments, regardless of the underlying infrastructure.

One of the key benefits of Docker is its ability to eliminate the "works on my machine" problem that often plagues software development teams. By packaging applications into containers, developers can guarantee that the software will behave the same way in development, testing, and production environments. This consistency streamlines the development workflow and reduces the likelihood of deployment-related issues.

Github Link : Click here

Prerequisites

Before we begin, ensure you have the following prerequisites:

  • Docker installed on your machine so for that download docker desktop
  • image

download link : click here

  • Basic understanding of Docker concepts
  • Knowledge of your application's frontend and backend technologies through docker documents: Screenshot 2024-04-24 012425

Part 1: Docker Setup

Step 1: Installing Docker

To install Docker, follow these steps:

  1. Visit the Docker website and download the appropriate installer for your operating system.
  2. Run the installer and follow the on-screen instructions.
  3. Once installation is complete, verify that Docker is installed by running docker --version in your terminal.

Step 2: Docker Basics

-> Image : In Docker an image serves as an self sufficient software bundle that's capable of running a designated application or service. It encompasses the application code, runtime settings, essential system libraries, dependencies and other required files, for operation

-> Container : A Docker container is similar, to an portable package that contains all the essentials for an application to function seamlessly. It consists of the application as the necessary tools and configurations. These containers operate autonomously on your device with each containers data being separate, from that of others.

-> Dockerfile: A text file that contains all the commands needed to assemble a Docker image.

Part 2: Building Frontend and Backend Application :

-> You may clone the following repo for the basic frontend and backend code : link

-> Or you can create your own application. However in that case if you build complex application then your DockerFile may change

Part 4: Creating Docker Images

Step 3: Frontend Dockerfile

Create a Dockerfile for the frontend application (assuming it's built with React). Here's an example:

Screenshot 2024-04-23 235706

Step 4: Backend Dockerfile

Create a similar Dockerfile for the backend application.

Backend image

step 5: Setting up MySQL docker container

Note: To run the docker commands you must have opened Docker Desktop and can run the command anywhere in the command line or VS Code Terminal

  • Firstly create the docker network with the command :

docker network create net_name

For eg : Here I had created the Docker_Assignment network


docker run -d --name jd_mysql_db --network Docker_Assignment -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql:8.0

Creating a database and tables inside the mysql container

docker exec -it jd_mysql_db mysql -u root -p
Enter fullscreen mode Exit fullscreen mode

Then you will be asked for password which is your_password.
After that enter the following SQL queries in order to create a new Database.

Screenshot 2024-04-23 235251

Additional Step for the one who clone the repo:

-> Make the following changes in the server.js file in the backend folder:

changes

step 6: Building the images

You can now build both images using the following commands

Note: To run the docker commands you must follow the following file structure

Folder Structure

Building the Frontend Image:

Screenshot 2024-04-23 235135

Building the Backend Image:

Screenshot 2024-04-23 235210

Part 3: Running the application

step 7: Building the containers

To build all three containers use this command:

  1. Frontend React app:

    docker run -d --name jd_frontend --network your_net_name -p 3000:3000 frontend_image_21bcp319

  2. Backend NodeJS Express server :

    docker run -d --name jd_backend --network your_net_name -p 5000:5000 backend_image_21bcp319

  3. MySQL Server:


docker run -d --name jd_mysql_db --network your_net_name -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql:8.0

Screenshot 2024-04-23 230757

Step 8: Open in Browser

Open http://localhost:3000 to see the Reacjs App and http://localhost:5000/students to see the API response from the express server.

image

Screenshot 2024-04-23 235405

Screenshot 2024-04-23 235413

To Check if the Application is running or not we can check that the data is comming to mysql or not by running the query in mysql container

Select * from students;
Enter fullscreen mode Exit fullscreen mode

Screenshot 2024-04-23 235438

Conclusion:

By following the steps outlined in this blog post, you have successfully set up a Dockerized environment for a multi-container application consisting of a frontend, backend, and a MySQL database. Using Docker, you have achieved a consistent and reliable deployment process that ensures your application runs smoothly across various environments.

Github Link : Click here

Top comments (0)