Build & Deploy Series | Part-2 | Build and Deploy of React Application in Docker hosted on AWS EC2











Highly Recommend using repo here -Day2 to practise this project instead of code snippets, In case of confusion, Please do watch video that is explained in English, the code here in the blog is not changed to keep screenshots intact


What Can you expect from Blog:
  • Installation of Docker
  • How to build Docker images using Docker file for React Application
  • How to Deploy Docker images in Docker container
  • How to host Website on GoDaddy Domain when application is running on AWS EC2

Configuration to be used for this project:

Image: Ubuntu Server 24.04

Type: t3.micro

use  Type: t3.large, if you are planning to run ansible on the same instance, cost charges may incurr

#Note: AWS Free Tier is only for 750 Hours per year, so make sure you stop instance once you are done with the project

Now let us Dockerize our React application,We will install docker on our AWS EC2 
cat /etc/os-release
Now let us install docker from official documentation
the below command uninstalls existing docker and conflicting packages 
for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done
To install docker prerequisties 
# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
Now lets install docker latest version 

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
verify docker installation 

docker --version


Now before Building docker file, let us recap what we have done in Part-1 Project

step1: We have installed Git
step2: We have cloned Git repository
step3: We have installed nodejs
step4: We have installed npm
step5: We have build our react code using "npm run build" command
step6: We have installed nginx and we have copied our build folder path to nginx path

We will follow the same steps here, but we will instruct docker to do the steps and build as an image using dockerfile

Dockerfile is a text file with set of instructions and Layers are used to build a docker image

Now let start by cloning our git repository 
git clone https://github.com/Hari0o/Gold_Site_Ecommerce.git
Now navigate inside our directory 
cd Gold_Site_Ecommerce/
Now write docker file inside this directory.Give default name as Dockerfile

In our case, we already created dockerfile inside our repo 
FROM node:18 AS build
# Set the working directory in the container
WORKDIR /app
# Copy package.json and package-lock.json from GitHub repository
COPY package*.json ./
# Install dependencies
RUN npm install
#Copy git code to /app directory
COPY . .
# Build the React app
RUN npm run build
# Use Nginx as the Application server

FROM nginx:alpine
# Copy the built React app to Nginx's web server directory
COPY --from=build /app/build /usr/share/nginx/html
# Expose port 80 for the Nginx server
EXPOSE 80
#Start Nginx when the container runs
CMD ["nginx", "-g", "daemon off;"]
note:You can use the above docker file for your react project as well 
Build of React Project using Docker(Docker images)
we can now build our docker image using docker build command

since we named our dockerfile as golddockerfile instead of leaving it as default,we need to specify the docker file name to docker else docker searches for Dockerfile by default 

sudo docker build -t react-docker -f golddockerfile .


In the above command, -t flag stands for tag , we are tagging name react-docker to our image and -f stands for file, we are specifying docker that dockerfile here to build is golddockerfile

it might take some time in building docker image,once image is created,check docker images 

sudo docker images


#note: Build would take quite some time

Build has been completed successfully 

Deployment of React Project(Docker Container)
Since the image is already created, we will use the same image to deploy in our container
We will use the command 
sudo docker run --name react-docker-container -p 80:80 -d react-docker


In the above command --name flag is the to give container a name, in our case ,we named it as react-docker-container and -p is the port flag it stands like hostport:containerport . In our case since aws is our host, we opened hostport 80 for our domain to listen and containerport is the port of container,in our docker file, as you can see,we exposed port 80. so we will use that here and -d stands for dettached mode and react-docker is the name of the image that we built

Now verify our docker containers by command 
sudo docker ps


You will be able to find running containers

Our Deployment is successful

Now our deployment has completed, we need to make few more changes for our domain to be visible

Domain visibility

Go for AWS EC2, security groups and In inbound rules allow port 80,as our nginx listens on port 80 

post that copy AWS EC2 public IP,
Log into your GoDaddy Console and My Products >Domain > DNS.In A records, paste the AWS EC2 public IP
Now we will be able to access our domain in which we can see our React application that we have built and deployed
AWS public IP changes once the system is stopped and started back. to avoid this, we can use AWS Elastic IP with some cost charges

For Build and Deploy Complete Series - Click here


##I Post most of my content in Telugu related to contrafactums(changing lyrics to original songs),fun vlogs, Travel stories and much more to explore, You can subscribe here at sagar kakkala's world Youtube,You can also follow me on other sites Sagar Kakkala LinkedIn, Sagar Kakkalas world Instagram (page under construction), Entertainment meme Page ##


HomeWork to do before Watching Day3

  • What is Kubernets Architecture?

  • How do you check events in Kubernetes?

  • How to make Worker Node connection to Master Node?

  • How to check Kuberenetes logs?

  • What are Daemon Sets and Stateful Sets?

  • What is a pod,Deployment and Ingress?

  • Why are Ingress Controllers Used?
I Post most of my content in Telugu related to contrafactums(changing lyrics to original songs),fun vlogs, Travel stories and much more to explore, You can use this link as single point of link to access - Sagar Kakkala One Stop

🖊feedback,queries and suggestions about blog are welcome in the comments.

Comments

Post a Comment