Deploy ASP.NET web app to Azure App Service
In this post I am going to describe hot to deploy ASP.NET web app to Azure App and connect to an Azure SQL Database Service,
Azure App Service is an HTTP-based service for hosting web applications, REST APIs, and mobile back ends. You can develop in your favorite language, be it .NET, .NET Core, Java, Ruby, Node.js, PHP, or Python. Applications run and scale with ease on both Windows and Linux-based environments.
There are different deployment environments: Visual Studio, Visual Studio Code, Azure CLI, Azure PowerShell, Azure Portal
In this post we take the Visual Studio.
We shall do the following steps:
- Create an ASP.NET web app
- Create the Azure App Service
- Publish web app to App Service
- Update the web app and redeploy to App Service
- Manage the Azure Web app on Azure portal
Prerequisites
- An Azure account with an active subscription. Create an account for free.
- Visual Studio 2022 with the ASP.NET and web development workload.
Create an ASP.NET web app
- .Open Visual Studio and then select Create a new project
- In Create a new project, find, and select ASP.NET Core Web App, then select Next.
- In Configure your new project, name the application MyFirstAzureWebApp.
Click Next
4. Select .NET 6.0 (Long-term support).
5. Ensure Authentication Type is set to None. Select Create.
Project is created, in Visual Studio press F5, to start Web App then yo can see:
Now ASP.net Core Web App is created. We can add code and functionality if we want to do any time and after that we can redeploy it.
The next step is create Azure App Service to publish the Web App you have created in above.
Create Azure App Service (via Visual studio)
Follow these steps to create your App Service resources and publish your project:
- In Solution Explorer, right-click the MehzanAzureWebApp project and select Publish.
-
Publishing web app to Azure via visual studio - In Publish, select Azure and then Next.
- Choose the Specific target, either Azure App Service (Linux) or Azure App Service (Windows). Then, select Next.
- Your options depend on whether you’re signed in to Azure already and whether you have a Visual Studio account linked to an Azure account. Select either Add an account or Sign in to sign in to your Azure subscription. If you’re already signed in, select the account you want., In my case I have an account and I am logging in.
Login to Azure account - Press to the Account is shown in the right upper corner.
Creating Azure App Service on VS - You see your subscription, and searching for App Service in case you have, If you haven’t press to + Create New to create a new App Service.
- Press + Create New then you can have the following:
Creating Azure App Service - Give you a suggestion for names of App Service, Resouce group Hosting Plan, either accept this or change and press to the Create button.
I Have change these to MehzanAppService, MehzanRCG, and MehzanHostingPlan as you see in the following:
10. press to Create button then you can see the following:
11. Press to Finish button to create your Azure App Service, It takes a little time to create it. After creating it shows you see a path to the MehzanAppService – Web Deploy.pubxml file in your local directory shown as following:
12. Press to Close button, then go back to the Visual studio and in Visual Studio, you see that it is ready for Publish, You can see yor Azure App Service configuartion ans shown:
Publish web app to App Service
In Visual Studio press to Publish button Then Visual Studio builds, packages, and publishes the app to Azure, and then launches the app in the default browser shown as bellow:
As you see the URl :https://mehzanappservice.azurewebsites.net/ consist of : AppService name (mehzanappservice) + azurewebsites.net.
Now we have created a App Service and published our Web App to this Service. The next step is to modify some thing in the Web App in Visual Studio and redeploy the changes to the App Service.
Update the web app and redeploy to App Service
- In Solution Explorer, under your project, open Index.cshtml.
In the <div>element add the following code after <h1> with the following code<p>This Project is an exmaple how to deploy an ASP.net Core to Azure App Service.</p>
- Save your changes
- To redeploy to Azure, right-click the MehzantAzureWebApp project in Solution Explorer and select Publish.
- In the Publish summary page, select Publish.When publishing completes, Visual Studio launches a browser to the URL of the web app.
Web app modification is redeployed to App Service
Manage the Azure Web app on Azure portal
To manage your web app, go to the Azure portal, and search for and select App Services. then you can see your App Service as follow:
As you see your App Service: MehzanAppService is the only App Service you have.
Press to your app Service then you see the Overview page for your web app, contains options for basic management like browse, stop, start, restart, and delete. The left menu provides further pages for configuring your app.
Clean up resources
In the preceding steps, you created Azure resources in a resource group ( mehzan07). If you don’t expect to need these resources in the future, you can delete them by deleting the resource group (mehzan07).
- From your web app’s Overview page in the Azure portal, select the mehzanRCG link under Resource group.
- On the resource group page, make sure that the listed resources are the ones you want to delete.
- Select Delete, type mehzanRGC in the text box, and then select Delete.
Conclusion
In this post we have created an ASP.net Core Web App in Visual studio and created an App Service in Azure, then published our Web App to App Service. We have done also some modification in web app and redeployed to App Service.
In my next post, I will describes, how to create SQL Database in Azure and connect App Service to this Database
This post is part of Azure step by step