Web Solution on Azure Cloud Platform

9 min readAug 16, 2020

Microsoft Azure is a cloud infrastructure software developed by Microsoft to develop, test, deploy, and manage applications and services via data centers operated by Microsoft. It offers software as a service (SaaS ), platform as a service (PaaS ), and infrastructure as a service ( IaaS) and supports a range of programming languages, platforms, and frameworks, including Microsoft-specific and third-party services.

Microsoft azure selected as the cloud-based platform to implement the cloud-based web solution for the architecture given below.

Web solution architecture — Web Solution Architecture

Basic Configuration

When we set up the above-mentioned architecture using Azure cloud the first thing we need to have some basic ideas about Azure resources and other components.

Azure Resources Groups are logical collections of virtual machines, storage accounts, virtual networks, web apps, databases, and/or database servers. Azure resource groups help to group azure resources as a one set.
The Azure resource group management model consists of four main levels.
Management Groups-Consists of some azure subscriptions
Subscription-subscription consists of user accounts and the resources that were created under those accounts
Resource groups: logical containers into which Azure resources like static web apps, azure databases are deployed and managed.
Resources: Resources are instances of an Azure service that they provide, like virtual machines, storage, or SQL databases.

Even when I set up the above-mentioned web app I used to create some resources groups in order to group the resources and handle that I created under that resource group

in order to implement the web app solution, I have created is the web-assignment resource group.

since our web application should have the capability of handling a massive number of users, the Azure provides a successful solution for that and it helps to overcome a lot of hassles come with those kinds of situations, so the next thing that we have to understand is Azure Active directory.

Azure AD is the user and identity management system provided by Azure.

The Azure Active Directory is the multi-tenant, cloud-based directory and identity management service provided by Microsoft. This offers identity and access capabilities for applications running in Microsoft Azure and for on-premise applications. The strength of Azure AD lies in the flexibility granted by being completely cloud-based. This implies that it will either function as the only directory in an entity or via Azure AD Connect it can interact with an on-premises registry. As the name suggests, Azure AD is a directory — a container for your usernames, credentials, and access rights.

To handle user identities and permissions it is one place to go. Members can be assigned directly to groups by use attribute-driven rules, and can often use groups to grant licenses and access requirements. another main advantage is our users’ Azure AD identities are perfect for signing into Microsoft applications, it is also highly compatible with apps developed everywhere else. Azure AD manages malicious or accidental harm and with a variety of steps to protect its users from identity theft, including threat identification, conditional access, multi-factor authentication, privileged identity management, and more. And also it provides the ability to invite guest users into your directory to assign access.

So when we consider our web project we need to integrate the Azure active directory with our web project in order to handle the users.

This is how we can create an Azure Active Directory tenant by providing essential configuration fields. Tenant type can be a normal Azure active directory or Azure active directory (B2C) type.with the B2C Active directory tenant type, we can provide the signup feature with our login page.and also enable the authentication with external identity providers such as Facebook, Microsoft account, Google, Twitter

features with Azure B2C Active Directory

but with the normal active directory type, the administrator has to add a new user to the active directory.

For my web solution, I have selected our default University of Kelaniya AD as the active directory. So any user of the University of Kelaniya can log in to my application. After that, we need to register our application under the active directory that we have created/selected.

Application registration under the Azure AD

The next thing we have to do is to integrate the front end and back end applications with the Azure.for that we have got a basic idea about Azure App Service.

Azure App Service is an HTTP based service for web application hosting, REST APIs, etc. Not only does App Service add Microsoft Azure ‘s power to your application, such as security, load balancing, auto-scaling, and automated management. You can also take advantage of its DevOps features, such as Azure DevOps continuous delivery, GitHub, Docker Platform, and other outlets, package management, staging environments, custom domain, and TLS / SSL certificates.

inorder to do that we have to push our source code into the git repository.

after that, we need to get publish settings by clicking get publish profile tab and we have added the secret on the particular Github repository .after that we need to create the action on git hub.

Another major step we have to do is to integrate the Azure Database for MySQL server with Azure App service.

Azure Database for MySQL is a relational database application operated by a community version of MySQL. As a service offering, it is a completely managed database that can accommodate mission-critical workloads with consistent performance and robust scalability. Build MySQL applications with Azure Database using our choice of open-source software and framework.

With this resource, MS Azure provides us the ability to configure server-level Firewall rules with our DB resource. The server created by default is protected by a firewall and is not publicly available. To access your IP, go to the Azure server resource and select portal and Connection Security for your server resource from the left-hand menu.

For each and every time It's not efficient to fetch data from the SQL Db. as a remedy for that, we can add cache memory and we can get recently featured data from that cache memory.inorder to fulfill this requirement MS Azure provide another resource call Azure Cache for Redis.

Azure Cache for Redis achieves superior system throughput and latency by saving data in memory rather than on disk. It continuously serves read and write requests in one-digit milliseconds, providing exceedingly fast cache activities to scale data thirds as application loads rise.

The next feature we have to add to our web solution is the file storing functionality.

for that, we have to create another separate service with the help of Azure Function.

Azure Functions is an event-driven, compute-on-demand solution that expands the current Azure application platform with the ability to incorporate code triggered by events occurring in Azure or third party infrastructure as well as on-premise systems. Azure Functions enables developers to act by connecting to data sources or messaging solutions making it easy to process and respond to events.

after we creating the function we can add the source code of that function into the CODE+TEST window

The next thing we have to do is the integration part of the function. that means we can set up the flow or the input and output process of the function . for this web solution, I define the storage location as the Azure Blob Storage.

Azure storage account contains all of your Azure Storage data objects: blobs, files, queues, tables, and disks. The storage account provides a unique namespace for your Azure Storage data that is accessible from anywhere in the world over HTTP or HTTPS. Data in your Azure storage account is durable and highly available, secure, and massively scalable.

At the same time, we create an Azure function, it will automatically initialize the Storage account as well.

After the implementation of the file storage function, we can store a file with the front end application.

After uploading the intended file with front-end application we can retrieve that stored from the Storage Explorer.

BLOB CONTAINERS->OUTCONTAINER->image 1.png

The next feature we have to add is the monitoring and reporting functionality. We have to use the azure insight application resource in order to implement that functionality.

Application Insights, an Azure Monitor feature, is an Application Performance Management ( APM) extensible service for developers and DevOps professionals. Use this to monitor live Apps. It will detect performance anomalies instantly, and includes powerful analytics skills to help you diagnose issues and understand what users actually do with app.

Now we have to add Application Insight with our application. And after that, we have enabled and define the application insight on each app service.

enabling application insight on each app service

with this resource, we can create a customizable application dashboard as well

According to the Architecture provide at the beginning it encourages us to use Azure CDN in order to host the web application front end. But Microsoft doesn't provide that resource with the free subscription. Instead of that, we can use another resource call Azure Static Web App.

Azure Static Web App is a service that automatically builds and deploys full stack web apps to Azure from a GitHub repository.

The next thing we have to set up is the front door.

Azure Front Door allows users to specify, manage and monitor our global web traffic routing by optimizing high-availability for best performance and quick global failover. With Front Door, you can turn your global customer and business applications into scalable, high-performance, modern, personalized apps, APIs, and content that reach a global audience.

With the help of the front door, we can get a proxy like protection for the services that we have created. It will mask the URLs of that backend services.

after that, we can add a Web Application Firewall to implement more complex protections on our web services.