In this short overview, we will go over on how to deploy your ASP.NET Core web page project to Microsoft’s Azure, which is a cloud computing service. This way your web app will be hosted online and others could interact with it by going to the right URL.
As mentioned in a previous post, pros of deploying to Azure (the pricing may vary):
- very easy to do from Visual Studio 2019
- relatively cheap for testing purposes (web apps have free plans, as of writing)
- university students get free credit in Azure
- new accounts get free credit for some time-period
My specifications:
- Visual Studio Community 2019 (version 16.9.3)
- .NET Core 3.1
- ASP.NET Core web UI project (works for any of Razor Pages, MVC, API, Blazor Server-side or Blazor WebAssembly project)
Step 1: Set up the Azure resource for web apps
Go to Azure Portal and click on Create a Resource -> Web App. You will get a view similar to this:
Under the Basics tab you can configure most of your Web App resource. Under Deployment, you could choose to dabble with continuous deployment (CD), however it is not covered in this tutorial. First off, you will need to select a subscription to pay for the Web App (1. on the figure) (don’t worry, we will be able to choose a free plan afterwards), and then specify the resource group (2.). Resource Groups are just grouping names to make it easier to manage and monitor the spending on different Azure services. If you don’t have any resource groups, create a new one and give it a descriptive name.
Then you can choose the name (and essentially the URL) of your web app (3. on the figure). The URL directing to my web app in this case would be https://web-deploy-demo.azurewebsites.net. Next you can select either to publish your c# code (4.) or a Docker container. Docker basically enables developers to encase their programs in a specified environment (in a container) (free intro to Docker here (Tim Corey on YouTube)).
Next you’ll need to say what version of .NET you’re using in your web app code (5.) (.NET Core 3.1 in my case) and if you want the web app to be on a Linux or a Windows-operated server (6.) (I developed on a Windows-computer so I will choose Windows here). For choosing a data center (a region) to host your web app (7.), it’s best to choose one that’s closest to your end users. But pay attention that different regions will have different pricing!
Lastly you will need to select your App Service Plan (basically choosing the throughput and cost option most optimal to you). For that you can select a template from your previous plans or create a new one (8.). The already created plans will have a certain operating system, region, and computing resources tier linked to them. For example here I have selected the AspNetCoreDemos Windows plan, which has the F1 tier capabilities – the price is free, but it’s the slowest and can support a small number of users at the same time (okay for testing projects and learning). If you want to select a faster and more powerful plan for your web app, create a new plan in 8. and then you get the option in 9. to change the plan:
Now when you have set up your Azure Resource, click on the Review + Create button, where you will need to confirm your settings and hit deploy. Deployment may take a few minutes after which Azure Portal will notify you when it’s complete. Then you can move on to the 2nd step which is publishing your actual ASP.NET Core web app project to the currently empty Azure resource.
Step 2: publish ASP.NET Core web app to Azure
When your Azure Resource has successfully been deployed, you can switch over to your ASP.NET Core web application project in Visual Studio. I am currently using Visual Studio Community 2019 version 16.9.3. First you should make sure your project’s target .NET framework matches the one you specified in the Azure Web App resource. For this, right-click on your project and hit Properties, where you would find a similar view as below. For example, in the Azure Portal I specified .NET Core 3.1 and this is exactly what I have been using in my ASP.NET web application project as well:
When this is checked, you can right-click on your project, hit Publish, and a similar view should open as below. You have the option to publish to Azure (which we will choose today), but you could also publish to a Docker Container or a folder (to the then manually upload the files to the web using some FTP client) among other options.
After choosing Azure and clicking Next, you will have the option to choose which Azure Service did you prepare for your web app (in Screenshot 2 before). If you recall, we created a Web App Service to be run on Windows OS, so we would choose the Azure App Service (Windows) here.
Next you have the option to choose which Azure Web App Service you want to deploy to. In the list you can select the name of the App Service that we specified in Screenshot 2 field 3. The Subscription name was already pre-filled. Click Next to continue.
After that you get to choose whether to do a simple publishing to the Azure Web App (what we will select on the figure) or to use Continuous Integration/Continuous Development (CI/CD) type of deployment (basically enabling to incorporate smaller changes to the production code more frequently) (not covered in this tutorial because honestly I am not yet familiar with it). Hit Finish after selecting.
Then you have set up your publishing profile and would then need to specify some last settings. To open the settings window, you can click on any of the pencil icons and a similar view should appear:
The configuration (1. on the figure) is by default Release, but you could choose Debug there if you wanted (I don’t know any good use cases for that yet). The Release mode is faster but with poorer debugging opportunities than the Debug mode. Then you can double-check you have the right target framework (2.) (.NET Core 3.1 here).
* actually, I noticed in a Blazor project I had the .NET Standard 2.1 framework, but in the Azure portal, my Azure Web App’s target framework was still .NET Core 3.1. The .NET Standard is compatible with .NET Core so I think this is why the app works fine.
The next option (3.) is to choose whether you want your app to be framework-dependent (computer must have .NET framework installed, but the app files would be smaller), which I will choose because I have a web app here and the Azure web servers will have the .NET framework installed anyway. When deploying a desktop program (a console or WPF program for example) I have mostly chosen the other option which is self-contained. Self-contained programs will have all the necessary .NET framework code libraries within them, but that also make the programs take up more space.
The next selection is the target runtime (4.), where you can choose from Portable (mobile), or different Windows, macOS or Linux versions. I think in the web app project, it doesn’t actually matter much, because I had chosen the default Portable (or mobile) version, but the web application (web page) runs equally fine on both my computer and phone.
Finally you can check the box for always removing any files in the destination (5.) (in our case any old files in the Azure Web App resource, for example from previous version deployments), and can check your database connection strings (although I have my connection strings in a .json file, so I don’t yet know what checking them here would change).
After hitting Save there is only one thing to do: hit the Publish button and the web app will start building and deployment to Azure. This may take a few minutes, after which a web browser will automatically open and it will redirect to your newly deployed web app!
And this is it, your ASP.NET Core web application has been deployed to Azure and you can access your app by pointing your web browser to the correct URL (set in Screenshot 2). Hope you learned something new from this tutorial and see you next time!
Mariliis Jaago 