Deploy MERN Stack App On AWS EC2 Using GitHub Actions

hey everyone and welcome back to integration ninjas today we have got an exciting tutorial lined up for you we are going to take our M application and deploy it to aws2 using the power of GitHub actions now what makes this tutorial unique is that our react and node projects are in separate repositories but don't worry we are going to seamlessly bring them together create Docker images for both and deploy them to AWS ec2 instance plus we will be using mongodb Atlas as our Cloud database adding an extra layer of complexity to our deployment but why GitHub actions you ask well GitHub actions provides an excellent platform for automating your workflows directly within your repository it allows you to build test and deploy your code without leaving the familiar GitHub environment so in this video we will walk through setting up GitHub actions workflow for both our react and note projects creating Docker images and finally orchestrating the deployment process to our aw2 instance but before we dive in make sure to hit that subscribe button and ring the notification Bell so you never miss out to on our Tech tutorials all right let's get started so what we are going to do is we are having two different projects we will run two separate uh pipelines here first we will deploy our node application we'll start the server and then first we start our server then what we are going to do is we are going to update that uh E2 public IP to our react application as node environment Ro the base URL so we are going to deploy that so that complete process will take a lot of time so let's get started what we are going to do is first let's create a AWS instance uh we can create a AWS instance so you can simply log to your AWS AWS account and you can create a launch instance and we are going to select one to1 and yeah we are going to use the free tier account so here let's keep this setting as it is now we are going to select the key pair account you can create a new key pair I have already created one so I'm going to use this so this instance is free tier eligible T3 micro so we are going to use this now we'll leave this configuration as it is and we are going to create this instance okay so the you can see the successfully initiated launch of instance this so it will take couple of minutes to start this server till that time what we can do is we can create our uh we can create our mongodb as well so you can log to Cloud mongodb you can and just simply go to the mongodb mongodb cloud or mongodb Atlas you can search and you have to log into this you have to create an account once you loging into this okay so I will just okay I have already signed up so let me just sign in yeah so I'm going to sign in yeah so we have to create a new project here so let's create a new project so let me just uh create a new project as man deployment okay so I have added this so let me just create this project so project creation is done okay so now we have to create a cluster here so we can create a database here so we are going to use a free tier one that is shared one so for this tutorial purpose okay so let's name this our cluster as da cluster and let's just create it so we can just simply select the username and the password here so after creating this database we have to select this username and password so or the username is mentioned so password I will just hide it and will regenerate a new one so let's generate a new one here and we'll copy this and we'll just create this user so what I have done is I will just store this details here I don't want to share this details so what I will do I'm going to use this credentials in my my GitHub action secrets so let me just update this details I will go to my GitHub actions and the nodejs project and I will go to the secrets and variables and if I select the actions here so here I have this mongodb password so let me just update this password here so this password is a temporary one so you can change it this is the video purpose anyways I'm going to delete this project so you can keep it all right okay so the password has been updated in the secret so this is just for understanding in the real world you won't show this you on screen so this is just a tutorial purpose so I'm showing how you can store it as a secret then we will use it later we can see that all these parts so once that is completed so we'll see like how we can access our Pro this mongodb database as so we are going to change the IP address we will go to the network access and we'll edit this configuration and we'll just allow access from anywhere okay and for this tutorial purpose I will just create a uh collection all so I will show the code as well so wait uh let me just create these things then I will show add my own data so we'll create the database name as integration ninjas and the collection as users I'll just create this all right so everything has been done here so this is completed so we'll so our mongodb database has been set up one part is done that is outside AWS now let's go to the AWS and see yes our instance is running so we'll click on our instance and we'll open it as a uh terminal we can simply click on connect and you can just click on connect here you can connect it via the puty as well or you can SSH it with your key pair but I will just do it from the browser itself okay so what we have to do here is if you see like what we are going to perform is let's see first we need a project here so this is for node and react both we are going to have our project here in from gab actions we will build the docker image of our project and we'll push it to the GitHub actions right on the AWS we will create a runner on AWS machine so we can directly like pull the docker images from the our GitHub actions uh workflow here directly so we are going to use two Runners one we are going to use our own machine on or the GitHub provided one to latest or then we will create a self Hoster Runner that will be on the AWS so we can directly access that okay so for this we need Docker here so on this system currently we don't have Docker if you see search Docker it shows like Docker is not there you need to install it so I have prepared this command so we'll just install Docker here so let me just update this things I will just provide all this command so you can directly install this Docker here in the AWS machine you will not face any trouble at all let's do it one by one now now we'll not go to any other screen we'll just do this process here okay this is completed now we'll going to start the docker with the system CTL command here this is done now we will try to run a simple hello world Docker program so it is not able to find this now it is able to find this so this is completed now we'll see if the docker is there Docker PS no but the permission issue is there so we need to provide access to this part like do Docker demon socket here so what we are going to do is we're going to provide the permission with ch mode command here all these commands I will provide here so we'll just run this things here all right so we can just see the docker PS yes now it is coming and we can see the docker version installed is 245 okay now the docker has been installed now what we what do we need in our this is our nodejs project and this is our react G project so here both places we need to have a runner there now what thing like earlier what we were doing is we were starting the runner and it was keep running and we have we are just running the command now we have to we will what we will do we are going to create same we are going to create two Runners on the same ec2 instance so how will do that how we'll run those simultaneously so we'll start those server like uh GitHub action Runner as a service we'll start them as a service so let's see how we can do so suppose this is our react project here so first let's create a runner for this project all right so we click on the new cell fored Runner here and this is the Mac OS one but we all the system is Linux one so let's do that so we have to create a directory there so let's create a directory there for two of our projects here this is actions Runner so let me just name it as actions Runner react all right now what we are going to do is let's download this binary here get of action binary here in this directory once this is completed we are going to unzip this this is also completed now let's register this as a runner now we have to apply this configuration with this token details so we are going to add this Runner group to the default group and we are going to name this Runner as AWS hyph easy2 that's all and we're just going to skip any additional level so we can see the runner successfully added enter the name of the work folder so that will be the underscore work so that's fine so all this settings has been made now what we are going to do is we are going to run this Runner and see if it is running and it's available there right so we have started this Runner so this is connected to GitHub and let's see the react repository so we click on the runners and we can see it is coming now I have to start this and so for node just also have to create this Runner so it doesn't make any sense like to stop this Runner and start that new one so what I will do is is we are going to install it as a service so it will be keep running in the background so let's run this commands and we'll it will do our work so we currently we can see this will be offline so let's do this okay so this is completed now the command we have to run is the solo SVC Dosh start all right so that's it it it has started our runner yeah we can see this yeah we can see this is ID listening to jobs now we can see this so let's do the same thing for our nodejs runner we are going to register it in the nodejs app repository as well so let me just create this right away for both our projects okay so let me just go back back to the previous directory and we can see what other things are there so this is action Runner react now we are going to create another directory so that will be actions Runner node and we are going to seed into this directory okay so we are going to do the same approach there okay all right so once this is completed let me just do it quickly so this is completed we are going to create the runner and start the configuration process here okay so we are going to the same name here aw2 okay Runner successfully added so let's start and see if it is running or not we can see other then we will start it as as a service okay we go to the runners tab we can see it is coming so let's just cancel this and we'll run the about two commands here again so done now we can see the runner is in idle condition so it will take time yeah it is Idle now so now we have AWS ec2 instance all setup we have mongodb setup correct now what we are going to do let's have a walk through of our code in our nodejs application and the react application so how it looks like so it's just a basic application it will have two features like uh just creating the database creating the users with the name and the email and it will just list up the details so in the node application we don't don't have anything much we have index.js files and we have a couple of apis like add user and the get user so that's it so this is our simple application and what we are going to do is so if you see like this is the our configuration so we have to we are accepting the password here and we have to add this so we need to update this connection string so how to do this now so first we will first we are going to deploy our node J application so let's see how we're going to do that we are going to create Docker image and everything then we will going to deploy this we are going to create two jobs first we'll create Docker file and we'll do that all right so all right so this particular password will be coming from the user like we we are going to set a environment variable or we can suppose you have passed environment variables or some configuration you can store this is in the vault or anywhere but I'm going to store it as environment variable that's why I'm accessing it to the node process okay now I need a connection string this is the older one so I need a new one here so let's go to the D database here overview okay let's click on the databases let's click on connect and let's click on drivers and this particular connection string so this thing we need to update here properly as a connection string here so this is pretty similar actually integration ninjas password we are accepting through this particular process node and we'll just Dev cluster do this all right okay that's it now what we are going to do here is we are going to create a talker file so Docker file for our nodejs application now now our complete focus is on nodejs okay so here what we are going to do is we are going to have a base image here so we are going to select uh node we can say node we can let's see what base images are there node 18 Alpine image uh let's suppose for node 16 as of now okay let's select this node Alpine 3.18 we we are going to use Alpine image here it will load all these available images here so we are going to use node Alpine 3 18 we can use here okay so after this we are going to Define our work directory which will be slash app and what we are going to do we are going to copy the package.json into the destination directory which will which is the current directory the do/ the app directory we are going to copy this package.json to the/ app directory and there we are going to run npm install okay that's it now what we are going to do we are going to copy everything present in this current directory to the destination directory inside the SL app directory here and we are going to expose the port which is 4,000 that we have used we can see here okay that's it now once this is completed we can just run this command here like uh [Music] npm let's see if npm Run start we can run or not in the package yeah we can run we we have given the path here or you can just have node index.js as well so but we have given a path so we can use this npm Run start here that's it this is the docker file now what we have to do is we have to create a do GitHub we are going to write a workflow file okay this is already present here so we have to to create a workflow folder and inside that we are going to create a file cd. yml okay so once that is completed we are going to create a workflow file now let's do one thing let's name our workflow file as cic uh deployed node application okay so where it should be triggered on the push events on the push events of the branches let's see what is the current branches M2 Docker so whenever any push is triggering on this particular Branch then we are going to trigger this particular event this deployment process so here now what we are going to do is we are going to Define two jobs here one is build job and another is uh deploy job so let's do this so in the jobs here first job is build job here which will be running on the one to latest which is giup provided Runner and then here we are going to Define some steps here so steps will be so first of all we are going to check out the source code and we are going to use action SL checkout that we are using oh new version is available so we are going to use this version four here now once this code is check out in our the ubu latest directory then what we are going to do we are going to create a Docker build out of that so first of all we are going to log into dockerhub okay then what we are going to do is we are going to run command for that which is Docker login hyph U so here we need you username and the password here okay so username we can have this from our secrets so which is Secrets dot Docker username Docker password so this secrets is present in my Docker here this is the nodejs application secret variables Docker username and password so we are going to deploy it to the dockerhub we are going to push our images to dockerhub you can just go to the docker Hub and you can create a repository there so I already have you can just create a repository simply here with the name and what we we are going to do we are going to deploy our images here integration n/ nodejs app okay so I have added this username and password in the secrets so let's uh continue okay this is not action this is actions okay so once this login is completed then what we are going to do we are going to build the docker image first will take time then we can do a copy paste in the react one so that's that is fine completely so first is always necessary so what we are going to do we are going to create a build of of our application Docker build hyphen T then integration Ninjas the name of our this uh application let's copy this integration ninjas SL nodeus app and what we we from where we are going to create this build from this current directory okay all right so let's publish this image to dockerhub once the build is completed then we can just simply do Docker push this particular our image Docker integration ninjas slash this particular nodejs application and with the tag latest so always we are going to publish our latest image only so that's it this will publish our image to the docker Hub now what we are going to do is is we are going to publish our image then we are going to create a runner on the awcc 2 that we have already completed so now that's time to deploy our app there so we are going to have a publish image there publish job you can just name it as deployer that shoots better instead of publish all right so how it will be triggered so it needs first we need build job to be completed then only we are going to continue with this deploy job okay and we are going to run running on the self fostered Runner that we have created we have named it as aw2 but we can can access this via selfhosted as well because if you see the runner label that is also selfhosted so also you can use it Linux and x64 so I'm going to use selfhosted so that is completely fine that's on up and you like how you want to consume this all right so once this is completed what we are going to do on the aws2 that's a tricky thing we are going to pull image from the docker hub okay how we'll do that so we have command Docker pull there right so let's execute that in the AWS ec2 instance so in the now we are in the aws2 we are going to pull the docker image which is this one Docker pull integration ninj is the latest image we have to pull right okay so once this image is pull then what we are going to do we are going to execute this right we have to run this image right uh run Docker container once this image is created we are going to start it as a container let's do this we have to run Docker run hyph D and hyph P we are going to use 4,000 Port right so for 4,000 we are going to do so okay okay so 4,000 we are going to expose from our aw2 instance so we have forgot to do that we have to go to our awcc to instance and we need to go to the security tab here we need to click on security groups okay we need to edit the inbound rules here so let's do that otherwise we will forget that and we'll confuse Okay so custom TCP is fine and we are going to allow access from anywhere from our Port the port range will be the 4,000 and same we are going to do for our react application which will be on the 3,000 Port okay that is completed so let's save this changes okay so this is completed here now let's go back to the code in the Run command let's name our react container this node just container as uh node just hyph app hyphen container that shows better and now let's do one thing that we have we want this password details as a environment variable so how we are going to do so our application will be running inside a Docker container in our Linux machine that is aw cc2 now we are going to pass the environment variable to our Docker container so we can pass the environment variables like this hyph e and simply what is the name of our environment variable this is password all right so password equals to inside quarts we can mention this dollar and here inside secrets. password okay and yeah so we are going to pass this environment variable for for this our image here so while running this image we need to set this environment variable or else you need to hardcode the things so that I don't like so this is like one time thing that you can set up in your project you need to set the database credentials and you can pass always from the environment variables so that is completely fine okay so this is completed our AWS deployment of our nodejs application so let's try to deploy this here get status all this file are there get and Dot and let's Commit This deploy to ec2 and let's post this changes and we'll see how it triggers let's go to our actions tab and see if the action is triggered or not yes it is triggered and we can see two jobs has been created one is build and one is deploy let's go to the build job here so the login is successfully completed and the build Docker image is in progress here we can see the image build is in progress this is also completed now the publish image to Docker hub okay so this is also completed we can verify it here so this is like 5 days ago we'll refresh it and see okay so this is just updated less than a minute ago so this looks perfectly fine here our code is seems to be working here now we go to the deployer job in the aw2 okay so everything is working here perfectly let's how to verify this like our application is deployed successfully or not so we are going to go to our ec2 instance running instances and we'll simply click on this and we can access our node application from this public IP for address here and with the 4,000 Port yes our application is working properly like uh hello world from Express with this 4,000 code so our nodejs application is deployment is completed now what we have to do is now we'll deploy this application on the AWS like this ac2 we have done now we are going to deploy our react application so this is the main thing now so this is completed okay react now we are done so in the reactjs in the reactjs also we'll see this so in the react GS we have this uh suppose like uh you have to set the environment like based on the requirement in the local we can use EnV file but to configure on the AWS ec2 machine we need to set the EnV files and everything that I don't want to do I will simply set the environment variables I will add some arguments like uh while running the docker command I will add some details there and we'll pass the AR arguments to the docker file and we'll accept those and we'll deploy it it will pick up all these details and suppose URL and everything that we can configure in the GitHub secrets so it's all onetime activity we are going to do so that can be updated later as per requirement okay so we can see like this we are accessing directly from the process. EnV okay now what we are going to do is here is we are going to create a Docker file here sorry not inside this SRC one okay so Docker file is completed we have created this Docker file here so in the docker file we are going to use the B image here the same base image we can use node Alpine one and 3. we are going to use 3.18 uh we can name it as build now I need here like couple of things here so simply like first we can just mention like build app and ser with NG INX so this thing things we are going to do here so how we can do this simply like we we can Define our work directory that is simply SL app any anything we can Define but I will just keep it as/ app and we are going to copy the package.json to the this directory all right and we are going to run npm install here and we are going to copy everything from the source directory the destination directory okay this is pretty simple n PPM run build we can run to build the application here in this thing so once this is completed we are going to serve this on the ngx okay let's do this from here we need the Alpine image of njx as well so we need a Alpine image of not here like this I think from base image NG INX [Music] colon NG GX let's see the Alpine images of ngx okay there are many images here so we can use any one here ngx we are going to use two not 2 1.23 says Alpine okay now we are so nnx is like uh it SE the HTML content here from this particular directory always from the user slash here/ nx/ HTML it always try to C content from this particular directory so first we are going to remove everything from this particular directory in the NX if everything is there RM RF star we can do now what we are going to do we are going to copy this or existing build to this ngx directory so how we are going to do this is copy of from uh stage we can see the build from our build directory from our the build uh uh from our build process to destination directory which is currently in the SLA slash build dot okay so yes this is the current one we came to our build directory and inside build we are going to the app and the build directory so we can see inside our SL app we we have this build directory present and we are going to serve this HTML contents as a nnx and we are going to copy this to the this particular directory HTML directory okay that's it now here we are going to expose the port which is St 0 because because nnx always serves the content on the at Port okay now we are going to define the entry point which like ngx hyph G demon off so that we can do here hyph G demon off okay so this is it now actually we need the environment variable so okay let's do one by one like we are going to create the workflows here and we'll explain you that time so here I'm going to create one file here so we can just copy simply from this position actually we don't need to waste the time properly let's see which branch we are on currently get Branch man2 Docker okay the same Branch so here what we are going to do is we are going to deploy our react application we are going to checking out the source code we are going to log to Docker Hub now we want to build the docker image here so simply this will be created as a Docker build Hy T let's see our react image name is okay this is reactjs app so we'll just use this reactjs app Here reactjs app all right now and we are going to publish this so let's just uh update this properly here anywhere so we don't need to change anything reactj app all right now here I need to set the like whatever the URL has created right in our app.js what we are going to do is like if we are we have to select the base URL if we are in the development environment we can create a EnV file and we can access this variables but in the production envirment how we are going to do this right so we are going to store it on the GitHub secrets and we are going to pass this as the build arguments to the build command in the docker file okay while running the docker build we are going to pass the build arguments here like this so simply let's do this here hyph hyphen [Music] build Arc so here the build Arc will be inside our react type node en EnV so first we are going to set this right so this is like pretty simple you want to store it in the secrets or not I'm not going to store it as secret so this is the production I'm going to set all right and same thing here I'm going to pass another build argument which is which is okay react app server based URL okay so this is react app server based URL because this is being used in the app.js if the base URL is the development then we are going to use this local URL otherwise we are going to use the server URL so we need to Define This Server URL okay so the server URL we have defined here is from the uh it should be from the secrets or directly okay so let's do this we'll hit and try this if it works otherwise we'll just remove this double CS here okay not like this react Ty server based URL yeah correct so this looks good now that's it now we can just deploy it and while running this uh reactj app col latest the image has been post here so while deploying we can need or build job here and we need to be running on the self hosted Runner there that is we have registered already on the aw2 machine there we are going to push the image from the docker Hub or all right okay we have forgot actually in this nodejs application also like if we want to deploy it next time so we can just uh do one thing actually that that is that will be better actually so we can just delete the old container if we want to like redeploy or old the application otherwise we will just uh get error that container already exist something like that so we can just run this command here uh Docker RM Hy f nodejs app container all right so this is it like we'll just commit this changes as well so it will be useful for you tester redeployment so we can just copy this as well there so we'll observe that as well like if the action is successfully deployed to or not we'll just monitor this till that time we are going to on the react application so this is our react application here also We'll add this if the container already exist we just going to delete that and deploy okay so our reactjs app container this is our reactjs app container okay here we need few things let's see while running the application here we are going to expose the port of 0 from the docker container but from the AWS we have exposed 3,000 okay so we are using the 3,000 colon 80 Port from the uh Docker container that's it and we don't need this uh Secret details actually so we are going to remove this here all right and we need this only reactjs app that's it so we are going to just commit all these [Applause] details let see that deployment is successful or not okay this test deployment is successful we have GitHub SL Okay so [Music] let's see what files we have get commit fun gor deployment on ec2 so same process we are doing here that we have done on the AWS ac2 for nodejs deployment let's go to the react GS app and see if it is working okay let's I want to just cancel this actually we have not set the environment variables here in the secrets so let me just set this right otherwise it can fail so let's do this we went to the uh action variables here in the server URL we have gone here and we'll pass this details here like this if you can see here like what we have passed in the EnV port with Port details we are going to pass the server URL of the backend application with the port okay so I have updated the secrets here now we can do this so let's go to our reactjs application and we'll just re-trigger that actually we can click on this and we can just rerun the failed jobs so here also there are two jobs build and deploy let's see if the build is and deploy both are successful or not okay log to dockerhub is successful and build is in progress let's wait because this will install the dependencies there so this is in progress okay so publish image is in progress now so the build Docker image is successful and the publish is also completed let's see in the docker Hub it's better to validate actually the yeah this is updated like less than a minute ago the image is latest and it is just updated right now and the deploy is also completed now like actually we want to see like if our all changes are working or not so it's the same public IP of the same AWS ac2 instance but the port is 3,000 so we'll see yes we can see our application here is in progress but we see some error actually I think the AWS details has not been passed correctly the database details has not been passed correctly so we can see like react app no dnv okay we have made a mistake actually if we go to our Docker file we have passed the arguments here but we need to accept this in the docker file that we have not done actually so let's do that that is the mistake from our end we I I was thinking to like first add this in the cicdl then we can add but I forgot to add this now what we can do is like uh uh declare build time environment variables okay so we can just simply AR accept the argument which is reactor okay let's go to this what arguments we have passed is uh react app no dnv okay this is the our argument and there is one one more which is react app server base base URL all right so these are our arguments we have defined this now what we are going to do is set the set default values for environment variables okay so here we can just set a environment variable here in the docker container same that we have got here react app environment variables and the value will be the coming from this particular argument all right same thing we are going to do here for Server base URL that's it now it should work actually let's see if it is working or not DOT and we'll just uh with the same commit message and push this changes and we need to observe the action is successful or not here again okay so the build and deploy job two jobs so let's see how much time it actually takes for these two things if we see like it takes so it takes very less time actually let's go to the actions and just observe this it took 1 minute 16 seconds so this is pretty fast actually you can see like how fast you can deploy all your changes to the AWS with the seamless process of GitHub actions so the docker build is in progress again I have printed this things actually here to debug this actually in the console log that if this environment variables has been pass properly or not so we can validate it okay so the build is the docker build is completed now let's see if the deploy is completed or not let's see wait for this you see like how this two Runners are working simultaneously without stopping each other so this like kab action like self Hoster rner as a service now let's see if it is working yeah this picked up all these details now this is our react application how beautiful it is let's see okay let's add some name obviously our name integration ninjas integration ninjas at the gmail.com I'm going to add this here user created successfully wow I want to see this yes this is working now let's see another name uh suchin suchin gmail.com yeah this is coming yeah two records it's very good yeah our M Stack application deployment is successful and you can see like with very ease and the seamless process of this GitHub actions and with the powerful Docker tools that's it guys you have done it we have successfully deployed a mon stack application to aw2 using GitHub acction I hope you found this tutorial helpful and that it simplifies your deployment process if you encountered any challenges along the way all the way feel free to drop a comment down below and I will do my best to assist you also don't forget to give the video a thumbs up if you learned something new today now if you want more content like this make sure to check out our other tutorials on ination ninjas subscribe to stay updated with the latest tech guides tips and tricks and as always share this video with your fellow developers and who find who might find it useful you don't know like it's very useful video thank you so much for watching and I will see you in the next video Happy coding thank you

Channel: Integration Ninjas

Views: 3,879

Keywords: github actions cicd, Where can I host my MERN app, full stack development, reactjs tutorial, nodejs tutorial, mongodb tutorial, aws devops, Proper way to deploy MERN app, How to deploy MERN application on Vercel, How to Deploy MERN Full-Stack to Render, Deploying a MERN Stack Application to Render, How to Deploy MERN Stack over Kubernetes, How to Become a Full Stack Developer, Full Stack Web Developement, MERN Stack Explained, How To Use MERN Stack, Mean Stack Tutorial, clusters

Id: MmidULYvjYE

Length: 56min 20sec (3380 seconds)

Published: Sat Jan 27 2024