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





Build and Deploy series: The Series here does not focus on individual tools but focuses more on how different DevOps tools are connected to each other

The series focuses mainly on Build and Deploy and also may not follow best practises of DevOps but we will speak about the best practises and places where in our project to be improved to make it a secured setup.








Highly Recommend using repo here -Day1 to practise this project instead of code present in 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



Before we begin, we recommend to take a AWS free tier account 


Also for practise, we recommend you to buy godaddy domain, buy any random domain at cheapest price for practise.

Also install the following tools:


Configuration to be used for this project:

Image: Ubuntu Server 24.04

Type: t3.micro
Now, let us launch an AWS EC2 instance to begin with Once you launched AWS EC2, let us now SSH into the system and follow the process.

Install Git
sudo apt install git



You can use any of sample projects - Sample React Projects

Fork/Clone the project into your own github account as we can use the same code for making changes in other part of series

Once git is installed, let us clone our repository
git clone https://github.com/Hari0o/Gold_Site_Ecommerce.git

Build Prerequisites
Now let us start installing node for React Project to run build and refresh all repositories before installing node js

sudo apt update
Now lets install nodejs
sudo apt install nodejs

Verify node installation
node --version

Now install npm
sudo apt install npm

Verify npm installation
npm --version

Now navigate to directory where our package.json file is present
cd Gold_Site_Ecommerce/
once inside directory install react-scripts
npm install react-scripts

verify if node_modules folder is created or not
ls
Build of React Project
Run npm run build to get build folder
npm run build

#note: Build would take some time and also you can ignore the warning
Once build is completed, you can find "build" folder that is created recently
  
  Build has been done successfully
Deploy Prerequisites
We will install nginx as we use nginx as application server to deploy our react application
sudo apt install nginx


Verify nginx installation
nginx -version

Deployment of React Project
As an initial step, copy our "build" folder generated to /var/www/html, cause this is the path where nginx listens
sudo cp -R build/ /var/www/html/
once copied, now let us edit nginx default path
sudo vi /etc/nginx/sites-available/default
Once installed, let us change nginx path from /var/www/html/ to /var/www/html/build

You can leave the remaining to default and now restart nginx for changes to take effect
sudo systemctl restart nginx
check the status of nginx
sudo systemctl status nginx

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


Apart from DevOps, I post most of my content in Telugu related to contrafactum's(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


HomeWork to do before Watching Day2


  • What is difference between hypervisor and docker container ?

  • What are components of Docker file?

  • How to log into Docker container ?

  • How to check Kuberenetes logs?

  • How to check container logs?

  • What is difference between Docker compose file and Dockerfile?


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