Deploy Full Stack Application (Spring-Boot+MySQL+React) to AWS(EC2, RDS, S3) | new 2023

okay hi everyone welcome to another course today we'll be looking at how to deploy a full stack application to awes a full stack application is made up of your front end and your back end so in this course will be deploying a full stack application built with Java MySQL and react.js so are we going to do this so in order to do this first of all we'll have to create a data based on RDS Amazon RDS then when we are done with that we'll link the our database to our spring boot application then we are done with that we'll create an easy to instance on AWS then we'll push our spring boot application to that place then you generate a link for us that particular link will link it to our front-end application which is react then we then push our react application to Amazon S3 so by sold in all our integration should be on AWS so let's quickly Dive In okay so I will get rid of this quickly then in order to start afresh I will go to my git syrup git repo then I will clone this airplane management system if you don't have this you can I'll leave a link in the description below where you can you know follow the course up or if you already have the courses that you want to or a project that you want to deploy you can just follow this step they are all the same thing so I will clone this repo I will just go to this thing I'll make a directory then we'll just let me just deploy here bits clicks clone just clean it here okay so when it is done cloning I will go to my IntelliJ and I'll open the application there I'll open my spring boots on IntelliJ I think it's this employee management then we have the back end here I'll put the packing the packet application here then I'll go to my visual studio code and open the react.js project there to use the rearges okay down so that's that so if you can see here we'll Place go me go to my application.properties so see that currently we have been linked to our local database here which is this place so what I'm going to do is we're going to create a database on Amazon RDS so let's go to our AWS account if you don't have AWS account on AWS you can simply go to aws.com you can create an account okay when you're creating my account you have to insert your credit card but you will not get debited if you get debited to be returned to you so it's going to be free so I'm good so I will type RDS here RDS okay I'll go to rods okay so you kind of permit my network connectivity seems to be a bit slow I'll click on create database okay so okay I don't really know what's going on this thing is a bit slow okay it has opened leave it on standard create okay you are we are going to be using my SKS or database you select my SQL support just click on these two so it will automatically select the latest version for engine version for you on the template we will be using free time we're not going to free tier we're not going to pay we won't be paying so click on filter in for example production you can click on the production so our database identifier let's call it employee let's just leave it and play let's just see I play MS when we play management system then our will create a username for our DB which is admin let's leave it at admin and password we just call it password p-a-s-swd confirm password let's just leave it a password okay now instance configuration okay let's leave this as they are enable to scale in let's leave that as default okay let's go down Public Access please make yes so that it can be so that we can connect to this outside this platform okay so that's Public Access allow our database to be accessing assessed publicly so good traditional configuration below our Port is 3306 um let me just change it to 3307 let's just take the tto so we can leave it as a default 3306 yeah so I'll leave it as a default so let's go additional configuration here our database name let's create a employee Ms employee management system MS then leave the other parameters they are leave this as they are you enable low you can decide to enable the login case probably it's not connecting on to get a trace of what happens then we can create our database so before then let me let me just My Data Business let me just log everything here database database name so that I remember then our username is admin password is password ports is 3307 okay so I will not forget so let's go back and see how Paul is 3307 okay so click down then let's create our database just please make sure that you enabled Public Access it's very important so that your your database can be connected yes so go down create database so let's just switch okay yeah you'll see this okay never so this is creating our databases click on the employee MS okay so it's creating our database I think this is going to take some time so once it is created you'll get our database endpoint here and the port will be showing here so I'm just going to pause this video until it gets completely created okay now I've refreshed the tunnel we can see now that our input is showing so this is our the end point we'll be using to connect to our database on the server on the AWS so let me copy the endpoints I'll just put it here DB and DPS URL our database URL is going to be this then so our body straight to 07 so you can see it's our DP URL okay so that's that now for us to be able to connect we have to click on security remember everything on AWS is all about security and security so I have to click on this security VPC Security Group and have to modify it so we can connect so I'll click on that um Okay so Okay so this is it click on that then I'll click on edit inbound rule okay so click on edit in boundary okay edit in manual Okay so for this we have to make all traffic we have to our source we have to make it anywhere okay so we have to save rule you have made you have not made any change okay um let me create another rule um let's cut this or traffic let's cut this anywhere before okay let's save room there was an error on your group impound group okay back let's cut this as it is the civics let's delete this one just save this make sure this is anywhere happy several okay our we've edited our impact rule so just make sure that let me go back on the in battery again make sure that um the tab is all traffic and the sources anywhere before so make sure that is what it is um this is instrumented before true let me just add another rule um okay make it anywhere people I just want to make sure that this is okay so let's test this on our itably on our SK workbench to see if it works let's cut this AWS DB then our host name is remember our host's name is stati RL wscrl which is which which is this the URL for assessing our database okay so remember our username was admin our portal 3307 our password add mean sorry our password is password a password was password okay so let's test our connection to check if it is connected okay let's just do that you can see successfully made the mask connection so that means we have been able to connect to my SQL so let me just click on it and check who I have there but because we are successfully be able to connect to our database to our AWS database so let me use it use that word okay so you can see and play MS currently we have no tables okay our database is employee Ms okay currently have no table so we can't have no table so that's that okay so so now let's connect this to our let's connect this to our let's connect our local our spring boot project our back end to this database so this is the type is we'll go now go here I'll go to the spring boot application.property I will just change this to the URL I will call this three three oh seven then I'll call this the database name is uh Slash database name let's just think of what it was just copy it because I didn't cram it so the database name so remember our user name was admin our password was password let's just do that so let's run our application and see how it goes so let's run our application and see how it goes okay I think it's running now on what Bots uh I think it's running on port 8080 so let's just specify that by saying server.pots it should be equals to 8080. okay so to test this our application to just test it and check if it's actually connected to our DB our URL will be and just come here script to urls localhost 8080 slash m employee okay let's just make a get request we can see this it was it is random empty value because we don't have any any value so yeah let me create a post request let me go let me add an item to see through if it will get reflected on dots Json let me quickly go back to see how is the posts item um okay let me just quickly go to the model to look at the I'll be using a first name last name email okay first name last name email okay that's that's post mapping first name last name image so let me just quickly write that um first name I think it's going to work it's going to work so let me let's leave that alone it's going to work so let's just proceed to the next step okay so up next now is to deploy our back end to Spring to ec2 so what we're going to do now is to go back to our AWS and go to ec2 ec2 so I'm going to create an instance on ec2 and I will deploy my backend application first of all one we created a database we are able to link it to our project now we are creating an easy to install so to create an easy to instance just go to launch instance down search ec2 ec2 click launch launch instance hope I'm pronouncing it correctly okay launch instance okay so over there we can put in our name let's just call this employee management and play MS my name is system actually so it doesn't so just call it employee management system so application OS images so we're going to select our our environments more like yeah it's called OS image so I'm going to leave it on Amazon lens it's more like a default for yeah I'll leave it on Amazon you can choose Ubuntu if you feel like I mean Amazon Linus is more of a popular one so let's make sure this is pretty eligible so we can use it for testing purpose okay so just leave this as they are go down go to make sure you see on the free tab then keypad we have to generate a key pair more like an SSH credential for logging into this ec2 instance because this easy to instance is going to be on AWS ec2 and we're going to log into this instance on our machine so we're going to we cannot just connect directly so we are going to create a pair more like a more like a credential for logging in so we're going to do create pair so enter pen name okay let's just call this and play a mess there should be RSA then it should be dot payment Phi so let's create key pair KD our key has been created so let me go to where it was I think it's on the download so we are going to move it to a place so let me just move it to our Tech bra here okay so this is where it is the folder where it is so just let me just create a new name let's just call this um Pam fries okay let's just um okay let's just call it perfect and it's over here so let's leave it there so let's continue um so let's continue um okay so for that we are going to the network setting we are going to just leave it Chris leave it as it is Alice estate traffic from anywhere we're going to leave that as it is okay we're going to leave that as we are going to just keep scrolling down let's look at advanced cities we're going to yeah we're going to just leave those as they are code now go down go down go down go down go down Okay so we're going to we can create something here that will always run whenever we run our instance we create a script here so let's just leave that for example let's make this as simple as it is so let me go over it again first of all you create your name your instance name then you create your land your you select your your image which is AWS once Amazon Linus so yeah make sure your instant step is free tier you create your key pair and that so yep so we go that okay so now over here down let's click on launch instance so it's going to create our instance I think it's going to take time okay all right created successfully so next step you can decide to do all this one but let's won't be doing that so let's click on the instance and those further configuration so good so this is our instance that we've created you can see the eastern state is pending that means he's still doing some other Grand setup so it's going to take a little bit of time before it gets if phrase let me just click on it Fred gets done you can see okay our instance ID is there okay I think is our instant state is not running okay it has been set up okay okay so our this is not our can look at this now we can see that our public IP address so this is what we'll be using to connect to the this is going to be what we'll be using to connect to this instance I'm going to copy that I'm going to go here and just save it again here so we can easily reference instance public so I went oh wow it's kind of small so I'm just going to make it a little bit big good so that's that's I'll go back okay this other private IP address this was if you're connecting from instance to instance within the AWS platform that's where this private app will be usable for the public IP faculty outside AWS platform we're going to be using this public IP that's what we'll be using that was what I just copied down here so I'm going to scroll down to look at other things to explain okay um okay scoot down go down go down go down go down go down okay yep so okay so for additional setup I'm going to click on security remember everything on AWS is all about security if you want your instance to be accessible you have to add some security to it but by default he loves tough a lot of and things on AWS is are by default not accessible so you have to go to the security tab click on the security here okay for go down you can see that there's one Security Group here you click on the security group it's going to open something like this so what I'm going to do is we're going to on the inbound rule we are going to click on edit e-band rule so if you click on edit a bunch rule for now will see that we only have we are only able to log in using our SSH okay now I want to add another group so that we can log in so that it can be accessible from other from the internet okay such as TCP so that would like maybe using HTTP HTTP those other from your email so you can access it aside from your SSH so you you add click on ADD rule so on the port range the port that we want to be able to access is 8080 okay that's that remember our ports in which our springboard is running is 8080 so we put it here so the source type you just put it anywhere ip4 so you save room okay security okay it has been added now okay now we cannot access from using our SSH and our from port 8080 on the network so those are the configuration that we need to do so uh get take this up so let's just go back to Security Group um let's go back to our instances so this is employee instance let's just click on it and now let's click go to the comments here so let's look at how to connect so click on the connects here we are being told on how to connect to our instance using the SSH clients okay so first of all open your SSH client that is your terminal so I will go to my terminal so let's just create this okay this is my terminal open that then you say locate your private key does the payment file that we created we should locate where it is if you can remember that is on my this on my this um Tech bro let's say LS this is the pen5 CD pen5 LS you can see the pen file here that we created so that's that then run this command so what is command to th mode font is for you to like Grant your admin access on that particular file okay it's just like more like to authorize the file so click on this so just paste it here that has been done so next is telling us to connect to our instance using either the public DNS which we copied and spaced here okay that's more like a it's a public DNS or you can do this SSH minus I do this then ec2 user and so you can log in so let's do this okay so on our terminal let's just paste it there so what we're doing now by using SSH to log in on our instance that we created from our machine that's what we're doing here okay so that's that now yes okay so you can see now we have successfully logged in on our instance so what we have to do now is to update our dependency for this our environment this is more like a a Cloud Server a cloud computer server we are in this is equity on AWS server that was that was assigned to us so we have to update our dependencies so do that you do sudo yum updates so this will update your dependency yes so you're more like make your environment ready for for that dealing so so that's that okay so this is running so when this is done we'll have to okay I think it's done now we have to install a a a jdk remember our Spring Book application runs on Java so we have to install jdk to our server if we are going to if our API was in node we are going to install npm so that's something like that so to install a jdk so I will just go here I will go to Amazon because I will leave a link to the website you can just click consider your install java17 this is this I'll just copy that on paste it here instead of typing it so I will just install that and it's running yes and it's running so yeah so yes okay it has not installed it's still installing okay to successfully installed so let's just check our Java version using the normal command Java Dash version v e r s i o n I have challenge with spellings we can see now we have we are our environment is has a Java installed which is our 17. Okay so that is that okay guys now so what we have to do next now is to move our is to move our job file on our spring boot to build it to a Java and then move it to our instance so in order to do that I will go over here on our springboot project okay then I'll go to the mapping at my right here right click on it then it will open this life cycle click on it then the install part double click it and run Marvin build so this is going to generate a jar file of our application okay so we're going to wait until it is done okay so night is done it is going to be on the target folder so in order for us to locate where it is we'll go to our to where it is go to the back end yep go to the Target and we can see that this was you know this is a job file of our entire application which can be run on a Java environment has been generated for us so what we have to do now is to look for a way to move this into into our s ec2 server so in order to do that we're going to use this command SCP you know what let me just go to over here let me just copy this okay first of all we have to let me create a new terminal here new window so I'll just see it into the location of that Java CD Check Pro what okay slash employee management slash okay CD employee management back end LS okay CD targets LS here we can see the employee management job file this is what you want to move so in order to move it I will just make use of this shortcuts here so I will go over here I will just paste this so remember we we need this dots what we are doing here is that we unlock we are moving this file into our ec2 server so for us to do that we have to like meet this credential to be able to move it so what I'm going to do I'm going to do SCP secure copy Dash I um okay slash I'm going to go to the location of this file which is Tech bra slash Pam fries suit depending on where the location of your fat is Pam files slash this okay then we are going to move the employee management system oh no I think I copied that wrongly oh shits we're going to move um are going to move this particular one here let me copy this one I'm going to move it just we're going to move it here we're going to move it to this team and we're going to make sure it is on the on this folder let's just do LS pwed here to see or go to measure it is on this ec2 slash ec2 through I'm going to make sure that it is on this place okay good so what we're doing here is that we are using this file name this employee Ms from here was copying this employee this is our Java into our server into this location that's exactly what we are doing here and for you to be able to access you need this dot pen file so that was what we did here okay so let me just move it let me copy it sorry okay we can see it's copying so I'm going to give you some time to fully copy itself into that Apple into that place okay so I'm going to no I'm just going to wait I won't pause the video so let me just wait it's going to be very fast okay so as it is running let's open our our front-end application which is this one will open remember open it then so I will just Ctrl J I'll just run we don't have our nude package I'll just do npm I to install all our all our packages on over here so so that I'll just make sure that it is installed so let's go back to our terminal it's still moving so give it some time so so let me just okay so let me so let me see what I actually did here so this is an angular project yep it is oh it I was actually an uncle oh it's an angular project so it was actually an angle it's an angular project actually not serious okay I thought it was a real project so it's an angular project so let's it's an angular project area it's a real projects sorry Spider-Man project so that was so let's start application npm PM stats what so let's just start this so let's check okay we can see our application has been fully moved to hasn't fully moved to our so where is it again it has been fully moved to our our AWS server so let's check if it's yellow LS we can see now I'm on the server and we can see our application is here so in order to run this it's very simple just do Java we don't just do Java Dash jar then our application name so very simple so let's just let me just copy this I'm a fan of copy and paste I just copy this and paste this okay we can see our spring boots application is running and in order for us to access this is going to be on um is going to be on is going to be this slash the port which is 8080. so let's do this so it's going to be this at able to edit this also is here gonna be this the IP slash 8080 slash employee so let's run this okay bad request so what's going on so let me check who I was not able to run it let me check my server it it is executed um okay let me just check okay see good knots okay sorry supposed to be a get request and let me just see yep we can see now we have returned a we're able to make a request to our all right now we're no longer using localhost we are now using our ec2 our project which was deployed on ec2 so now we're getting an empty rest protocol would not have any data valuing the database so now let's connect this to our area our react project and then test if it will work so I will just copy this go to my reacts projects where is the employee service I'm going to change this it was to change it to this copy go to change the url to this number one look on your localhost we are now here so I think it has reloaded I guess so let me just npm stats okay so let's see how it works so let me let me slim what so let me add an employee let's just put my name save Let me refresh add my name save let me fish okay let's see what happens let me go to my server missing public okay you reboot request to it's missing probably.com no no readable exception okay so let me see um https is supposed to be like that on C okay so why is it not readable here so let me see okay so let's see what this what what is going to happen here are the employee this is okay you can see our employee was added let me add another employee choose Mary Josh at mail.com let me if we can some other play was added so now we have successfully been able to link our successful be able to host our API on our ec2 instance link it here now we are now linked to ec2 no longer our local hosts and let me check our database we will see that we are getting data from let me just refresh consider when I get our data is now on our this is now on our AWS no longer on our local hosts okay um so let's rule you can see our data is now on our AWS no longer on our local machine okay okay so that's that so now all I'm going to do now is to deploy this our app this is our front end to S3 okay so all we're going to do next is to look for a way to deploy this our react application to our AWS S3 buckets and then turn into a website so to do that first of all I have to build this application again so to do that to do npm build so that so that it will generate a beautify npm run build run build so it's going to generate a beautiful file up here you can see now a beautiful is be generated so it has been generated a build fast be generated okay so while everything in this files what we're going to push to aws3 so I'm going to do now is I'm going to go to S3 buckets S3 just type in S3 here you can see S3 up here so click on S3 and when it's when it's up oh what's wrong with my network it's kind of slow okay so I'm going to create the buckets so bucket so let's call this employee and that's called uh employee Ms management system let's just call it employee MMS then we just leave everything as as they are acknowledge that then go down down you're going to Let's we're going to create our buckets okay so our bucket has been it's been created okay our pocket has been created I just had a call sorry about that so now this is our employee MX we're going to click on the bucket we are going to mix up for that further configuration so we're going to on the permission part click on the permission remember every Tew is only about permission security you go to pocket policy click on edit so we're going to just paste a script here that we allow our pocket to be publicly accessible so I'm going to go to my gist file I already have a script here I'm going to copy it I'm going to leave a link to it and then go to my S3 buckets and paste the script here so I'm just going to replace this part with this pocket Arn over here I'm going to copy it out I replace this switch so that's that I'm going to save yep so I'm going to save so after that I'm going to go to my properties I will scroll down we are going to see static website hosting is currently disabled I'm going to enable it click on enable then you see host a static websites um index our Intel document should be in this dot HTML our error we don't have errors so we'll just leave it as index.h TMA okay yep okay so that's that's so let's save changes okay we're going back to our object again I'm here we're going to click on uploads yep so I'm going to first of all add a files go to our check brand just go to where your build file is front end build I'm going to upload both of this I'm going to upload everything inside the beauty so I'm just going to upload this both of them first um load then I'm going to again close I'm going to upload again a folder add folder this is the last folder on this build so I'm going to upload it just want to let you know that we're going to upload everything I'm going to upload this upload the app are going to upload so yep is uploading so why is it taking time I think there are a lot of creepy stuff on the static folder so probably so let's wait until it's fully uploaded okay yep I think it's been uploaded so in order to test it out we are going to go to our practice again going to go to a properties again then here now we can see that there's not a link to our static website you can see there's a link just click on it and you see here you can see these are the two data that we got from our AWS database so let's just add a on that one let's call this Mary Johnson at gmail.com oh this should be the email let's see John C safe okay refresh we'll see the Mary Johnson was added so let's update this Dennis to let us see sovik sovik let's just see Rush I just got this Rush at gmail let's save we can see now refresh tennis has your updated to and Soviet rush so let's delete this um Joshua Mary let's click on delete and it was I think should be deleted it see that was removed so I can add more you can see now that we're currently using our uh we're currently we're currently um using our our URL is from S3 our API was it was deployed on ec2 and our website our database was deployed on RDS so that is that if this video was helpful please you can support me any way you can you can like share and you know others so if there's a video that you'd like me to do tutorial so just let me know on the link below see you next time

Channel: Phegon Dev

Views: 19,328

Keywords: ec2, s3, rds, amazon ec2 instance, amazon s3, amazon rds, deploy to aws ec2, deploy react app to aws s3, deploy full stack react app to aws, deploy full stack springboot to aws ec2, deploy spring-boot to aws, deploy java to aws, how to deploy java project on aws, how to deploy java web application in aws, deploy fullstack java application to aws, fullstack java web to aws, deploy spring boot application to aws, ec2 instance, 2023, teckbra, techbra, deploy ec2 instance aws, ghana, africa

Id: YC7NBNICGeY

Length: 45min 15sec (2715 seconds)

Published: Sun Feb 12 2023