Azure App Service in 15 MINUTES | Web App Tutorial

when it comes to hosting your web application there are literally dozens of ways of doing it but today we'll break down only one of them that's really easy to set up and free to try today we'll talk about Azure app service and I'll show you how easy it is to release a Blazer server application to production through a visual studio through Azure app service deployment Center and finally if you're a bit more technical which I know you are we'll set up a devops CI CD pipeline that will release automatically to production every time we push to Main so let's get coding but before we get into it why should you care about Azure app service why would you choose it over other ways of Hosting your web application say hosting it in VMS or Docker containers and you're actually right maybe you're more familiar with some of those methods but here's the thing many times that's infrastructure as a service say for instance hosting your application in Virtual machines you not only have to take care of the code that actually brings business value and subsequently money to your business but you also have to take care of the infrastructure that means the compute resources the storage the networking the security patches the OS updates and all of that that's on you it is true this provides a lot more flexibility and some cost advantages and if you are in a lift and shift situation meaning you want to move your on-premises infrastructure up to Azure then yes that might be the perfect solution for you but in scenarios where you don't need or want to mess about with the infrastructure then Azure app service might actually be the perfect choice for you okay but what exactly is azure app service and what are its main benefits let's talk about that Azure app service is a platform for hosting web applications mobile backends rest apis or Azure functions to create an app in Azure app service you need an Azure service plan and that's the unit that represents your application an app service plan specifies the operating system the region the instance size that small medium or large the scale count meaning the number of VM instances that your application can scale up to and the SKU or the pricing tiers that can be free shared premium but more on that in a minute in terms of the main benefits it provides 99.95 SLA which translates to 43 seconds of downtime per day or 5 minutes a week or less than 22 minutes of downtime per month it releases very fast and it's got zero downtime releases but I'll show you what it actually looks like in a moment it's also got a feature called deployment slots or staging slots these are separate environments that you can deploy to for testing or staging purposes is then simply swap those with production slots but these are available with a more premium tiers for context there are three main pricing tiers we've got shared dedicated and isolated the shared one includes the free and shared tiers the dedicated one includes basic standard and premium tiers and the isolated one obviously contains only the isolated tiers they differ in terms of the CPU the memory and the storage but also they've got a number of features as well like Auto scaling backups staging slots or custom domains generally the more you get towards the isolated tiers the pricier the plan actually gets and we've got a lot of scaling when you hear about Auto scaling all that actually means is automatic scaling and Azure provides two types of Auto scaling we've got vertical scaling and horizontal scaling vertical scaling means scaling up or down scaling up is having more CPU memory and storage added to your instance horizontal scaling on the other hand means scaling in or out scaling out is having more instances attributed to your plan and by instances I mean managed virtual machines you can imagine scaling up as having more and more Hardware stacked on top of your computer to make it more performant and scaling out can be represented by more and more PCS added next to each other it integrates with Azure devops which will demonstrate as part of this video GitHub Docker Hub bitbucket and so on it supports applications developed in the following languages and Frameworks c-sharp with.net.net core PHP Java Ruby node.js Python and the list goes on authentication and authorization are baked within the platform itself so no extra code or setup is required it integrates with the major login providers such as Facebook Google or any openid connect provider and also with Azure ad you could also set up your own authentication process you do need to so here is the plan we'll take a starter Blazer server application and we'll release it to production in three main ways firstly we'll publish it through Visual Studio video secondly we'll deploy it through Azure app service deployment Center and lastly we'll set up a full-on CI CD pipeline in Azure devops that will automatically release to our app service instance every time we push to the main branch to go through the rest of the tutorial with me you need two main things and Azure subscription and if you don't have one you can get that one for free in a few minutes just Google free Azure subscription click on the Azure link then start free button and secondly you need an Azure devops account again if you don't have that already Google Azure devops free click the Azure link scroll down to the individual services and click Start free Okay so let's switch over to visual studio and get our app started okay so the first thing that we're going to want to do is go to portal.azure.com and in here you can click create and create a resource or if you can see app Services click on it otherwise create a resource and then this will send you to a page where you can choose your resource and this will be the Azure web app the web app right here click create choose a subscription and a resource Group if you don't have one created give your app a name this must be unique amongst the ones that are actually using the free tier so whatever name you give to your application to your Azure web app make sure that you keep a hold of that because we're going to use it throughout this tutorial the publish type will be of code and the runtime stack will be.net6 I live in the UK so I choose the closest region to mine but make sure that you choose the closest region to yours and here in the pricing plan it's really important that we change the slides because by default this assigns us the the standard one so if we go to the dev test we need to select the shared one so this one is free we've got 60 minutes a day of compute completely for free so these are the only two features that we get and if you are happy with the changes and this says free SKU unless you want it to be otherwise then hit create and just keep in mind that this will take a couple of minutes but as soon as it's done we can go ahead and click on view resource which is the actual web application okay go to Resource and we are presented with the overview of our web application and as you can see we've got a unique URL mine is twj app1.azurewebsize.net and Azure kindly provided us with a template website that we have deployed already in in place of our web application so what we'll do now is switch over to visual studio and create our brand new web application okay create a new project this will be a Blazer server application I'm just going to keep the names consistent cwj code with Julian app one give it a path hit next this will be a.net6 application with no authentication in hit create and here we are this is the starter template of a Blazer application nothing new so far so let's hit Ctrl F5 and let's see the application on our localhost there you go as you can see we've got our application running at localhost 7061. so now what we need to do is publish our application on Azure so to do that we switch back to visual studio right click on your project and go to publish in here we target Azure Azure app service on Windows we choose our Resource Group if you were to have deployment slots for the premium coming with the premium tiers then you would be able to deploy straight to those but we're just going to publish to our production slot and hit finish okay so a publish profile has already been created as you can see picked up my subscription the resource Group and the resource name and it's also got the URL the unique URL of our web application and all we need to do now is hit publish give it a few seconds and as you can see it succeeded and it automatically opened up the website for us so now we're live our application is successfully published to production so now the second way of releasing your web application into Azure app service is through the deployment Center so this is what we're going to do now in order to do this we'll need an Azure repos repository so if we head over to dev.azure.com click on the new project button give your project a name and hit create okay we need to head over to project settings down to repos and enable the repost Tab and refresh the page and you'll see that the repos appeared right here now this is an empty repository and we need to copy the URL in order to link up our project in visual studio and what we need to do in inside our project is go to add to Source control choose git and we've already got an existing remote because we've created that project and we paste in the URL that we've just copied create and push so it will take all of this code and it will push it to our already existing remote repository after it's finished committing and pushing all the changes we can head over back to Azure devops and as you can see we've got all of our code right here okay so now we are ready D2 setup CI CD through deployment Center inside our Azure web app so we choose Azure repos we choose our organization the project we choose the repo and the branch which is just made so we hit save okay so once that's done you can see that the source is set to Azure repos we can disconnect it if if we want which we'll do in a few minutes and you can see the repository as being this if we go to logs it should have already started a deployment a release for us and if we click on this we can actually see some log details okay so once it's successful then we can go ahead and refresh our application and you'll see that everything is as it was before but actually this time we've deployed through deployment Center so why not make a change in the code so right here we're going to change this to this commit and push once that's done we head back over to the the deployment Center we hit refresh and this should already be picked up by the employment center and create a release for us as you can see running deployment completed so now it's successful so we can click on browse and we can hit the website and as you can see this is the updated version of my app so this is how you can do it through the deployment Center lastly we'll set up a build and release pipeline through Azure devops before creating our CI CD process in Azure devops it is really important that we come back to the deployment Center inside our web app and we click disconnect it is really important that we do that otherwise the CI CD pipeline will fail to a release because this is already connected through the deployment Center so just click disconnect so basically we'll leave this as it is and we'll head over to Azure devops we have two sub menus that we're going to work with the pipelines which is the actual build Pipeline and the releases which is the actual release the build pipeline builds your code and generates those artifacts and the release pipeline is the one that actually takes those artifacts and deploys them to the necessary environments so the first step in this process is to actually create the pipeline we go to pipelines create pipeline we choose the Azure repo git and it's already picked up the cwj app one and you could go ahead and select from predefined templates but for now we're just going to use a starter template and essentially delete everything because we're going to Define everything from scratch the first three things here that we've got is trigger on Main so every time we push to the main branch this pipeline this build pipeline will be triggered and then in the pool we've got the VM image the virtual machine that we want this to be built on is Windows and the latest version of Windows and we Define a variable called build configuration that's got the value of release we'll use this in a second so we Define some steps and the steps contain some tasks that we're going to Define and we have four total tasks the first one is running the nuget restore 4 so it restores all the dependencies currently we don't have any dependencies but it's still good to have this task right here for when we'll have some in the future the second one is running the.net build so basically it takes our code and builds it the same way we would do it in Visual Studio the third task is actually grabbing our build code and publishes it to the output that we're defining in here so whereas the previous task published the project to the build output and the zipped the contents this one actually takes the artifacts the outputted artifacts the ones that have been published in the previous step and uploads them to be ready for release and we hit save and run and he's been queued so if we go down into it we're actually going to see the tasks that we've created so we just wait for it to go through and execute each one of them okay so ideally if you followed the tutorial step by step you should have the same result as mine so the next step is we've got the build pipeline now we need to create the release pipeline so if we go to releases we create a new release Pipeline and here we select the Azure app service deployment deploy your application to Azure app service we hit apply we close this so we go into the stage tasks and in here we need to find our subscription so I'm just going to click authorize and go through and authorize this give it a minute to load okay as soon as it's being authorized then we go and we select our app service and we're done with this part so we hit save okay then we go back to the pipeline okay now we need to create an artifact so essentially what are we releasing on so we're releasing on a build and we need to select the source so this is the build pipeline that we've just created the artifacts that we're we've published with the build pipeline we're picking them up here and we're releasing and we click add as soon as we've done that the last step is to actually Define the trigger so what will trigger this and I'm going to say it will be triggered by the build so enabling the trigger will create a new release every time a new build is available so that's what we want the build pipeline to run as soon as it runs it will trigger the release and we close out of this one we hit save so now let's rerun the pipeline we go to pipelines and click on it and we click on run pipeline so that as soon as this finishes it should trigger the release pipeline okay this is done we can go to releases and you'll see we've got a new release Pipeline and no deployments found but as soon as that finished and the release pipeline picked up that the build has finished then we've got a release order generated for us and don't worry it will automatically go ahead and queue itself it will start the release and now it's deploying to Azure app service now it's downloading the artifact from where we published it in the build Pipeline and now it's deploying as you can see if we refresh the deployment Center within our web app you will see the release right here and it says deployed successfully to production hopefully if you did everything like in this tutorial step by step you should see this exact thing and now we can actually browse and see the website that's been updated there we go so we've got the website up now so as you can see that the interface has changed slightly because we've integrated it with the Azure devops CI CD pipeline if we make another change now like this and we commit the state changes in push and now if we refresh the pipelines we'll see that it runs it again because we've just pushed the change as soon as this finishes we can switch over to the releases refresh and there we go we've got our second release this is finished now switching over here refreshing the feed and it's all been successful if we browse there we go we've got our latest update with zero downtime so this is what I mean by zero downtime really thesis is because it automatically releases the latest version of your app without any need for a downtime okay so that's pretty much it with today's tutorial if you enjoyed please hit like And subscribe to this channel for more content just like this until next time stay safe

Channel: Code with Julian

Views: 44,640

Keywords: azure app service, azure web app, azure, azure devops, azure devops pipeline

Id: 5jOvVY1G62U

Length: 16min 23sec (983 seconds)

Published: Thu Jan 19 2023