Taking a glance at running an Azure Webapp on a custom location powered by Azure Arc

Introduction

Earlier this week I published the following repository ; https://github.com/beluxappdev/demo-arc-appservice. Which basically contains all the needed steps (via Azure CLI) to create an environment that showcases how Azure AppService and Azure Arc work together. For today’s blog post, I would like to take you on the journey from a “consumer” of this App Service Environment (running on any Kubernetes distribution, managed via Arc) to deploy a Webapp onto it. Where we can then see how the it is currently looking in the preview!

 

Let us make it real! The platform…

See what your users are experiencing with Clarity!

Introduction

A while back Mike was telling me he discovered “Clarity” existed and that I should REALLY take a look at it. I remember in initially was a it sceptic also thinking about where the potential overlap was with “Application Insights“.

Tried out #Clarity today upon suggestion by @TechMike2kX. Pure gold in terms of discovering the real user experience on your webapp! If you want to demo it => https://t.co/JRrM3uqZSB pic.twitter.com/TGpvEPzr9H

— Karim Vaes (@kvaes) April 1, 2021

As I have been working on a new project, I decided to take it for a test spin, and I must say I am impressed! Clarity is a simple and free service that allows you to see what your users are seeing. Plain “simple”… nothing more, nothing less. It will provide you insights on the usage, heatmaps of your web app and session recordings of users going through your web app. Which will help like a lot when you want to refine your user experience!

Quick skim through the service

Once signed up you are prompted to create a new project ;

Azure : What do I put in front of my (web) application?

Introduction

In almost every design session, the following question pops up…

“What do I put in front of my web application to secure it?”

Today we will take a look at the different options at hand. Or better said … What is the difference between the following services?

Azure CDN vs Azure Front Door versus Azure Application Gateway (WAF) vs Azure Traffic Manager

 

TL;DR

If you do not want to go through the entire post, here is a brief summary of the different options ;

My gut feeling tells me this will already help out like a lot! 😉

 

Web Application Firewall (WAF) : Azure Front Door vs Azure Application Gateway

Both Azure Front Door and Azure Application Gateway state that they can be configured to act as a Web Application Firewall. They key difference here is that the Azure Application Gateway can do a “detection only”-mode and that it supports CRS 2.2.9, 3.0, and 3.1. This means that there are out-of-the-box rules that provide a baseline security against most of the top-10 vulnerabilities that Open Web Application Security Project (OWASP) identifies. With Azure Front Door, you need to configure the rules yourself to your liking.

In terms of networking, there also is a very important difference between both. An Azure Application Gateway can be deployed (injected) in(to) an Azure VNET (Virtual Network). By doing so, the traffic between this gateway and your internal backend will flow through a private network. With Azure Front Door, your backend is always based on a public endpoint. Though you can harden / lock down the connectivity between Azure Front Door and your application by restricting the ingress of the traffic.

 

Geographic Redundancy : Azure Front Door vs Azure Traffic Manager

If you want to publish your webapp across regions, then you can leverage Azure Front Door or Azure Traffic Manager to do so. The most important thing to know is that Azure Traffic Manager is DNS based and serves as a redirection mechanism. Azure Front Door will serve as an entrypoint (think reverse proxy). So when using Traffic Manager, you will typically look at another reverse proxy / WAF (like Azure Application Gateway) to cover the need for the secure entrypoint for your application. Next to that, the Azure Traffic Manager is more feature rich in terms of the routing mechanisms, though Azure Front Door (just like Azure Application Gateway) have the advantage of working at layer 7 (Reference : OSI Model), thus also do header/path based routing.

 

Caching Content : Azure CDN vs Azure FrontDoor

The first thing to realize is what the intent was of both solutions?

• Azure CDN is a Content Delivery Network and was designed to delivery content. Think in terms of media files (“video”) for instance.
• Azure Front Door was built as a scalable entry point for applications (like Office 365)

Both will do caching (check the links above), though they differ in the sweet spots. Azure Front Door will cache files up to 8MB (as a side trait), where you should think that this is mainly done to optimize the delivery of your “web app”. Azure CDN its core function is caching… It was built to ensure that your files would be distributed world wide and delivered from a local pop.

The funky thing here, is that (if you ignore the Verizon and Akamai flavors of Azure CDN) both Azure CDN and Azure Front Door share the same POPs! Though the caching mechanics of both work differently.

 

DDOS

All services will have DDOS protection (“Basic”), as this is native to any Azure service! It is a key component of the Microsoft backbone actually. Though you can augment the services that reside in your VNET with the “Standard” protection. That being said, do know that the Azure Application Gateway does not scale as dynamic as the other services mentioned here (Azure Front Door and Azure Traffic Manager). So this could become a bottleneck for your design.

 

Closing Thoughts

With more than 100 services in Azure, you are bound to have services that overlap in terms of capabilities. I do hope this post provides you with some guidance towards a the external facing endpoints of your application! The above things are the recurring patterns I see in discussions with the organizations I talk to when deploying web applications on Azure.

Putting Azure FrontDoor in front of your webapp

Introduction

Today we’ll be going through the process of putting Azure FrontDoor in front (pun intended!) of a web app.

 

Step One) Adding the custom domain

The first step  is to add a new custom domain to your Frontend hosts ;

Now if you go through this, you’ll see that AFD expects you to link the custom domain to the azurefd.net domain in order to proceed.

Using Azure DevOps to deploy your static webpage (SPA) to Azure Storage

Introduction

To, without shame, grab the introduction of the “Static website hosting in Azure Storage” page ;

 

Azure Storage now offers static website hosting, enabling you to deploy cost-effective and scalable modern web applications on Azure. On a static website, webpages contain static content and JavaScript or other client-side code. By contrast, dynamic websites depend on server-side code, and can be hosted using Azure Web Apps.

As deployments shift toward elastic, cost-effective models, the ability to deliver web content without the need for server management is critical. The introduction of static website hosting in Azure Storage makes this possible, enabling rich backend capabilities with serverless architectures leveraging Azure Functions and other PaaS services.

 

Which, to me, sounds great! As one of my projects (VMchooser) is actually a static site (VueJS based Single Page App) that could just as well run on Azure Storage (thus reducing my cost footprint). So today we’re going to test that one out, and afterwards integrate it into our existing CI/CD pipeline (powered by Azure DevOps).

 

The anatomy of “vmchooser”… Adding some serverless into the architecture!

Introduction

In an earlier blog post I discussed the decision criteria in selecting a VM. In that post I also showed a tool called “VMchooser“. Today’s post will be on the architecture I used to build this one. As you might have guessed, it’s built on Azure components. Let’s get to it and check the anatomy of this application.

 

High Level Architecture

VMchooser has the following high level architecture ;

• Web App : The front-end of the application is hosted on an Azure Web App.
• Azure Functions : The back-end API & batch parser are built with Azure Functions. Which unlocks insane scaling possibilities.
• Storage Account : The storage account serves as decoupled/central storage component for the batch parsing. And it could also be used for hosting the “database” (flat file).
• Application Insights : Application insights is used to have the needed insights into the usage & other metrics.
• Github : All code for this project is open-source and publically hosted. You can run your own VMchooser if you want… 😉 Every change is immediately pushed towards the front-end, back-end & database.
• API Management : As the back-end API is decoupled from the application, I’ve also linked this api with api management. This would provide me with the option to allow 3th party application integrations via an API subscription plan.

 

Setting up Azure MySQL with CodeIgniter by having SSL enforced

Introduction

In my previous post I talked about integrating Azure MySQL with a PHP webapp. Today we’ll elaborate on that one a bit further and see how we can setup CodeIgniter to use the Azure MySQL.

 

Prep the webapp

First thing, set all your database variables as app settings (read: environment variables) ;

That’s it as preparation 😉

Protecting your webapp with Azure Active Directory WITHOUT adjusting any code…

Introduction

Sometimes we come across applications that needed some basic form of protection, but (sadly enough) the code base did not allow it. Today we’ll see how we can enable authentication / authorization on your web app, -without- altering any code! We’ll be doing this capability from the web app service itself, without the code noticing anything of this.
Enable / Configure the Azure Active Directory Authentication

Let’s start by doing to our web app and looking for the “Authentication / Authorization” section.

We’ll enabling the “App Service Authentication”. As we do not want guests, we’ll select “Log in with Azure Active Directory” as a way to force authentication. Next up we’ll configure the Azure Active Directory ;

Azure : Using PHP to go all oauth2 on the management API!

Introduction

As a hobby effort, I wanted to create a small poc where any user would be able to login with their AAD user, grant access to an application, after which that application could query their subscriptions.

In all honesty, I’ve been struggling more than I like to admit with getting this working… So this post will cover all the steps that you need to do to get this working!

 

Oauth & Azure AD

Before getting our hands dirty, read up on the following post ; Authorize access to web applications using OAuth 2.0 and Azure Active Directory

Ready it thoroughly! To be honest, I didn’t at first and it cost me a lot of time. 😉

Anyhow, the flow looks as follows…

So basically;

• We’ll redirect the user to sign-in (and if this hasn’t been done, grant our application access)
• If all went well, we’ll receive an authorization code
• We’ll use this code to get a bearer (and refresh) token
• Next up we’ll use the bearer code to connect to the Azure REST API for getting the list of subscriptions for that user.

Azure Application Gateway : Often overlooked…

Introduction

Ever heard of the azure application gateway? No… I understand. It is (strangely enough) a component that is often overlooked. In essence, what does it do? Look at it as a load balancer on security steroids. The basic form will help you in terms of SSL offloading, where the advanced form will turn it into a WAF.