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

8. Web Apps – Git Deployment Walkthrough

Before we finish with web apps, I want to go through one more item and that is deployment. When we spun a Power web app, originally we deploy to it directly from Visual Studio. However, especially when working in teams, this is not how you would often deploy web applications. More often than not, you would use a process known as dev. DevOps. With DevOps, what happens is a particular product is broken down into a set of product backlog items, which in turn might be a series of tasks. So they may be create the web, front webpage, create a function to place orders, create a function to create products, and so on. A team of developers would then take those tasks off the product backlog and work on them to build a website out.

Once they finished building them, they would commit them to a repository. This then might trigger off some automated tests and then finally they would go through a pipeline that would automatically deploy that application code to the web app. So what I’m going to do now is I’m going to set up a deployment from a code repository. Rather than set up a complete pipeline, I’m going to show you how you can actually link from within Azure directly to a repository to automatically pull code as it gets updated. In preparation for the next lecture, I’m actually going to pull a website from the Azure Samples page in GitHub.

 If you’ve never used GitHub before, it’s a repository collection where different people can go and store their code. You can use them as private repositories or many people use it to supply public repositories. So for example, Microsoft supply a lot of example code that you can use for free in their Azure Samples repository and browser window. If you went to GitHub. com Azure Samples and then you go to Azure Hyphen Event Hyphen Grid Viewer, it will take you to this Event Grid Viewer sample application and there are instructions here of how you can deploy it. But we’re not going to use these. We’re going to do it directly within the Azure Portal. The first thing we’re going to want to do is to be able to get hold of this application or clone it.

So we’re going to go to this clone or download and we’re going to go to this copy icon here. As you can see, you could actually also download the zip file with the source code or open it in GitHub desktop which is a separate application you can download. Once we’ve got the source for the repository, I’m going to in my web app, go to the deployment center and I’m going to tell it how I want to deploy my code. As you can see, there are a number of options for me azure repositories, which is same as GitHub but managed by Microsoft and Hostnazura.

There’s also a bit bucket and you can also have local Git repositories which is local copies of the code on your machine. But I’m going to go for manual deployment here and I’m going to choose this external option which will allow me to deploy from a public git repo. Click it and click continue. Next, it wants to know how it’s actually going to build it. Again, we might want to use Azure Pipelines, but I’m just going to go for this app build service highlight and click Continue. This is now where we enter our details. So first of all, I’m going to paste in the details of my repository. Next, he wants to know the branch if we go back here. Code is often broken down into branches where you can see different development tasks or development lines. The standard is that all working code should be committed to a master branch. So we’re going to go for that one. The repository type is git. It’s a public repository, which means we don’t need to supply username and password.

And I’m going to click continue. Once we have everything set up, go ahead and click Finish. You can see running commentary of what’s happening as part of the deployment here. And when it’s finished, we’ll see the status as active. We can also see the repository where it’s come to, and if we wanted to resync or repeal the code, we could click Sync. So what’s happened is it’s pulled that code from the GitHub repository and it’s updated my web application with it. So if we now go to our web application and reload our page, and we should now get this event grid viewer page, we’ll use this website later on in the next chapter.

9. Event Grid Introduction

When building applications, you often need to send data between different services. Traditionally, this would mean connecting to another service in order to transfer the data to it. Unfortunately, to do this you can sometimes run into problems. For example, if that service was down, there would be nothing to connect to and it might present an error. Another option to this kind of development is known as message queuing. And in fact, with Azure Storage accounts, they even contain a rudimentary service called a message queue. For just this purpose, message queuing allows an application to write a request to the message queue and then a consuming application to pick up messages from that queue as and when they need it.

Azure event grids help simplify these eventbased applications. It’s a single service managing routing of events from any source to any destination. And it’s automatically designed for high availability and consistent performance and even dynamic scale as it’s completely managed for you by the Azure infrastructure. It’s eventbased, which means you don’t need to poll. So for example, if you have a consuming application, it doesn’t necessarily need to be polling for the source to see if an event has occurred. With event grid, event publishers are decoupled from the event subscribers. In other words, the event publishers would merely raise the event and the subscribers would be notified of those events. This means that developers can focus more on richer application scenarios by connecting multiple possible sources and destinations of events. With a sure event grid, the event grid itself can hook into a number of different topics or event sources.

For each of those, you can then define an event subscription. So an event source is where the event actually happens, and several Azure services are automatically configured to send events. So for example, Azure Storage is the event source for blob created events, ie. When anybody uploads a Blob or deletes a Blob to the Blob storage, it can be set to trigger an event. Developers can also create custom applications that send events. And custom applications do not need to be hosted in Azure to use the event grid for event distribution. Once you have your event source, you use a topic. The event grid topic provides an endpoint where the source sends those events. A topic is used for a collection of related events. Next, we have the event subscription.

A subscription tells EventGrid which events on a topic you are interested in receiving. When creating the subscription, you provide an endpoint for the handling of the event. You can filter those events that are sent to the endpoint as well. Finally, you have the event handler. So an event handler is the place where the event is actually sent, and the handler takes some further action to process the event. So the event grid supports multiple handler tabs. For example, Azure automation queue storage and logic apps. The easiest way to get your head around the event grid is to see an example. So in the next lecture, we’ll look at how we can take an event happening in Blob storage and send it to an event handler. In this case, we’ll send it to a web hook, which is the website we built and deployed earlier.

10. Event Grid Walkthrough

Okay, let’s see this in action. What we’re going to do is we’re going to hook up an event so that when anybody uploads something to one of our storage accounts, we get notified. We’re going to send a notification to the website we deployed in the last Web apps lecture. So if you haven’t seen that you need to go back to that where we deployed a web application from GitHub. In order to get this application up and running, what we want to do is go into our work storage account and we want this events option here. So this allows us to hock into events that happen storage and then when they happen, forward those events to some other service.

So for example, we can forward the events to logic apps, we can send them to Azure functions, but I’m not going to cover them just now because we’ll be covering those later on. He said, I’m going to go to more options and I’m going to say Web Hook because what we actually want to do is when these events happen, I want them to send them to a webhook which is basically a URL on our website. So go ahead and click web hook. The first thing we need to do is give our event a name. So this is the event subscription. The event Schema wants to be.

Event grid Schema. It’s automatically picked up that we want to do this from our storage. We can have different types of events that it captures. The default is for when we create and delete Blobs, that is actual files or records within our storage account. And as you can see, we can also hook into these other options. Next we need to tell it what endpoint we want to use. So in our case it’s a webhook and then we need to actually tell it where the web endpoint is. So go to our website and copy the URL and then paste that in. For this to work, we actually want to send the code to a specific URL, to a specific endpoint in our website called the Apiupdates and then click Confirm Selection.

Finally click create. Okay, so you saw an error there that we had, which is the Event Grid Resource provider is not registered. So this happens sometimes when we try to deploy service that isn’t kind of like activated for our subscription. So let’s go ahead and activate that. So the one we want is the Microsoft event grid. Go to our home and go to Subscriptions. Select your subscription and then go down to under Settings Resource Providers. The one where you want is the Event Grid, which as you can see here is currently in registering. And that’s because when you first try to activate something, if it’s not registered, it will try to register. As you can see, what’s probably happened is that it started registering but not finished in time.

So what we just need to do is wait for that to finish registering. First of all, if it wasn’t registered or had any errors, you can actually select it and manually register it here. As you can see, it’s actually finished registering now. So we can actually go back to our storage accounts and then just go through and create the subscription again once the deployment is complete. From the events page, you should now be able to go to Event subscriptions and see your event subscription set up here.

What I’m going to do now is shrink this window down so that we can see the website that is running and we can see already we’ve got an event, which is when we created the subscription, it sent through a validation event and we can click on that and see the details here. However, let’s go and test it properly. So I’m going to go to my containers, I’m going to select an upload folder and I’m going to upload a file, going to upload the picture I uploaded earlier, and I’m just going to tell it to overwrite and then click upload. Then when that’s done, we can see straight away this event gets sent over to our website. And similarly, if we go in and delete that blob again, we can see the event pop up again.