How to Deploy React App on AWS EC2 #aws #ec2

hey everyone this is Ali desire and in this video I am going to show you how you can deploy your web application on Amazon ec2 instance in this video I am going to use a react application a react basic template which I am going to deploy on issue to instance all right so as you can see I have a basic test application I just created it using npx create react app and then given the directory of my app so this is my app and this is the basic application I'll just show you how application looks you can have any other application of next JS or any other framework it is deployed on the localhost I can just click on controller and click or it will automatically open the application okay so as you can see here I have my application deployed and this is the basic test application which we are going to deploy on the ec2 here right now as you can see this is the localhost as it is running on your system but in the final at the end of the video you will have an IP address which you can use it anywhere throughout the world to access the application okay uh this is just a basic deployment video on ic2 uh in the further upcoming videos I am also going to show you how you can connect your domain name and how you can route the traffic to your domain and access the application what I'm going to do is I'm going to log into my AWS console for you if you are a new user you might be have you might not be having this recently visited Tab and all this thing usage and all also ec2 is having Affinity apart so if you just search it up free to your AWS you will get a link and this might show you all the free tiers available for each of the categories so we are in the compute part right now and you can see at the front at the first uh it is Amazon ec2 750 hours per month right so you will get every month 750 hours for the next 12 months you get registered as soon as you register you will get a 12 months free 750 as ec2 the only uh requirement is that you should use T2 micro or T3 micro and you can use Linux rhel windows or Ubuntu all that stuff so what I'm going to do is I'm going to search your ec2 this is the service I again I'm getting this is the most efficient way to search the services you can as well go here and search for it but uh you can directly go here and search it I'll just click on it ec2 this is my ec2 console page as you can see there are a lot of things and it is it looks overwhelming when you are new to this console but don't worry about it it is very simple to start a instance and to use it right so let's create an instance first you can go on launch an instance okay just follow the steps as I am saying so this is the instance creation part launch an instance you can give a name I'll give it react tab you can name it anything you wish to it won't uh change any of your code or anything you just name it and then select your required OS don't use Mac OS or any other which was not given in the free tier because then you will get charge for that so I'll select Ubuntu and this is the latest 2020.4 for me if you are watching this video further ahead if then you might be having some other version as well you can select that uh it is a 64-bit architecture then this is the most important part by default it is selected T2 micro keep it as it is don't change it and you can also see that if you if you get exceed the if you exceed the free tier eligible part you will get a 0.02 USD per hour so just select the okay T2 micro you can also select that so we will select it to micro this is the keeper so a basic information about keypad is that you want to SSH into the machine right you want to log into the machine but for that you need a keeper which authenticates you to the console it is basically a lock and you have the key for that so you just click on here uh click on create a new keypad name it as my react key you can name it anything you wish to and just keep it RSA and Pam if you're using putty as a you know logging in using the putty you can use this one but I am using a Pim file so I'll just create a keypad now it will download the key pair for me this is the most important part make sure you don't skip this because if you cancel it you won't be able to do it again then you have to create one more keypad and save it right so it's saved in my local machine now this is a network setting you every ec2 instance has a Security Group okay those are the firewall axis which you give to your ec2 instance keep it by default as it is and now create the instance so this doesn't take much time as you can see we have initially initiated the launch of the instance and as soon as I click on that ID you will be redirected to the instance so this is the instance state it is on the pending State let's wait for it until let's get started all right as you can see the instance is running up here if you are if you don't know how you can get this page so let's say you are here at this page just go on this instance running or you can go to this instances you can just select it you will see all your running instances so I'll just select this instant you can just click on this ID and you will get all the running information for the instance all the details regarding the instance the IP address is the private IPS and the host name and the security group the networking Part Storage monitoring part everything so right now what we want to do is we want to login it using SSH okay I'm going to use a command from here so I'll just open the command group what I'll do here is I'll just go to my folder where I downloaded the key and I'll just type here CMD and it will open up the command prompt in that particular directory so right now I am going to connect it so this is the page to connect when you click on the ID I'm going to click on connect this is the connection details there are multiple ways either you just directly connect to the Amazon CLI but I don't want to do that I am going to connect it on my command Pro just click on this SSH this link or copy this whole link now this is the actual the command so I'll explain you the command here the command is SSH and in which key I am taking this is the key name as we have downloaded the keyer is the key name and this is the machine ID so if I show you the ID it is this is the ID so we are going to SSH into this IP address and we are going to connect it using this key pair let's copy it and let's paste it here so I'm going to hit enter this might take some time so it is showing you want to continue connecting just do yes and it will add to your host localhost all right so as you can see I have connected to my ec2 instance um as you can see it shows the details uh welcome page and show you the system load processors and the IP address all that stuff and how I know that I am connected I can see the IP address and the Ubuntu this is the CLI come out from of my incidents which is running up here so now I am able to access this instance from my command prompt okay so now as you can see we have our easy to instance ready we have our application ready now you want to upload your application to somewhere from which you can download it here okay so what I am going to use it I am going to use the get part okay I'll just set it up so that this video might won't get much longer I am assuming that you know about get and how to upload files I'll just do it quickly okay so I have created a repository and I have uploaded my code over here this is the same code which is uh in my local machine I have just uploaded it so what I'm going to do is I am going to copy the code of the HTTP https link of this project to clone it now and I'm going to use the Clone command here to create a clone so what I'm going to do is I'll write git loan and the link of your file so in the command prompt you just click right on your mouse right click on your mouse and it will paste the link and I'll hit enter now so it quickly created a it quickly clone the files of my react application now if I do LS I can see my folder react app test now I'll do CD to my react app test and if I do LS I can see all the files over here the SRC file public file okay all these files right now uh for some reason if you are getting um let's say you have used npm command here I have used npx create react app command but for some reason if you have created a normal reactor you won't be having this git ignore file right so what I have what this git ignore file does is it won't take this folders and this uh directories to the GitHub because they are not useful to get uploaded and those are the very big files you can see here which are not necessary and you can install it when you clone the project so if you don't have a git ignore file make sure to make it otherwise it will create a lot of problem for you when you are uploading your application in my react application if you have let's say you have a lot of dependencies or your application uses a lot of npm packages there is the same way to install how you do it here what I'm going to do is ntmi to install all the dependencies available in my package.json right so I'll just do npm icons and it will install all the necessary you know commands for uh all the necessary dependence dependencies which are required for my application okay there is some issue here it says npm not found by default this Ubuntu machine doesn't have the npm it doesn't know so it is showing me this command if it doesn't show up just write as it is sudo apt install npm this will install the npm package this is one more issue which shows this error for this you just need to do the update part which updates are you going to apt get update okay update the Ubuntu system using that command so it's done now if I just type that command should I put install npm it will do it for me yep just click why and enter and it will install the npm part okay so we have our npm installed what you can do next is just do npm I and it will install all the necessary packages which are required for your application okay this says it is installed and now what we are going to do is npm start so this will start our application on our local system of our ec2 okay so as you can see it is compiled as Australia and it is running on localhost 3000 now you might be curious if I do this will it run so it won't okay because it is running on ec2 for this ec2 okay so we don't have a GUI we can access through the browser but we are running them so now how you can access this application so it says on your network you can do this so let's try using this IP address and if we do we won't be getting anything okay because there is a reason and uh it's not working all right so it is not working and the application is running so what is the reason behind this I'll tell you the reason so as I said there are security groups available on the ec2 instance and we need to enable this port on our AC to install we need to tell our firewall ec2's firewall that hey enable the 3000 ports so that the application can access it okay so what I can do is I can just select my instance this is my instance okay I'll go down below I'll go to security Tab and then I will click on this launch wizard this will take me to our security group part even you can access it through your network and security category and from here you can select Security Group so this is our security group just go select this if you haven't selected just select it and go here inbound rules and you can see there is only one rule which is applied right now it is SSH 22 so for doing the SSH we have this port open okay if you don't want as someone to do SSH you can just remove the security group from here we're going to edit the inbound rules and we are going to add a rule it is a custom TCP and we are using so for our example we have 3000 port our application is using I'll just add 3000 and select anywhere ipv4 so this is not actually the safest part but uh what this says is uh you have you are able to access the application from any IP address using this port okay so as even if you see here the SSH part it says that anywhere ipv4 but you don't have to keep it this way you can just select my IP and this will add your IP so that only you can access it on it all right anyway so let's start with the save rules now if we go to our instance again and we can copy this IP just go here and see your application here it is still not able to access the reason is we are accessing it through our private IP okay if you click on your ec2 instance you can see there are two type of IP there is a public IP address and there is a private IP address you cannot access our application using this address but you can access it through this so what I'm going to do is I'm going to select this IP address I am going to open a new tab I am going to paste it and write 3000 as a port and when I'll hit enter I will be able to access my react application so as you can see I have my react application here that is running on this IP and this IP can be shared to anyone you want to show your application all right but there is one more thing which I'm going to show you right now let's go to our ec2 console and let's see a okay so when you restart your application or your when you restart your machine this IP address is going to change okay this is not the permanent IP address so this IP address might change okay on the next restart or when you log into your AWS account it will change it and this won't be the same anymore so for this we have a we have a service called elastic IPS which comes under networking security and what we are going to do is we are creating a permanent IP address for our application okay so inside of free tier you can create one elastic IPL for your instance so let's do that just select the elastic IP and then click on allocate elastic ID just keep it by default and just allocate it now this will create a elastic IP this is the IP address which are which is allocated to us now we have to associate it with our ec2 instance okay what we are going to do is we are going to actions associate elastic IP address and then your you can select your instance okay so as you can see my app is showing up here running I'll just click on it and right now you can see the IP address it is uh 34.239.253.16 as soon as I'll associate it with our application this IP address will be changed okay so it is associated with our instance now if I refresh it it will show up the associated elastic IP okay so now when you access your application you can use this IP address and just use 3000 port and you will be able to access your react application or any other web application you are running up okay so and this IB won't be changed even if you restart your even if you restart or stop your instance and if you start it again this won't change it now this is not the only way you can do it this is a very simpler way you can test your application on ec2 instance but this is not the only way in the upcoming videos I will show you how you can create a CI CD pipeline like continuous integration or containers deployment uh uh simply I'm mean to say that you can just deploy it on your just upload it on your GitHub and it will automatically update the ec2 instance right so that is much easier way and I will also show you how you can connect a domain name so right now as you can see we have this IP address here but I want to connect it with a domain in the next video or the upcoming videos and I will show you how you can do that it's very simple so for this video this was it I hope you liked the video and you got some really good information about how you can do that so if you really enjoyed and if you really like the video make sure to hit the like button and make sure to subscribe my channel alright and I'll see you in the next video

Channel: Aliraza Khan

Views: 31,398

Keywords: aws, ec2, react, webdevelopment, iam, amazon web services, React app on ec2, nodejs app on ec2, aws tutorial

Id: oaK223BiTBU

Length: 21min 11sec (1271 seconds)

Published: Fri Mar 03 2023