AZURE WEB APP WITH WEBJOBS DEVOPS | Setting up a Build Deploy Pipeline | Azure DevOps

web jobs is a feature of azure app servers that enables you to run a program or a script in the same instance as that of a web app a api app or a mobile app there is no additional cost to running web jobs now in this channel i had previously shown you a video on how to get started with web jobs and set up a build deploy pipeline using azure devops in that i had just shown how to deploy a web job by itself since then i have been getting a lot of questions around how to deploy a web app along with a web job into an azure web app instance so in this video we will look exactly that how to go about setting up your build and deploy pipeline whether to use one deploy pipeline or multiple deploy pipelines to deploy into the same web app let's explore some of these questions while we set up an web app and a web job to be deployed into a single web app instance hello everyone my name is rahul and welcome back to this youtube channel if you're new here i make videos around dotnet cloud and devops so make sure to hit the subscribe button if you want to be notified every time a video comes out and also help me grow this channel so without much delay let's head off straight into code and start setting up the web app along with a web job application here i have the repository of the web job example that i had used in my previous web jobs video now if you want to walk through the exact steps on setting up a new web job and the deploy pipeline i highly recommend checking that other video i will be using this repository as the baseline code to set up the example for our new web job along with the web app example so i have copied this in my local machine into a different folder and named it web app with web job example so let's open that in visual studio and start adding projects to this as you can see the project still remains the same which is the web job example dot web job it has a functions.cs and a program.css it also takes in an app settings to quickly recap the functionality of this web job let's open up functions.cs it listens to messages that's dropped inside a queue which is using the queue trigger and then it sends that using the queue client into a queue named processed so all it does is listens to a message on one queue and drops that into another queue it also appends that with the message processed before dropping it now let's set up this project with the react single page application so we can deploy that along with this web job so we will have a web app and also a web job to add a single page application let's right click on the solution and choose add and select the new project option let's select the asp.net core web application and click next let's name this as web app example and click create this prompts to select the template for this particular web app so let's select react.js which is the react single page application template now i have talked about it in detail how the template works and how to set that as a build deploy pipeline in a separate video as well you can check that out if you are interested to understand the inner workings of this template but for now let's select this and click create we have the new web app created so if we build this and run we can see the default template to make sure it's working so let's right click and set this up as a startup project and run this application now as expected it automatically runs the npm install which is baked into the cs proj file in this react single page application template the other video works in detail on how this all works together once the npm install is done it will launch the application by itself the npm installed and the build is successful and it has automatically launched this application here we have the default react single page application template launched automatically so we have the home the counter and the fetch data pages so this hits a web api and gets back some data in here so this is all default code that's provided by the template since we have got this working let's commit all these changes and push it up into a new repository let's switch back to azure devops and let's go to the repository and create a new repository under here the existing code is under the repository web jobs so let's create a new repository and call this web app with web jobs let's ignore adding a readme and also not have any git ignore files let's click create now all these repositories are publicly available and the link will be there in the video below so if you want to check out these repositories and associated pipelines you can always use the link and go through it let's switch to the command line to make the git commit and push up into this repository now if you use the visual studio gui or any other gui tool to interact with git you can do that as well so let's open up the terminal to make sure we are in the correct folder and list the files that have changed so let's do a git status and we can see the new project being added so let's add in all the files now this has staged all the web app project that we have just added let's commit the changes to this repository so let's say git commit minus m and say added web app react spa that's single page application since i had copied over the repository this already has the remote set up to the old path so let's remove that so let's say git remote remove and specify origin so that is going to remove that existing path it has so if you check out minus v again those path is removed now let's make sure to add a new remote so let's copy this and head back to the console and paste that inside here so this sets up the remote and then pushes up all the code to it we have successfully pushed up the changes so let's go back to azure devops and refresh this page and we have all the code that we have just committed in here so let's start setting up the build deploy pipeline for this this repository already has the azure pipelines dot yml which is what i had used to set up the deploy pipeline for the web job we will use this as a baseline to build the web app as well now if you're not sure how i had set up this make sure to watch the web jobs video which will be linked in the description before continuing so now that we have all the changes in here let's go to the pipelines under pipelines let's create a new build pipeline so let's click the new pipeline button here and select the appropriate repository we have the code inside the azure repose so let's select that choose the appropriate repository so in this case it is web app with web jobs since it already has a pipeline inside that with the name azure pipelines.yml it has automatically detected that file to quickly recap here we have a trigger on the master it runs on the windows vm it uses a.net core cli to set up a build and then it publishes these projects into a specific directory note for web jobs it's important that this project path is exactly the same now depending on the trigger of the job these folders also changes but we'll need to make sure we keep this folder structure if it has to run as a web job once we have this published we archive it and publish the artifacts which will then be used in the release pipeline now let's modify this and add a few tasks to build the web app as well that belongs in this repository before we do that let's answer one question on whether to have a single pipeline or multiple pipeline to do this my personal preference is to keep the things that are released together in the same pipeline so if the web app and the web job changes for the same reasons then i would keep this in a single pipeline and deploy it into a single web app now if these are changing for different reasons let's say the web app changes are not related to the web job at all then i might keep this separate but then in that cases i would also deploy these into separate web app instances now this is particularly because i don't prefer installing selectively into folders inside an azure web app now keeping it separate makes it easy and also deployment is also easier now with azure the pricing is at the app service plan so you can have any number of web apps inside that particular plan so you could still create a single app service plan which runs both the web jobs and web apps as separate applications now you need to pick and choose based on your needs and how your project is working now in this case i will build and package them into a single folder so that we can deploy it inside one pipeline if your need is to deploy them separately watch my two separate videos on that so let's get going and start building the web app project as well since this is already building out inside the build binaries directory let's build and output the web app also into the same directory now for the web application it needs to be at the root of the iis so if you look at here we are packaging the publish output folder as the zip package that needs to be published so let's publish out the web application also into that directory now the web job will already be there under the app data underscore jobs continuous and youtube web job on this particular step so let's add a new task right below the publish web job and create a dotnet core cli task again so let's click show assistant search for the dotnet core cli task and then choose the publish task again since we are publishing a web app let's leave this publish web projects ticked now as for arguments let's copy this output directory up until the publish output folder so let's copy that and pass that as an argument so this will output all the published artifacts into this particular directory let's not zip this explicitly because we are doing that in a later step let's also not add the project's name so let's untick that as well now the advanced shows the current working directory which we can leave blank so once this is done make sure the cursor is in the appropriate position before you click add so let's click add and that adds the task inside of here now earlier with the web job task since there was only one project i had used the star.cs project so let's change this and make it more specific to select the appropriate project file so let's click settings on the top of here to select that inside this assistant and we can modify the project name you can also do that in line in the text editor here let's go back to our project let's copy this project name which is web job example dot web job in this particular case let's switch back to the pipeline file and paste this instead of the star here let's make sure to click add so that these changes are updated in this yml file as well now we have one step publishing the artifacts for the web job inside the publish output folder under the correct path for a web job and we have another step which publishes the web app under the publish output folder as well then we archive this and create a publish artifact that's all the changes that we need to combine both the web app and the web job into a single pipeline so let's see if this is all working fine so let's click save and run let's commit directly to the master branch in this case alternatively you can create a new branch and also raise a pull request now if you are not familiar with the pull request workflow you can check out my video linked here which goes through the entire end-to-end process of creating and raising a pull request for now let's click save and run this has triggered the build and it has started a new job to get the details we can click in here and see all the tasks on the left this is currently waiting for an agent to be associated for the build to start once started you can see all the tasks up on the left so we have three.net core cli tasks one that builds the other one that publishes the web job and the one that we just added to publish the web app it then archives and publishes the artifacts let's wait for this to complete to check on the artifact that is published the build is successfully completed and as you can see we have published one artifact let's navigate back to the job summary and we can see one artifact that is published here let's click the one published and it shows up the default zip folder inside the drop folder so let's download this to see how this file looks so let's open this zip folder as you can expect we have the web app in the root folder with the app settings and the associated dlls we also have the client app which is the react single page application now if we navigate back it also has the app data folder which has the jobs under the continuous folder we have the youtube web job the first time you're setting up a pipeline it's always good to download the zip file and make sure it has the files appropriately so since this all looks good let's navigate back and create a release pipeline for this project in azure devops let's go to releases and start creating a new release for this particular pipeline so we can create a new pipeline so let's click new release pipeline make sure to select the azure app service because that's where we are going to deploy to so we can use that template so let's click apply this asks for a stage so let's say this is the development stage so let's call this dev and close this before we forget let's also give this a name let's name this web app with web job to set up the release pipeline we need to trigger this based on an artifact so in this case this will be the build triggered artifact the build is one we had just set up so let's select for that and search for the web app with web jobs build this already shows the latest build version so let's click add now this has associated this particular release pipeline with that build pipeline if we want to automatically run this pipeline anytime a build is created let's use this icon over here and make sure to select the continuous deployment trigger so let's turn this on we can also set up branch filters if that's required let's close this let's now set up the dev stage so let's click on one job and the task and select the appropriate web app to deploy this into now i don't have any web application created so we'll have to navigate into the azure portal to do that the other way to do this is to automatically use infrastructure as code for example we can use arm templates to create automatically the resources that we need i have another video which walks through this entire step and the whole arm template creation process check that if you want to set this up automatically for now i will just use manual way and create the web app the first time i want to deploy into it so let's navigate over to the azure portal go to resource groups and create a new resource group so let's click create let's call this web app with web job dash youtube to keep this unique let's select a region in this case let's choose australia because i am there and let's click review and create this will create a new resource group under my subscription let's navigate to this resource group and add an azure web app so let's click add and select the web app under here you can also search for the service if you cannot find directly there so this is now belonging to this resource group so let's create the web app name so let's say web app with web job dev because this is the dev instance this name needs to be unique inside the whole azure because we are getting a domain that's associated with azurewebsites.net so let's keep this code and select the runtime stack as dotnet core because that is what i have let's keep the region again as australia let's create a new service plan in this case so i have the free service plan created automatically if you want to use a different size and plan you can also click the create new and select the appropriate service plan for now let's keep it in the free tier and click review and create since this all looks good let's click create to create the new azure web app the resource is successfully created so let's navigate to the newly create resource so this is an azure web app so let's start deploying into this so navigating back to our azure devops pipeline we should be able to select the app service name now this is because i have my azure devops connected to that as your subscription now if you're not sure how to do that you can use service connections and i walk you through that in another video which will be linked here and in the description below now since i have this setup let's make sure to select the appropriate subscription in this case it's the visual studio professional and then let's choose the associated app service from that this shows up the web app with web job dev that we just created so let's select that let's go into the task that deploys the azure app service it has all the correct parameters set up so this is a web app on windows and it also has the correct app service name now let's choose the package or folder since this has a dot zip folder that we just saw earlier we can use that to deploy the web job in our example as we can see here if we open up the web job dot example and open the app settings depends on an azure web storage connection string now we need to provide this as well for this web job to work fine so let's navigate back to the azure portal and create a new resource that is a storage under that particular resource group so if we go back to the resource groups let's select the appropriate resource group let's use the add button and select the storage account so we can click create from here you can also search for storage and select that if it doesn't appear in this first list so let's click create let's make sure to place this in the correct resource group in my case it's the web app with web job youtube and give an appropriate storage account name let's name this web app with web job dev so this is the storage account for the developer instance let's make sure to select the appropriate region so let's search for australia and select the australia east you can select the appropriate redundancy that's required for you in my case let's leave it to locally redundant storage and click review and create this has successfully created the storage account so let's go to the resource and copy in the connection string to this storage account so i can go under access keys and copy this connection stream in here so let's say show keys and copy this from here let's navigate back to our azure devops and we can set up this connection string inside variables if you're new to variables check out my video where i walk you through the entire process of variables and how it works so let's click add and specify the value as the connection string that we just copied for the name let's navigate back to the source code and copy this azure web job storage and let's paste that in here since this is a secret let's click the lock button and this will make it as non-readable forever this is for the dev stage so let's select the appropriate stage in here now navigating back to the tasks we need to specify to this azure app service to replace the files using the variables from here now under the file transforms and variable substitution options we can specify the web.config or the json file that we need to transform in our case the file that needs to be transformed is the appsettings.json since we had seen this file is under youtube web job and appsettings.json so let's copy this youtube web job path navigate back and specify star star which selects any directory and then let's specify one more star which selects any subdirectories and say it is under the youtube web job folder with the name appsettings.json so let's select that as well once this is set up this will be automatically replacing this particular file with variables that we have defined it also picks up the variables based on the stage that this is running on so let's click save so we have created a new release pipeline so let's click create a release and click create so this has created a new release let's navigate to that to see how it progresses this is currently queued for an agent so if we select in here we can see the details of the steps that's inside that if we click the logs we can see all the log statements and the associated tasks that's running as part of this release pipeline in the steps in the logs we can see here that substituting value of key azure web job storage and this has successfully done so make sure to check the logs to see if the variable transformations is happening correctly now this particular job is completed and it's all succeeded so if we navigate back to the web app with the web job we should now be able to run this application so let's go back to the resource group and go to the web application that we have created now under the overview we can navigate to this url so let's click on that which navigates to that particular web app instance we can see the react single page application template that we had set up as part of this project now if we navigate to counter and fetch data we can see the appropriate data being showed up now let's navigate back and make sure the web job is also successfully installed so under the menu here let's scroll down and select the web jobs in here this shows the web jobs that's running as part of this web application now in here we have the youtube web job that's running as part of it let's select that and select the logs for that youtube web job now let's navigate into the azure portal drop in a message manually into the queue and then see if the web job is also working as expected to do that let's navigate back to the resource group so let's go into overview select the resource group under here go to the storage account and start creating a queue inside of this so here we don't have any queues created so under the queues i can create two new queues so if you remember from earlier in the functions.cs we saw that it requires a processed queue and a queue with the name q so let's create these two first so let's click the plus button here and create a new queue let's also create one for processed and click ok so we have the two queues created so let's go into the queue which is where the web job is listening to and drop a new message inside there to do that let's create a add message and specify hello from web job and let's click ok this drops the message inside here and the web job should automatically pick this up so let's refresh this and it's already gone because the web job has processed this if we navigate back into the queues and go into the process we can see that message dropped inside here which says processed hello from web job which is exactly what the web job is set up to do inside the functions.cs class if we navigate back to the web jobs dashboard we can see the status of the web job clicking the toggle output we can see the logs from this particular web job here you can see that it has already picked up the message hello from web job which is why it was all functioning as expected navigating back to the azure devops we have a successful release pipeline that is created for the web app with web job now in this particular case we only have one stage that is created which is the dev but you can easily replicate this into other stages like test production etc all you need to do is edit this particular template and create a new stage under this particular release pipeline you can do that from here or also clone this existing one and start modifying the values for that so let's say if we click clone we can use this button to disassociated this with this particular task and select this is a manual trigger in this case what happens is you can deploy first into dev automatically and then manually promote it into your other environments like once the first initial development testing is done so you can name this as test or production depending on the pipeline that you follow you can also modify the tasks under this to choose the appropriate web jobs so in this case it would be web app with web job test when you do that also make sure to update the variables which is already showing a red icon here so it will have its own storage account and the connection string needs to be updated here i do cover these in the other videos that was linked for web jobs and the react single page application template so to keep this video short let's just leave it with the dev stage i will save and also link this pipeline inside the commons so if you want to check and refer feel free to do that i hope this helps you to understand how to set up a build pipeline for a web app along with a web job now again going back to the question of having multiple pipelines like i said i usually prefer to keep it separate if they are separate so if they change for the different reasons let's have different web apps and deploy them separately rather than picking and modifying folders inside a specific web application if you have any questions or feedback feel free to drop in the comments below if you like this video please make sure to hit the like button also don't forget to subscribe if you want to be notified of future similar videos thank you and see you soon

Channel: Rahul Nath

Views: 1,738

Rating: 4.9047618 out of 5

Keywords: azure web jobs c#, azure web job step by step, azure web job build deploy pipeline, ci cd web jobs, build deploy web jobs, webjobs 3.0, dotnet core web jobs, build deploy pipeline, deploy web job, webjobs azure, webjobs, web job c#, webjob .net core, deploy a web job, how to deploy a azure web job, deploying a web job, web job with web app, azure web app with web job, deploy web app and web job, build deploy web app and web job

Id: LxoI71g1ffo

Length: 27min 5sec (1625 seconds)

Published: Thu May 06 2021