AZ-303 Microsoft Azure Architect Technologies – Implement Solutions for Apps (10-15%) Part 2

3. Creating a Web App Walkthrough

Okay, that’s enough theory on web apps. Now let’s get in and actually create a web app and have a look around to look at the various options that we’ve been through. First thing we’re going to do is go and create the web app and we’ll do this through the portal go to create a resource and a popular one is the web app there. So you can have a selected from there or search for web app and go through and add the usual details. So we’re going to want a new resource group for this.

We need to give it a name. You have to tell it what runtime stacks, that means what programming language you might want to use to deploy your application. I’m going to go with Net Core 3. 0 and we can also choose what operating system we want, especially when we depending on what runtime stack we use. So I’m going to stick to Windows for now. I’m going to set the region to UK South and the first thing it’s going to want to do is create an app service plan. So it will try to create one randomly for it to start with.

Or you can go ahead and set your own by clicking Create New. So I’m going to go ahead and do that so I can have my own naming convention. So I’m going to have ASP App service plan then cloud Guru Web App. We then need to tell it what size. Now by default it will use standard S One. I’m going to change that first. We will actually change it to a standard S One again later. But to begin with I wanted to show you the different pricing options. So right over here on the right we have the isolated so this is where you have to pay a stamp due to plus the additional pricing tier.

But this gives you the completely isolated environment, high compute and so on. But as you can see it’s very expensive. It’s generally around $600 a month just for the stamp charge. And then you’ve got these prices on top. Production is what most people want to go for. And again, as you can see we have to set the memory size and we have this 100 total ACU that’s rather than actual specifying CPUs, we specify Acpus which is just computing units. The one you want to look for really is more around the memory. And as you can see, the price goes up the higher you go up. Certain features available in standard and production ones that aren’t available elsewhere. For example, we’ve got custom domains, auto scale, staging slots and so on.

Whereas if we go over here to Devon test, these are when we get out of our free tier, shared tier or smaller tier models. And again as we click through them we can see the features appear or disappear. To start with, I’m just going to go for F One which is a shared infrastructure. So it’s going to ask if you want to do monitoring. So we can use something called Application Insights for monitoring, which basically sends telemetry, data usage data, performance statistics, and so on into an Application Insights log, which helps troubleshooting and just generally checking up on the health of your application. I’m going to turn that off for now. We’ll review that later on. Next we go to tags.

I’m not going to go had added any tags. Let’s just go and create that when we’re ready. Hit the Create button that’s going to go off and actually spin up the environment that we need to be able to deploy our rep app. Once that’s deployed, we can go to our resource see here’s some basic details we can see in our resource group the fact that it’s running. We’re in UK South here’s the URL, which is basically the name we gave it. So in my case, I called it cloud Guru, Hyphen, Web, App, azure websites Net.

And we can see the service plan is on the free tier. We’ve also got FTP username and fttps username and hostname here. That’s because you can actually deploy via FTP, although by default it’s not active, it doesn’t set the FTP user. And that’s because there are better methods that we can use to deploy. If we click on the URL here, it will actually open up the site in a new window, and it basically just says, hi there. That’s because we don’t actually have a website deployed yet. So that’s the first thing we’re going to do. Now. I’m going to create a very basic website using Visual Studio 2019. I’m not going to go into too much depth about how we create websites. That’s not what this course is about. So I’m just going to go and create a new project here. I’m going to take an astronaut core application. I’m just going to give it a simple name. Then I’m going to go for an MVC.

Again, it doesn’t matter too much what we’re doing here. This is just to give us an example website that we can use for demonstration purposes. So that’s created my web application. I’m just going to right click here and tell it to view it in a browser. So what this has done is launched the website, but it’s running on my local PC at the moment, as you can see there. And as you can see, it’s just a very basic page saying welcome, hello world. That’s just to really prove that the site is built in and is working. Okay, so what I want to do now is publish it. So I’m going to right click and I’m going to say publish.

And we’re going to publish this to an app service. I’m going to say Select Existing because we’ve already created it. You can actually create your app services through the Visual Studio wizard. I’m going to say create profile. Now, I’ve already signed into my account here. So it’s going to come up. It’s found that we’ve got a resource group called Web Apps.

And in that Web Apps, we’ve got our actual web app there. So I’m just going to highlight and click OK, creates the publishing profile. So I’m just now going to go ahead and click publish. Okay. So that’s going that and by default it will just open up the browser automatically for me. Let’s close that down. So this is the one we opened originally. So now if we refresh that page, we can now see that we’ve got our website. So that shows that we’ve got that deployed.

4. Web Apps – Domains and Slots Walkthrough

Let’s now have a look through some of the other options in our website config. So first I just want to come down in the settings pane here we’ve got configuration and the main thing is under the general settings here. So if you’ve deployed your app and you’ve decided that you no longer want the net core stack, then you can go in here and change it. So we’ve got standard net, PHP and Java. We can also tell it different managed pipelines now too. A lot of people this doesn’t really matter too much generally speaking you would just go for the default. But if for whatever reason your application needs some more advanced settings that you would normally set within the IIS website on a server, this is the area where you can change them. If we go to things like backups, it’s telling us that we cannot do this because the app service plan needs to be standard or higher.

Again, if we go to custom domains it’s telling us we need to upgrade the service plan. And also if you wanted to be able to scale out, which means add more instances, we can’t do that because we’re not on a high enough tier. So the first thing we’ll do, let’s go and up tier. So go to the scale up option. And what we want to do, we want to enable an option that’s going to allow us to have custom domains. Okay, that’s that one. But we also want auto scale backups which these don’t include. So let’s switch over to production. S one is highlighted and now we can see we’ve got everything we want so we can have custom domains, auto scaling, staging slots and many other things. So let’s go ahead and select that and click Apply. Once that’s updated we can now go back and start setting some different options.

So let’s first of all go back to custom domains. So by default our domain is on Cloud Gurbax azure websites net. Obviously that’s not ideal, we’ll probably want our own vanity domain. So what we go is in here as custom domain and let’s give it a custom domain name. We want to still call it Cloud Guru Web app, but it’s now going to be on my pleat loud Guru domain. So the first thing we need to do is validate that. Now what that is actually doing, it’s going and checking with my DNS registrar to make sure we have a CNAME record that points to the underlying domain name because without that it won’t actually work. So at the moment this is saying the CNAME record doesn’t exist. So I’ve just gone and created a CNAME record that points to there. So let’s go back and validate that again. Now it’s saying everything is fine, so I can now add that as my custom domain and that’s created.

Now it’s telling me that we don’t have a secure binding. So if we click add binding, that would allow us to go and upload a certificate. However, because we don’t actually have any certificates, I can’t do that at the moment, but it just means I can’t use Https. However, it does mean that I can now take that URL and go to that custom domain. There we go. So because we don’t have the secure binding, I’m actually just going to remove that for now. Next, I want to have a look at the networking tab. So in the networking tab, we can set up VNet integration and hybrid connections. So VNet connection and hybrid connections are to be able to connect to premises that are on private ranges. So earlier on we created some virtual machines on private VNet. Now we would not actually be able to access these on those private IP addresses. In order to be able, if we had to say for example, a SQL Server running on one of them and we wanted to access that SQL Server, we would first need to connect this web app to that network using VNet integration.

To do that, we would simply click on the VNet integration option and then we’d say add VNet and it would show us the virtual networks that we have that we could use. Because of how it runs, it actually needs a gateway subnet to connect to. But if you want to connect to a virtual machine on your VNet, that’s how we’ve got to do it. There’s actually a newer option how to do it at the moment that’s currently in preview and it just gives you more options, bit more flexibility around selecting things. So as you can see, we can select these straight away without creating the gateway that is in preview at the moment. At some point it will be full general release, at which point you will be able to create this.

Normally that’s great for connecting to VNet within your Azure subscription. However, if you wanted to connect to a SQL Server that was on premise, you would do that via the hybrid connection. Again, you would go in to configure the hybrid connection. Then you would have to download this connection manager and install it on the server that you want to connect to. That will then set up that server which will allow you to talk back over a secure endpoint back to your portal. You would use VNet connections to connect to VNet within your current subscription, or you would choose hybrid connections to connect to endpoints that are on premise.

Next, let’s look at deployment slots. So we talked about having deployment slot slots that we could publish to and swap for production and staging. So let’s just walk through that to see what we need. So under deployment, I’m going to go to deployment slots and by default we can see our website here running. What I’m going to do is add a new slot. I’m going to tell it to clone the settings from the main website and you’ll see why in 1 second. So if we click add, then close when that’s been done. So what this has done is created another website, essentially in a staging slot. So if we look at our web page on here, so that’s on the URL that we had originally, but now we have this additional one here. And if we click through to there underneath, it’s actually another website.

So if we actually click on that URL, we’re now getting a blank page. And that’s because the actual clone hasn’t finished yet between them. But essentially the pod thing is we’ve now got this additional website with a Hyphen staging on the end. And if we go back to our deployment slots, we can see that we have two slots. Both are running one’s production and one isn’t. So let’s see how we would use that. Imagine we wanted to update our website, so I’ll just go to the front page and just let’s put some extra text in here. So what you might want to do is when you made updates to a website, you rather go straight to production, you might want to deploy it, but make sure that everything’s hooked up correctly first. So this might even include the same connection string. So it would still connect back to the same database, but you just want to confirm everything. So what we can do is we can now deploy to that staging slot. So I’m just going to in my publish profile.

 So publish, I’m going to delete the publishing profile we created earlier and I’m now going to create a new one. I’m going to go through the same steps as we did before. So app service, select existing and again web apps and my cloud guru app. But now I’m going to click the little triangle next to it and we’ve got this deployment slots option. And if I expand, expand that, we’ve now got this staging option. So now I’m going to say okay, and then I’m going to publish that to the staging slot. So once that’s published, it’s going to bring it up to show that it’s deployed. But note that it’s gone to the staging website. You can see our V two updates now live. If we go back to our main page and refresh, you can see that that hasn’t been updated. So we’ve deployed to this staging one, whereas our production one is still like that. So again here we would do all our tests.

They might be against the live database and we’re just testing functionality. Once we’re happy, everything’s okay. We go about trial deployment slots and we simply click swap. It will pick up our source and targets and just click the swap button again. Once that’s completed, just click close. So you can still see that this is running. But if we now go up to our home page on the live and hit refresh, we can now see we’ve got our version two updates before we continue.

What I just want to do is go ahead and delete that and that’s so that we can drop our tier down later on. So now I’m going to go into our staging site and I’m going to hit delete. Once we’re confirmed just typing in the name of the slot. And now we can go back to the department of slots, hit refresh. You can see we’re back to only one slot.