Docker has revolutionized the way we develop, ship, and run applications. But what exactly is Docker? Simply put, Docker is a platform that allows you to package your applications into containers, ensuring consistency across multiple development and production environments. Now, why would you want to Dockerize your React project? Dockerizing your React app ensures that it runs seamlessly across different machines and environments without the notorious "it works on my machine" problem.

Prerequisites ✅

Before diving into the Dockerization process, there are a couple of things you need:

• React Project (which you want to dockerise)

Setting Up the AWS EC2 Instance 🚨

Next, let's set up an AWS EC2 instance:

Launch an EC2 Instance:

• Go to the EC2 Dashboard on AWS.

• Click on "Launch Instance."

• Choose an Amazon Linux 2 AMI (HVM) Kernel 5.10 , preferably an Amazon-linux Server.

• Select an instance type (t2.micro is sufficient for testing).

• Configure instance details and add storage.

• Add tags and configure security group (allow SSH and HTTP/HTTPS traffic).

Configuring Security Groups:

• Ensure ports 22 (SSH), 80 (HTTP), and 443 (HTTPS) are open.

• Save your security group settings.

Connect / SSH EC2 instance using terminal or browser.

1. Install Docker 💪🏻

Docker is an open-source platform designed to automate the deployment, scaling, and management of applications using containerization.

We can install Docker using the below commands.

# to update the system 
$ sudo yum update -y

# to install docker
$ sudo yum install docker -y

# to start docker 
$ sudo service docker start 

# add user to docker group by executing below command
$ sudo usermod -aG docker ec2-user

# to see information about docker
$ docker info

2. Install Git 👷

Git is a distributed version control system designed to track changes in source code during software development.

We can install git using the below commands.

# to install git 
$ sudo yum install git -y

# to check version of git
$ git --version

We want to clone the React project/repo from github. so we can clone the project using the below command.

# to clone project from github
$ git clone <react-project-url>

To see all repositories of instance :

# to see all repo.
$ ls

3. Creating the Dockerfile 👨🏻‍💻

A Dockerfile is a text document containing commands to assemble a Docker image.

1. Create a Dockerfile in the root of your project directory:

# to create and open docker file
$ vi dockerfile

2. To add any code/script in file , then we want to press "i" key to enable insert mode in file.

# Use Node.js Alpine base image
FROM node:alpine

# Create and set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package.json package-lock.json /app/

# Install dependencies
RUN npm install

# Copy the entire codebase to the working directory
COPY . /app/

# Expose the port your app runs on (replace <PORT_NUMBER> with your app's actual port)
EXPOSE 3000

# Define the command to start your application (replace "start" with the actual command to start your app)
CMD ["npm", "start"]

3. To save & exit the file, press the "esc" key and write below command.

:wq!

4. Follow below commands.

# to build dockerfile
$ sudo docker build -t react-app .

# to run docker image in given port no.
$ sudo docker run -p 3000:3000 react-app

5. To run a Docker image on the browser, we want to map the port no. with EC2 instance using a security group.

6. Now, we can run the Docker image on the browser using the instance public IP.

<public-ip>:3000

4. Pushing Docker image on DockerHub 🚀

Docker Hub is a container registry built for developers and open source contributors to find, use, and share their container images.

To push Docker image onto the Docker hub , we want to follow below steps.

1 . Login to Docker Hub using CLI.

$ sudo docker login

2. Tag the Docker image.

$ sudo docker tag react-app <dockerhub-username>/react-app

3. Push the Docker image.

    $ sudo docker push <dockerhub-username>/react-app
   

   

   

   In this way , we can easily dockerise the React app.