Azure Web App Tutorial

Microsoft Azure Web App Service has transformed the way organizations deploy and manage web applications. In this comprehensive article, I’ll walk you through everything you need to know about this robust platform-as-a-service (PaaS) offering. In this Azure tutorial, we provide a comprehensive overview of Azure Web Apps.

Azure Web App Tutorial

What Is Azure Web App Service

Azure Web App provides a platform for building various types of mobile applications and web applications. There is no need to deploy, configure, and maintain your Azure virtual machine. 

Azure Web App provides a hosting service that developers can use to develop different kinds of mobile applications or web applications. 

Why Choose Azure Web App Service?

Below are the recommendations for the Azure Web App Service for numerous reasons:

1. Simplified Infrastructure Management

Gone are the days when developers at companies like Walmart or Bank of America needed to requisition physical servers, wait for IT to set them up, and then maintain them indefinitely. With Azure Web App Service, infrastructure management is abstracted away, allowing teams to focus on code rather than server maintenance.

2. Support for Multiple Programming Languages and Frameworks

One of Azure Web App Service’s strongest features is its versatility. The platform supports a wide variety of programming languages and frameworks, including:

• .NET
• Java (Java SE, Tomcat, and JBoss)
• Node.js
• Python
• PHP
• Ruby
• Go

This flexibility has proven invaluable for organizations with diverse technical stacks or those undergoing digital transformation.

3. Built-in CI/CD Integration

Continuous integration and continuous deployment (CI/CD) have become essential practices for modern development teams. Azure Web App Service seamlessly integrates with:

• GitHub
• Azure DevOps
• Bitbucket
• GitHub Actions
• Jenkins

This integration allows teams to automatically build, test, and deploy code changes, accelerating the delivery pipeline.

4. Enterprise-Grade Security

Azure Web App Service offers:

• SSL/TLS encryption
• IP restrictions
• Authentication integration with Azure Active Directory
• Managed identities for accessing other Azure resources securely

5. Global Scale with Local Compliance

With Microsoft’s extensive global network of data centers, companies can deploy applications close to their users while maintaining compliance with regional data regulations.

Benefits

There are various benefits of using Azure Web App

• Supports multiple languages like Java, .Net, PHP, etc
• It promotes continuous deployment and integration
• High availability and scalability support.
• Supports other platform integration. It can easily integrate with different platforms.
• No need to take on the headache of infrastructure maintenance.
• It supports various operating systems, including Windows and Linux.

In terms of deploying the Web Apps

• It supports deployments of web applications using Visual Studio, WebMatrix, and other tools.
• It supports copying different files manually by using FTP
• Easy Synchronization of files and folders to OneDrive or Dropbox

Azure Web App architecture

The architecture below illustrates how various Azure services interact with one another.

Resource group: This is a logical container containing all the Azure resources.

App Service plan: This provides the managed virtual machines that host your applications.

Azure App Service: This is a platform for creating and deploying your mobile or web applications.

Azure DNS: This is a hosting service for the Domain. You can create and maintain your domains.

Storage blob: Azure storage account with a blob container used to store the diagnostic logs.

Azure Active Directory: For authentication purposes.

Cost Optimization Strategies

Below are some strategies for managing Azure Web App Service costs:

1. Right-size Your App Service Plan

Compare your actual usage against your plan’s limits. Often, applications are overprovisioned.

2. Leverage Dev/Test Pricing

For non-production environments, use dev/test subscriptions, which offer significant discounts.

3. Consider Reserved Instances

If you’re committed to using Azure long-term, reserved instances can save up to 55% compared to pay-as-you-go pricing.

4. Implement Auto-scaling

Rather than provisioning for peak load, use auto-scaling to match resources to current demand.

Comparing Azure Web App Service Tiers

Here’s a quick comparison of the most common tiers:

Azure web app authentication

This service has built-in support for authentication and authorization.

Enable the web app authentication and authorization for the back-end application

To configure the authentication for the back-end apps, you can use the steps below

1. Log in to the Azure portal (https://portal.azure.com/)

2. Search for the Resource groups

3. Click on the search result Resource groups and select your resource group from the list.

4. From your resource group page, click the Overview tab. Select your back-end application from the list.

5. On your app’s page, select Authentication/Authorization from the left menu.

• Select ‘App Service Authentication’ as ‘On’.
• Select ‘Log in with Azure Active Directory’ for the ‘Action to take when request is not authenticated’ option.
• Under Authentication Providers, you need to select Azure Active Directory.

6. Click on the Azure Active Directory. Select Express for the Management mode from the Azure Active Directory Settings page.

• Keep the other options, and then select the OK button.

• Or you can select the Existing AD App for the Management mode options.
• Select your Azure AD App by clicking that option. Now, click the OK button and then the Save button. You will see a notification on Successfully saved.

• Select Authentication / Authorization again. Click on the Azure Active Directory(Configured) option.

• Now, you can see the Azure app you have created. Click on the Azure AD App.

• Copy the client ID to your notepad. Click on the OK button.

Enable the web app authentication and authorization for the front-end application.

Above, we have already discussed how to enable the web app authentication and authorization for the back-end application.

To enable the web app authentication and authorization for the front-end application, follow the steps above but skip the last step, which is to copy the client ID. No need to do this step.

The back-end app now requires Azure Active Directory sign-in from the front-end app. To do this, you need to configure the three things

• Grant permission to the front-end access to the back-end
• Configure App Service to return a usable token
• Use the token generated above in your code

Grant permission to the front end to access to the back end

We need to perform the following configurations to grant the front-end access to the back end.

• Log in to the Azure portal (https://portal.azure.com/)
• Search for the Azure Active Directory

• Click on the App Registrations link. Now, you click on the front-end app name under All Applications.

• Now, click on the API permissions link from the front-end application page.

• Click on the Add Permission button under the Configured Permissions section.

• From the Request API permissions page, please search for your back-end app under the APIs my organization uses tab.
• Click on the back-end app.

• Select the Delegated permissions button under What type of permission does your application require?
• Tick(select) the user_impersonation option under the Permission option.
• Now, click on the Add Permissions button.

• Now you can see that the user_impersonation permission has been added successfully.

App Service Configuration to return a user access token

In this step, we will configure the App Service authentication and authorization to give you a user access token for accessing the back-end application.

• Now search for the App services. Click on the front-end web application, then select the Resource Explorer link from the left menu under Development Tools.

• Click on the Go button in the Resource Explorer window. Now, Azure Resource Explorer is open with your front-end app selected in the resource tree.
• Select the Read/Write option at the top.

• In the left browser, navigate to Config> AuthSettings.
• In the AuthSettings view, click Edit and set the value below for “additionalLoginParams”. Here, the client ID refers to the ID of the back-end app that you copied earlier.

"additionalLoginParams": ["response_type=code id_token","resource=<Client id of your back end application>"],

• Now, you click on the Put button to save the changes.

Check out: Azure Web App Service Plan

Call the API from the server code

Here, in this step, we will enable our code to make authenticated calls to the back-end API

In your class file in the front-end application, in the constructor, you mention the following code.

public override void OnActionExecuting(ActionExecutingContext myappcontext)
{
    base.OnActionExecuting(myappcontext);

    _client.DefaultRequestHeaders.Accept.Clear();
    _client.DefaultRequestHeaders.Authorization =
        new AuthenticationHeaderValue("Bearer", Request.Headers["X-MS-TOKEN-AAD-ACCESS-TOKEN"]);
}

Save all your changes. In the local terminal window, deploy your changes to the front-end app. You can use the following git commands to deploy

git add .
git commit -m "Authorization Header"
git push frontend master

Azure Web App Example

Find an Example of an Azure Web App now.

Conclusion

Azure Web App Service provides an effortless way to deploy and manage web applications without the overhead of infrastructure management. Whether you’re a startup or any organization, this platform offers the right balance of simplicity, flexibility, and enterprise features.

Azure Web App Service is one of the most versatile and developer-friendly platforms available. In this Azure tutorial, we provide a comprehensive guide to Azure Web Apps. I hope you enjoyed this article !!!

You may like the following Azure tutorials:

• Azure Web App vs App Service
• Azure web app for containers vs AKS vs container instances
• Azure Domain Name Service
• Why is Azure So Expensive? The Areas You Are Neglecting and Their Solutions

Bijay Kumar

I am Bijay, a Microsoft MVP (10 times) having more than 17 years of experience in the software industry. During my IT career, I got a chance to share my expertise in SharePoint and Microsoft Azure, like Azure VM, Azure Active Directory, Azure PowerShell, etc. I hope you will learn from these Azure tutorials. Read more