How to Deploy React App on AWS Amplify | Deploy NextJs App on AWS Amplify | AWS Amplify Explained

hello guys Jam here in this video we are going to deploy our next JS which is the reject JS framework on AWS for this we'll use the one of the service of AWS which is AWS amplify this is very very easy to deploy your react or NEX project if you're going to use the AWS amplify so this is my one test application this is the uh react next GS application and uh right now this is on my local system I'm going to deploy on AWS uh I mean to host the application on AWS using the services AWS amplifier so guys first first I should make sure uh the code of this application is on my GitHub account so this is the my one of the repository which is exet and I can see all the files are here right so my code is in the repository GitHub repository and uh I want to deploy my uh code on AWS amplify and finally I will map the code with the this domain which is in my goady account so when I type.com I should be uh able to see this page so right now it's not running I'm just running npm Run tab so you can see this is the test page right this is the test P so first thing I have to do in the Ed amplify I should go inside this and uh I'm inside AWS amplify here I'm going to create new app and it's asking to deploy your app so it can be react angular View node so such type of application I can deploy so if you have the code at GitHub bit bucket code commit git lab you can use those or you can deploy without git so my code is on GitHub I'm clicking this one and now it's next and uh it's asking authorization so I'm clicking authorize and uh uh so I'm authorizing AWS amplify and uh I'm not going to choose all repository I'm going to choose only particular repository which is uh I've just created one test which is the exor net right and install and authorize so I have to use my username password Here of my repos so you can see now my code is from the repository is now fishing into thew simplify so if you see this is my repository and the branch is main so I'm I'm using this Branch next and uh now this will the build command this is the next day project so I have to build so this is the command by default a simplify has detected now next all set V and uh GitHub exet next now s so my code is now deploying you can see it will take some time so you can see the progress so basically here uh all my code from that repository is coming into the AWS amplify and AWS amplify is bootstraping the account so it's almost completed 71% 78% now it's internally creating role and now creating the app and also creating the branch now deployment of the app is started so you can you can see uh it's created one app which the ID is this one and uh it's now showing deploying right so it will take some time because here amplify will get all the code and deploy and and it's internally read into the pack package. jsn and uh get all the dependency internally we do not have to touch or install those dependencies separately it is taking care by itself internally so it's still deploying so right now it's uh it should display some status but uh it's a deploy to done in few seconds more seconds now it's almost it will take few more seconds in the deployment and uh so still in the deploying stage it's to it's also taking care how many time sticking in the build and deployment so you can see the time also because AWS charges for the amplifi based on this duration so it's duration 01 per minute so as my account is free tire account so it is not going to be charged but once your free tire is expired after that it will take uh it will charge so now you can see build is completed it's completed in 2 minutes 15 second and now uh deployment is also almost completed yes so if I view you can see the status deployed so if I click this one now you can see the same project is now hosted on a using amplify this was on my local system and now this is the URL generated by AWS amplify and you can see your project is hosted on AWS this is so easy now as this code is linked with my GitHub and if I make any change in this project so let me show you so if I open the vs code in the vs code I'm just going to open this project file open folder and uh I'm just opening this folder and uh in the pages there is a public uh one second and yeah welcome to next J uh test website right and I'm on Terminal so if I just type here let this is a g add all G commit test get push so once I push here we see here AWS recognize that there is some change in the automatically there is change inside repository and this will start automatically to deploy so this is the code after some time it will be changed automatically so whatever change I did it's deploying automatically when I'm code is posting into repository so AWS amplify is taking care and getting the latest code from there and it's Auto deploying the code on the website on AWS so after some time this will be updated so till it's working now as my website is uh loading on this URL I do not want to be this URL for my website as I have my domain exor net so I I can use this one right so how I can use this so for this I have to use uh another service of AWC outout 53 right so I'm not going to deviate from there so let it be here it's a deploying this is still deploying so it will be done in few seconds but it's taking some time so let us first go to this uh AWS Route 53 I'm opening a new tab and here uh I'm creating sorry I'm creating a hosted Zone the hostage hosted Zone I have this is my website and I just created the hostage zone so it's also creating some name servers and if I click this this is the name servers created by for this uh x.com on AWS so I should take it I should go inside uh name servers for of this website on where my domain is registered on it on goed and I have to change the name server so I will use my own name servers so from here I have to copy and paste here there after copy paste here then copy paste here then copy and another four name servers are there and save it so it's giving me some error that attempt is failed let try to save attemp to name Serv has failed please retry so why it's failed so let it click again so I'm adding again I'm trying to add this one and uh the last one is this one now try to save okay now it's successfully done so now it's uh accepting right so this will take some time to reflect here so now we should go inside this now you can see deployed so if I check my website and refresh this one you can see this test website is auto deployed right once the code was so [Music] [Music] it will take some time for so it's Auto configuration will be there and uh if I see the DNS records this is these are the data right and uh if I go to my DNS records so basically host poed on somewhere else so DNS will be not added here and uh it will be all will be here only right so if I try to create any record here something like that I'm trying to create and uh so it's automatically generated and created by yeah now you can see it's automatically created these two c name and are added by AWS now if I go to my domain x.com let us see what is happening so my website this nextjs website is you can see accessible on exor net.com so this is the way we can deploy our website on AWS using AWS amplify here I have deployed my next year's project so guys hope you enjoy this journey of deploying your next JS project on AWS Please Subscribe my channel if you yet not subscribed and like I'll come with a new topic new interesting things till then Happy learning

Channel: Altmatic Academy

Views: 436

Keywords:

Id: l9m2Nf1Wp34

Length: 19min 36sec (1176 seconds)

Published: Thu May 30 2024