Docker Deployment Guide for Full-Stack JavaScript App

Welcome to  the transformative world of Docker! In this comprehensive and hands-on guide, we will unlock the full potential of Docker for your business by walking you through the installation, setup, and deployment of a React and Node.js full-stack application on an AWS EC2 instance.

In Part 1, we begin with a seamless installation of Docker on an EC2 instance, guiding you through the essential security configurations.

 In Part 2,  we retrieve our application code from a GitHub repository, showcasing a dynamic React frontend and a robust Node.js backend.

Part 3 is the heart of our journey. Here we delve into the intricacies of crafting Dockerfiles for both applications, setting the stage for containerization.

With the groundwork laid, in Part 4, we demonstrate  the process of building, authenticating, and pushing our Docker images to the Docker Hub, providing a centralized repository for seamless collaboration.  We learn how to pull these images into different machines effortlessly, ensuring consistency across your development environment.

In Part 5, we introduce the essential skills of managing Docker containers, from starting and stopping to exploring the realm of Docker Compose.

Brace yourself for an immersive experience, where each step is a leap towards mastering Docker and empowering your business with containerized applications.

Let’s roll up our sleeves and dive in!

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.
   2. Backend nodeJS application (node_app folder): Simple GET method that returns a text
2. Here is the GitHub link:https://github.com/mahalingam-iyer/dockertraining
3. 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
4. You will have two folders, node_app and react_app.
   

Part 3: Writing DockerFile

1. Write a DockerFile for react_app with the name Dockerfile.prod.
2. Write a 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 with nodes 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 is, 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 dockerbuild command is used to generate an image 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.
9. Node_app (folder) type below the command
10. 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.
11. sudo docker build -t <user_ name>/node:1.0.0 -f./Dockerfile.prod.
12. The dockerbuild command is used to generate an image from our code with the instructions mentioned in the Dockerfile. prod we created in the previous step, and we are saying run it in the current directory using ‘.’
13. Pushing to 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.
14. 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 this new machine using sudo docker images; it will list the two images.
15. Running a container from the 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 nextpart 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. 1.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 5: 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 Composer.
   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 and ran it using the docker run command.


For a more in-depth introduction to Docker, we recommend visiting Blog : Role of Docker in Optimizing JavaScript Full-Stack Applications where you can explore fundamental concepts and benefits of Docker technology.