Role of Docker in Optimizing JavaScript Full-Stack Applications

Introduction: In the fast-paced realm of software development, achieving consistent and efficient deployment across diverse environments is a challenge every business faces. Docker emerges as the transformative solution, ensuring your JavaScript full-stack applications not only run seamlessly but also boost productivity and streamline operations. This comprehensive guide explores Docker's intricacies, demystifies key concepts, and illuminates the compelling reasons why businesses worldwide are adopting this game-changing technology.

Why Docker? The Business Perspective:

Consistency Across Environments:

Challenge: Inconsistent behavior between developer machines and production environments can lead to unforeseen issues.

Solution: Docker encapsulates your application, dependencies, and configurations, ensuring consistent operation regardless of the environment.

Time Efficiency:

Challenge: Manual setup and deployment are time-consuming and error-prone.

Solution: Docker's containerization eliminates manual configurations, dramatically reducing setup time and minimizing human error.

Compatibility Assurance:

Challenge: Differences in environmental setups can lead to compatibility issues.

Solution: Docker's container images encapsulate everything an application needs, mitigating compatibility concerns and enhancing reliability.

Benefits of Docker for Business:

• Improved Productivity:
  Docker streamlines the development-to-deployment pipeline, allowing developers to focus on building features rather than troubleshooting environment-specific issues.
• Resource Optimization:
  Docker's multistage builds discard unnecessary resources, resulting in leaner images and optimized resource utilization, ultimately reducing infrastructure costs.
• Scalability and Flexibility:
  Docker's containerization enables seamless scaling. Applications can scale horizontally by adding more containers, ensuring consistent performance during increased workloads.
• Collaboration and Reproducibility:
  DockerFiles serve as reproducible build instructions, facilitating collaboration between development and operations teams. The same Dockerfile used by developers is employed in production, ensuring reproducibility.
• Cost-Effective Infrastructure:
  AWS EC2 instances can be utilized to host Docker containers, benefiting from the cost-effectiveness of cloud infrastructure.
• Version Control for Business Continuity:
  GitHub can be leveraged for version control, ensuring business continuity and a stable development environment.
• Efficiency through Automation:
  Dockerfiles automates the build and deployment process, reducing the risk of human error and enhancing efficiency.
• Containerization for Reliability:
  Docker Hub acts as a repository, ensuring the reliability and accessibility of your application images.
• Resource Management for Cost Savings:
  Efficiently manage running containers, stopping and removing them when not in use to optimize resource utilization and reduce costs.
• Integrated Deployment for Seamless Operations:
  Docker Compose orchestrates the deployment of both the frontend and backend, providing a unified and seamless operational application.

Hands-On Experience: Unlocking Docker's Potential for Your Business:

Part 1: Installing Docker in EC2

1. Spin up a free EC2 AWS instance and start an EC2 instance.
2. Login to the AWS console Select the EC2 instance -> Click on the security tab -> Click on the Security Group link as shown in Figure 1.
3. Click on Edit Inbound Rules, as shown in Figure 2.
4. Make sure you have all the rules as shown in Figure 3.
5. Login using putty into the EC2 instance and run the below commands.
6. Let’s install Docker using the below commands.
   1. sudo yum update
   2. sudo yum install docker
7. To make sure Docker is installed, try the below command to see the version of Docker.
   1. Sudo docker-version
      

Part 2: Getting the application code

1. I have created two sample programs on Github.
   1. Frontend application using Vite and React, which we will try to deploy using Docker (react_app folder): It shows simple text and a loading message while it makes an API call, and after receiving a response from the Node app, it shows it.

• Backend nodeJS application (node_app folder): Simple GET method that returns a text

1. Here is the GitHub link:https://github.com/mahalingam-iyer/dockertraining
2. Let’s clone the project inside a folder in EC2 and try to build and deploy.
   1. git clonehttps://github.com/mahalingam-iyer/dockertraining.git
3. You will have two folders, node_app and react_app.
   

Part 3: Writing DockerFile

1. Write DockerFile for react_app with the name Dockerfile.prod.
2. Write DockerFile for node_app with the name Dockerfile.prod.

Part 4: Building and Running Containers

1. Now that we have Dockerfile, which is a set of instructions to create an image that will be used to create a container that is actually running our application,
2. Before we start, go into the react_app folder and open the app. js using
   1. Vi app.js
   2. Change the IP address on the line where we make the fetch API call to the correct public address of your EC2 instance.
3. At this point, we need to authenticate Docker.
4. Create a new account (if not already done) on Docker Hub:https://hub.docker.com/ Docker Hub is a repository for us to store our images, which can be pulled and spined just like our github.com holding code. Docker Hub holds images.
5. Create two new repositories, React and Node, where we will store our images.
6. Once you have an account, hit the command in EC2.
   1. Docker login
   2. Enter a username and password.
7. Now, from our code, we will create an image for the React app.
   1. React_app (folder): type below the command
   2. In Docker Hub, whatever your username, replace it in the below command, and since I have named the repository React, I am saying React:1.0.0 as it’s the first version.
   3. sudo docker build -t <user_ name>/react:1.0.0 -f./Dockerfile.prod.
   4. The docker build command is used to generate images from our code with the instructions mentioned in the Dockerfile. prod we created in previous step, and we are saying run it in current directory using ‘.’
8. Now, from our code, we will create an image for the Node app.
   1. Node_app (folder) type the below command.
   2. In Docker Hub, whatever your username is, replace it in the below command, and since I have named the repository a node, I am saying node:1.0.0 as it’s the first version.
   3. sudo docker build -t <user_ name>/node:1.0.0 -f./Dockerfile.prod.
   4. The docker build command is used to generate images from our code with the instructions mentioned in the Dockerfile. prod we created in previous step, and we are saying run it in current directory using ‘.’
9. Pushing to the Docker Hub
   1. Now we have created images in our local machine, but other machines can’t access them; hence, we will push the image to a remote repository, i.e., Docker Hub.
   2. You can check the created images using the sudo docker images command, which will list all available images.
   3. sudo docker push <user_name>/react:1.0.0
   4. sudo docker push <user_name>/node:1.0.0
   5. Now you can visit Docker Hub in your browser and see our image there.
10. Pulling images from a different machine
    1. Suppose you want to run the image on another computer.
    2. You will have to login to Docker from the command line.
    3. We will have to first pull the image and then run it like we do with our code on Github.
    4. sudo docker pull <user_name>/react:1.0.0
    5. sudo docker pull <user_name>/node:1.0.0
    6. Check in on this new machine using sudo docker images; it will list the two images.
11. Running a container from an image
    1. -d is used to run the app in the background, so our command prompt is not blocked. This flag stands for "detached" or "daemon" mode. It means the container will run in the background, and you'll get your command prompt back for further use.
    2. The next part specifies the Docker image to run. It includes the image name and its tag:
    3. <user_name>: This should be replaced with the actual Docker Hub username or registry where the Docker image is hosted.
    4. React: This is the name of the Docker image.
    5. 0.0: This is the tag of the Docker image, indicating a specific version. The tag allows you to choose a particular version or variant of the image. In this case, it's version 1.0.0.
    6. -p 80:80: This part specifies port mapping for the container. It tells Docker to map port 80 on the host to port 80 in the container. Here's what each part means:
    7. -p: This flag is used to define port mappings.
    8. 80:80: This indicates the port mapping. It means that incoming traffic on port 80 of the host will be directed to port 80 inside the container.
    9. sudo docker run -d -p 80:80 <user_name>/react:1.0.0
    10. sudo docker run -d -p 3000:3000 <user_name>/node:1.0.0

So, when you run this command, Docker will pull the specified image (if it's not already available locally), create a container based on the image, and run it in detached mode. The container will be running the React application (version 1.0.0) and be accessible on port 80 of your host system. The -p flag allows you to expose the container's port 80 to the host's port 80, so you can access the application by visiting http://localhost or from another computer by hitting http://<public_IP of EC2> in the web browser.

This React application will talk to the Node app and fetch data.

Part 5: Stop the container

1. If we are done and want to stop the container
2. Let's first list our containers, then stop and remove them.
   1. Sudo docker ps (only running containers listed)
   2. Sudo docker ps -a (all containers)
   3. Copy the container ID that you want to stop.
   4. Sudo docker stop <container_id>
   5. You can start it again by replacing stop with start in the above command.
   6. Sudo docker rm <container_id>
   
   

Part 6: Running using Docker Composer

1. In the previous step, we deployed the frontend and backend separately. Now we will combine both and do it as a single application using Docker Compose.
2. Let's install Docker Compose.
   1. sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s) -$(uname -m)" -o /usr/local/bin/docker-compose
   2. sudo chmod +x /usr/local/bin/docker-compose
3. Create a new file, docker-compose.yml.
4. Add the below content.
5. docker-compose up -d

Wonder why we have 1.0.8? I have changed the code over a period of time and built it.

Each time I updated my code into github, I built it using the docker build command and ran it using the docker run command.

Conclusion:

Unleashing Business Potential with Docker: By adopting Docker, your business gains not only a reliable and consistent deployment strategy but also a transformative technology that enhances productivity, reduces costs, and ensures agility in a rapidly evolving technological landscape. As you explore further, consider incorporating environment variables and optimizations to elevate your deployment processes. Embrace Docker, and empower your business for a future of streamlined and efficient operations. Happy containerizing!