Continuous Deployment using GitHub Actions | Auto Deploy MERN Stack | AWS EC2 | CICD Pipeline

hey guys welcome back to another exciting session i'm your host mesh gary you're watching me on youtube now and today i'm gonna take you through the uh complete github actions and how to create ci cd pipeline to deploy your anymore stack project so uh without wasting any time let's deep dive into it so you have to have one instance available you can choose any by the way like digitalocean azure google cloud so i'm going to use aws for now just simply uh create new instance from here choose any by the way i'm going to choose this ubuntu after that quickly review and launch this thing so this is it i guess now you need a one key pair to uh in order to get connected with your cli okay so here you can name it i'm gonna name it mesh uh download this key pair okay if you are on windows you need putty otherwise this is ssh uh will help you to get connected okay uh view instances inside that you can see it will take some time this is my new pending one so until then what we can do is inside github we need our two repositories so i'm going to quickly create a one is let's say front end and another one is back end so let me create new repository okay and this is my back end so let me create this one after that uh create new folder on your desktop okay just uh name it whatever it may be i'm going to name it full stack now simply drag your folder on the top of your vs code and from here you can open your terminal i need to quickly connect to my bash profile okay or let me check mode version quickly uh this is my well so nvm used current version is 17 oh okay this is it now i can start with back end okay and back end i need to create two directories print it and back-end okay cd into back-end where i am going to create quickly uh new project npm install express okay let's go to the back end app torches app.get and request response it will return json let's say where i'm going to send message hello back-end this is it here i need to write app dot lesson 3000 okay and this is it now i need npx git ignore node so it will create a git ignored file here now similarly in content lead into front end inside that what we'll do is npx create react app space dot so i need to install create react app here till then what we can do is uh we can go to here it's created now we need to set security rules so here you need to create oh edit your inbound rules to allow port 80 okay so this is it i guess and now we can proceed with the further things okay now i need to correct this instance so in instances you can click here connect and here you can choose this ssh copy this thing and change your directory where you just downloaded uh after that you need to it with sudo command so i have my dot pain file in downloads hit enter enter your password after that hit enter and type yes enter also yeah you are now connected now sudo apt update okay or it will take some time to update this is it now we need three packages uh first one is node.js npm and now sudo apt install nginx or node.js npm enter it will take some time till then uh what we can do is we can wait for this thing else so let me show you a few things make sure to choose your region here okay now excuse me this is my public dns so this is uh let me see the output okay so i haven't deployed anything else uh this is it should be http so it is not showing anything uh to me because i haven't deployed anything okay so what we can do is we have to wait uh for this thing once uh so we can deploy the backend till then so cd into backend okay now let me grab this backhand and get add space dot okay get in it first and after that let me set this remote origin hit add git commit i've got i can't get push after that grab this thing and paste this over here hit enter this is it it is deployed let me refresh this thing so now you got the code now you can click here on actions inside that you need to search node hit enter now you can see uh click here configure now here you need to make few changes remove this this is self-hosted it should be 16 this is it commit this thing now inside settings you need to select this actions runners till then let me see this is 95 percent is done and now this is done front end is also done so let me install or let me check the code quickly so inside app.js i have this much of code i don't need this much of code let me remove it quickly okay you want to do this need this class or now so i've got css and this is not needed i'll simply use h1 okay hello content this is it and i'll simply remove this no need by the way just what we can do is npm run build okay or what you can do is you can first let me commit this thing okay we'll try something different this time so get in it it is already initialized okay uh so let me add this okay git add git comment get push grab this thing press this thing here [Music] so this is done now let me refresh inside actions again i'll select this node.js inside this i don't need this thing this is my self-hosted [Music] okay excuse me so uh it should not be test it should be npm run build okay so this is it start commit this thing okay now let me see here you need to install check the version npm version node version ngrok so ngrok is already there so now uh you can if you refresh the page you will get sorry nginx is already there so you will get in your next page now we need to do something here sudo and pm install hyphen g pm2 production manager [Music] that will help us uh to refresh the page okay now here also we need in back end we need to create a self-hosted runner now make sure to choose this linux okay so once you do that you need to grab this thing okay and press this thing over here so what i'll do is i'll simply use back back-end because this is my back-end code [Music] let me check if this is my back-end oh yes this is backing okay now i'm in back end just simply copy one by one now grab this thing enter oh crap this thing ctrl v enter just you just need to copy one by one this is it now enter into enter three time this is it it is created now if you select ls you can see svc is there so you just need to grab this thing after that you need to hit sudo or dot slash control v install once you install this thing after that you need to start this thing once you start this thing after that you can refresh this page okay okay oh it will take some time yes let me see some lines uh yes it's taking time but it's fine it will be here you can see this is active now so what we can do is a similar process we need to do here in settings okay now here in actions runners let me see the code i have already deployed the code yes this is it inside runners create new self-hosted choose linux here now grab this thing again come to your root directory and here you just need to paste this uh front end this is also my front end hit enter after that simply grab this thing one by one this is one time process no need to worry about this once you get set up with everything okay grab this thing and in last theme or it will ask for some questions this is it enter intent this is it now again sudo dot slash svm install okay to ls okay svc let me grab this thing svc.sh is there no now you need to start this thing now what we can do is we can check this thing let me click here so this is also active if i go here now front end okay so let me go here quickly the build is already started if i go here everything is all right then it will definitely run all the things properly okay so let me check this till then inside the code so this is fed let me see where it is fed okay the test thing i haven't removed it yet so inside code inside uh you can see it is not automatically created let me add this thing and let me remove this test thing from here [Music] start commit commit this thing and here all also just [Music] okay it's fine it's taking time right no worries it it won't take much time the backend code is very easy so okay till then what we can do is we can uh simply search for pm2 hyphen f1 version and okay so now pm2 is successfully installed so let me go to the back end quickly leading to back end inside that we can have we have work directory so you need to go to the work directory inside that again you have back-end okay so again it into back-end again we will have back-end code you need to back-end inside that will have this app.js what we can do is we can uh start globally with using sudo command we'll use sudo pm2 dot app.js but before that let me also choose the name as well if possible [Music] i hope it should work okay it's working so now this packet i need to restart every time in here as well in back-end code as well you can see this is successfully done okay two minutes before so i need to go here and inside that i just need to hit this command restart command so we need to restart every time we deploy something so okay here after that i need to run something inside that i'll simply write sudo pm2 restart back end i hope it should work let me check this thing before commenting okay if i hit this thing so yeah it's working fine oh let's save this thing okay uh in front a if everything is all right okay so you can see there should be let me check in content we know the path now okay content you see there is a build folder so once we uh it is automatically created okay so what we can do is uh we just need to go to build folder inside that we need to check this index.html so we need a ewt i need this path which is very essential for me to tell nginx that you need to change the path of your route okay so utc slash nginx okay oh let's see there is sides available right available inside that sudo nano and inside that default is there okay default uh so here we need to add a path so this is my route okay so here i need to change the path so let me remove this quickly instead of that we got this path of react folder to control x but before that we also need to put something so port or we can say route part two this thing so there is a simple code because uh the back-end code is running on localhost 3000 so we just need to grab this thing okay to change my location so here like i am going to pass the code okay so whatever the code that will get from locals colon 3000 that will put into slash api so [Music] here like this [Music] this is it control x yes enter do now sudo system system ctr okay for restart of nginx nginx so it will restart the nginx and i hope uh once we restart the nginx it should return our react app and if i go here slash api i'll i should get the back end code but this is not working although let me check quickly with c url command localhost coolant three one two three okay if i go here so you can see the port logo was cool and this thing is not working so let me go there quickly into backend okay there might be something wrong in the code let me check the back end code quickly so i have not listened three thousand app don't get this to let me check locally also cd into back end okay more app.js require this feeling of requires right let me quickly edit this thing okay now simply commit this thing [Music] i hope now it should work now let me take pull in front end as well so we can test it cool so see guys we have uh we got both the things okay let me go to the back end again and let me start node app dot js so yeah this is working so now what i'll do is i'll simply make changes here okay let me wait for this thing to build so it's it's done i guess so if i refresh the page you can see hello from backend we got here and here we are getting hello front end now if i try to change something here hello back end long mahesh let's say ctrl s in app.js let's say hello mahesh again and we'll add this thing commit fnm [Music] message updated okay and git push [Music] so similarly inside front end what we can do is we can add commit and we can push so sorry now if i refresh this thing you can see both the builds are automatically started okay this one and this one so if i go here if i see uh once this is the build is success after that you can it will automatically reflect the changes so this is the process of creating ci cd pipeline okay this is the complete process i told you guys the back end code is very easy so it was quick and you can see here as well okay all the things so let me check if the back-end code is loaded then you can see hello mahesh sorry you can see hello mahesh the changes uh now you can see the changes you don't need to do anything now i can switch off uh this terminal you don't need to do anything now onwards okay so here as well uh once this is done you can change see the changes here as well so if i go here you will still see not found okay and once the changes are done it will automatically reflect the changes over here okay most of the time i prefer to use alpine containers instead of ubuntu [Music] okay [Music] oh let me try this again okay cool so slash api is working okay build is done so yeah this is it i think it should work now react app oh yeah so yeah this is done guys so thank you very much all of you guys for being with me supporting me all the time it's been pleasure to be here if you want some more videos from my side please let me know inside comment box and please hit the subscribe button if you haven't already thank you so much bye

Channel: Mahesh Kariya

Views: 33,233

Keywords:

Id: JS07npwL3Ps

Length: 28min 5sec (1685 seconds)

Published: Tue Feb 08 2022