Github action CI/CD pipeline for deploying React website to Azure App Service

Hello friends I am Muk Singh In This demo we are going to learn how to deploy a react application to aure your app service using GitHub cicd pipeline so before jumping into demo please do subscribe to my channel so that you don't miss any useful content this is the GitHub repository uh with uh react application which we want to deploy uh deploy using GitHub access and cicd pipelines so for cicd pipeline first thing uh what we need is um we need credential uh to connect our pipeline to our Azure resources so for that purpose what I'm uh what we are doing is uh uh we need to get these service principles so I'll be using service principle there are other ways as well like publish profile and open ID connect uh but for this demo I'll be using service principal so for service principle you can uh uh use this command this is uh as your CLI command uh to uh uh to create and uh uh get those service principle but for me I I had already created them so what we are going to do is uh we'll go to GitHub repo and uh in this repo we have this settings even in settings already I have created but I'll show how you can do it so in settings we have this code security and Analysis deploy keys and then secrets and variables so we have to work with secrets and variables in secrets and variables we have this actions so in this action ction we have repository secrets so in your case if you haven't created you will click on new repository secrets and it will ask for a secret name and the secret so I had already created and uh it I I gave the name as your credentials and if I go and click on edit I cannot see them but I can update so I'll just copy my secrets and I'll paste it here and update secret so it is updated okay so one part is completed like uh the secret is uh is in place and now when we'll create the cicd pipeline it will be able to access the azzure resources so the next step is to create Azure resources so for that purpose uh we we have to uh go to Azure portal so here is the portal already I'm here so app service so we'll create an app service where we are going to uh deploy our uh a react application so select uh resource scrip then uh I'll give name Tech word it's available and runtime is stack I'll take node 18 LTS operating system Windows and uh here I'll take basic one you can uh choose whatever is based on your requirement then uh review and create and hit create so it will take some time to uh create the resource so meanwhile uh we work on uh creating the pipeline so we'll go to GitHub again and this time actions already I had uh like created the pipeline earlier and it had runs few field few few pass so we'll create new workflow so here uh we get lot of uh uh predefined templates for deploying we can uh choose anything from this but what we'll do is set up a workflow yourself so it will uh give this empty uh page for editing so to make things quick I had already code for this pipeline so I'll just uh copy and paste it here and I'll explain uh what it does so the first line is uh name name of the pipeline so I'll just name is uh Tech word Ci or maybe I'll give CD as well C CD and then on so on push so anytime we push any changes to this uh repository it should trigger this uh cicd pipeline to deploy and next part is EnV EnV is uh nothing but environment variables what we need so so these are very important if we have to use something multiple times uh say uh web app if we need it multiple times we can declare it here and uh with one uh one change or anytime we want to update uh with changing one place it will get change otherwise we have to search uh those things everywhere and uh then make so I had created as your web app name Tech word then Azure web app package path so this is uh uh the root path uh which I have chosen uh just dot so because our application is uh at the root path and next is uh node version 18x if you remember when we were creating a web uh web app in uh Azure we had chose run time as node 18 LTS so this is so next part comes the job where the actual steps for uh deploying uh building and deploying the application happen so in jobs the first one is build and deploy so it's basically the name so run on Ubuntu latest so what it will do is it will take our runner an agent uh it will be a machine you can say a virtual machine uh and it will run these steps in that uh a virtual machine so it's an agent basically it's called so open to latest then steps name check out GitHub action okay so it will use and these are uh the methods how it will going to perform so action check out Main and after that uh use uh uh next step is uh azured login so we'll use azured login and we'll provide the secrets if you remember uh in settings we have uh uh created the secrets with Azure credentials so with that then setup node with will set up node with given version version 18 so node is set and after that we'll run this npm install build and test so run npm install npm run build the build will be created and npm run test if present so if uh in our case there is no uh tests are there but I have just kept it as is so if it is present it will run otherwise it will ignore it okay so this part is done deploy web app using Azure credentials so here use this web app deploy with app name app name here we have given Tech word and if uh we see package where the package will be so uh if you have uh created this uh react app and if we run this npm run build so all these build build files are are kept over uh build folder so it will be root and inside root build folder Weare and after that Azure log out and everything so I hope by this time our uh yeah resource is created so if we go to Resource and if we go to this URL which it had given so it will be having uh yeah it it has this uh default application so now as uh we have the code for our pipeline so what we'll do is we just commit changes so we commit the changes and uh changes are done so here if you see uh it created the workflow Tech word cicd and uh here it is uh build and deploy it is running so it it will just take uh uh I think very little while to get complete it's uh really quick and it's the best way for deploying any application because with this you automate thing from from next time you have to just push the changes and uh the pipeline will take care of uh building and deploying those changes to your asure resources uh your asure web app so here it is running this Azure web app deploy so as you can see uh it's completed everything is deployed so let's go back to uh the URL where we were seeing the default uh uh application and just uh try to refresh it and yeah here you can see a welcome to Tech word with Mukesh and uh now say if we want to make any changes on this so for uh deploying those changes what we'll do is uh we just go to a GitHub again and uh let's make some uh changes to our code and say we come to this uh source and uh abjs and uh here uh let's not this uh here uh small okay I haven't clicked the edit file so edit file and uh here say h 2 edited by m two and let's commit the change I had committed the change and if we come back to actions here already it started uh the pipeline as soon as the commit is uh done and uh here same process it is doing it is running as your login and everything it will uh come down and and uh it will deploy all those changes and uh once it is deployed we will check uh the changes are reflected in our uh application or not so as you can see uh the pipeline uh uh build and deploy is completed so let's go back to uh again to here and just uh try refresh and now you can see edited by Muk so uh that's it for this demo uh please do like share and subscribe and please uh add your valuable comments uh what you likeed and what you don't and any uh future changes you need or any specific topic you want me to make video on please do that and please do subscribe thank you

Channel: TechWorld with Mukesh

Views: 153

Keywords: React, ReactJS, Github, Github Action, CI/CD, Pipeline, Azure, App Service, Website, Deploy

Id: 5jkXR6pa1OA

Length: 14min 26sec (866 seconds)

Published: Sat Mar 09 2024