Udemy- How to Deploy React Application Manually. | CI/CD Tools & Real-World DevOps with Sagar Kakkala

 



Configuration to be used for this project:


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/sagarkakkalasworld/Udemy-section1.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 Udemy-section1
once inside directory install react-scripts
npm install

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

Application 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,

Now use <AWS Public IP>:80 to access application 





Domain Visibility


In case, you have Domain that is bought from any DNS Providers, example here for this project will be taken from GoDaddy

Domain is not Mandatory for this project, but if you have an existing domain you can use it on how real time scenario works


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 




Note: Everytime AWS EC2 is stopped and started , Public IP gets updated and new IP needs to be updated in DNS Provider sites and to avoid such issue, we can buy Elastic IP and associate with our Domain. and also website shows insecure as SSL is not configured.

You can know more about SSL Certificates, How to configure SSL certificate for domain - here for free - SSL Certificate Configuration









Comments

Post a Comment