DEV Community

Sardar Mudassar Ali Khan
Sardar Mudassar Ali Khan

Posted on • Updated on

Application Deployment On Azure Cloud using Azure Web App Service

Introduction

App Service Web Apps lets you quickly build, deploy, and scale enterprise-grade web, mobile, and API apps running on any platform. Meet rigorous performance, scalability, security and compliance requirements while using a fully managed platform to perform infrastructure maintenance.

Open Your Azure portal

First you need to open your Microsoft azure account after that go to home and then select the subscription where you want to create azure web app.

Create Azure Web App

Select the azure app from resources then follow the steps that are necessary for the azure application Select a subscription to manage deployed resources and costs. Use resource groups like folders to organize and manage all your resources.

Image description

Create the Azure Resource Group.

Now Select the Azure Subscription and create the Azure resource group.

Image description

Select the Name of Your Application

Select the Azure App Name and I am selecting my web app name is DOTNET-Auth-API

Image description

Select the Runtime Stack

After selecting the name and Recourse group now select the code version for your application and my application is using Microsoft Azure Asp.Net 6 so I am selecting .NET 6 Latest stable Version.

Image description

Create App Service Plan

An App Service plan defines a set of compute resources for a web app to run. These compute resources are analogous to the server farm in conventional web hosting. One or more apps can be configured to run on the same computing resources (or in the same App Service plan).

Image description

Select the pricing plan.

Now Select the pricing Tier Dev/Test, Production, Isolated

Image description
Now our purpose of application is development and testing so we are selecting Dev/Test

Image description

Select the Recommended Pricing Tier

Here you can see the recommended pricing tier and we are selecting the BI Green.

Image description

Select the Deployment Option.

Enable GitHub Actions to continuously deploy your app. GitHub Actions is an automation framework that can build, test, and deploy your app whenever a new commit is made in your repository. If your code is in GitHub, choose your repository here and we will add a workflow file to automatically deploy your app to App Service. If your code is not in GitHub, go to the Deployment Center once the web app is created to set up your deployment.

Image description

Select the Net Working Options

Web Apps can be provisioned with the inbound address being public to the internet or isolated to an Azure virtual network. Web Apps can also be provisioned with outbound traffic able to reach endpoints in a virtual network, be governed by network security groups or affected by virtual network routes. By default, your app is open to the internet and cannot reach into a virtual network. These aspects can also be changed after the app is provisioned.

Image description

Select the Azure Monitoring Options

Azure Monitor application insights is an Application Performance Management (APM) service for developers and DevOps professionals. Enable it below to automatically monitor your application. It will detect performance anomalies, and includes powerful analytics tools to help you diagnose issues and to understand what users actually do with your app.

Image description

Select the Tags Options

Tags are name/value pairs that enable you to categorize resources and view consolidated billing by applying the same tag to multiple resources and resource groups.
Note that if you create tags and then change resource settings on other tabs, your tags will be automatically updated.

Image description

Review and Create

Now Review all your Steps and Create the Azure App.

Image description
Now hit the create button and then Azure app creation process has will start.

Image description
You can see in the given below picture is application deployment process is in progress.

Image description
Now you can see that our deployment process succeeded and we can go to the Created resource.

Image description

Our Azure App Creation Process Has Been Done.

Image description

Now you need to hit the Azure App URL.

Image description

Application Status

Now You Can See that Our Application is Live on the Azure Cloud.

Image description

Get the publish profile.

Now you need to download the publish profile for deployment of Asp.net core application using Visual Studio.

Image description
We have Downloaded the Our Application Publish Profile

Image description

Publish the App Using Visual Studio

Now we will open the visual studio and then open the Auth API Project after the Right click on project select the publish Option.

Image description

A new window will be visible in front of you and you can see the we have the option for Add Publish Profile. Click the button add publish profile.

Image description
Now you can see that we have the option for Import Profile and we will import the profile that we have downloaded from the Azure App Service portal. Click the Import Profile Option.

Image description
Browse the file for Azure App Publish Profile where you have saved the file.

Image description

Select the Publish Profile

I have selected the file from the downloads folder now click the finish button after some processing visual studio will get the all information the azure portal for our Azure App.

Image description

Now you can see that visual studio get all the information about our Azure App you can see the URL of our application.

Image description

Now Hit the Publish Button after that publishing of our application on azure cloud has been started.

Image description

Deployment Status

Our Publication on Azure Cloud has been done. You can see the publication status successful.

Image description

Application Deployed on Azure Cloud

Now Hit the URL Of Azure App after URL Just Write URL OF YOUR APPLICATION/Swagger You can see that our all APIS Are Now Live on Azure Cloud Using Azure App service.

Image description

Top comments (0)