Setting Up the Multi-Container Application with Docker
Tags: docker, devops, webdev, tutorial
Published: 2024-05-27 06:48:15

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

### Prerequisites
Before we begin, ensure you have the following prerequisites:
- Docker installed on your machine so for that download docker desktop
- ![image](https://github.com/jemmyasjd/jemmyasjd.github.io/assets/118959810/2fd0d058-a850-4ded-ac3a-4508b0aacee3)

download link : [click here](https://docs.docker.com/desktop/install/windows-install/)


- Basic understanding of Docker concepts 
- Knowledge of your application's frontend and backend technologies through docker documents: 
![Screenshot 2024-04-24 012425](https://github.com/jemmyasjd/jemmyasjd.github.io/assets/118959810/cc8e43af-ee8b-4976-8677-e59cb966f79b)


## 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](https://github.com/jemmyasjd/Docker_MultiContainer)

-> 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](https://github.com/jemmyasjd/jemmyasjd.github.io/assets/118959810/a2aa9ed9-4e25-4d59-9226-dcee969913de)



### Step 4: Backend Dockerfile
Create a similar Dockerfile for the backend application.


![Backend image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohdfrfjccd3wl6yzpeab.png)



### 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
 ```
 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](https://github.com/jemmyasjd/jemmyasjd.github.io/assets/118959810/96df4d10-378a-42d8-914d-410e140d0046)

### Additional Step for the one who clone the repo:
-> Make the following changes in the server.js file in the backend folder: 


![changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytwvc8jbz20kqfbil4c4.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gozjq83c7l9nn0wo3kt.png)


Building the Frontend Image:

![Screenshot 2024-04-23 235135](https://github.com/jemmyasjd/jemmyasjd.github.io/assets/118959810/39711198-d65f-44cb-9726-7403e3a10e69)


Building the Backend Image:

![Screenshot 2024-04-23 235210](https://github.com/jemmyasjd/jemmyasjd.github.io/assets/118959810/0d709185-d782-4c73-be59-d54eb6339407)





## 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](https://github.com/jemmyasjd/jemmyasjd.github.io/assets/118959810/974f00ca-0676-43c1-9c3b-3ae5e5109ace)



### 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](https://github.com/jemmyasjd/jemmyasjd.github.io/assets/118959810/b2403fd5-6d75-48ed-9b99-f9f0b4838037)


![Screenshot 2024-04-23 235405](https://github.com/jemmyasjd/jemmyasjd.github.io/assets/118959810/133d0256-cab7-4972-9843-209adbb99f70)

![Screenshot 2024-04-23 235413](https://github.com/jemmyasjd/jemmyasjd.github.io/assets/118959810/8b779aa6-b423-4673-80be-24b9ad6234b2)



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;
```

![Screenshot 2024-04-23 235438](https://github.com/jemmyasjd/jemmyasjd.github.io/assets/118959810/f46ca95b-8b00-4fba-a8a0-40340785936d)

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