Deploy ASP.NET Core web app to Azure App Service using VS Code

In some of my previous articles I discussed using Visual Studio Code and a set of extensions to create ASP.NET Core web apps and Web APIs. In this article I will show you how you can deploy an ASP.NET Core web app to an Azure App Service.

First things first. Begin by creating a new ASP.NET Core MVC app using VS Code. You can also use any of the previously developed app for this example but it's better to create a new app so that you can follow along the instructions given in this (and the next) article.

Just to hint at the new app creation process I am giving the first couple of steps below:

Once created, open appSettings.json file and add the following connection string section to it:

"ConnectionStrings": {
    "AppDb" : "Data Source=.;
    Initial Catalog=Northwind;
    User ID=sa;
    Password=******;
    encrypt=false"
    }

Then add the Employee class to the Models folder as shown below:

public class Employee
{
    public int EmployeeID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Title { get; set; }
}    

Add NuGet package Microsoft.EntityFrameworkCore.SqlServer using the NuGet extension (View | Open View | NuGet panel).

Also, add the AppDbContext class to the Models folder like this :

public class AppDbContext : DbContext
{
    public AppDbContext
    (DbContextOptions<AppDbContext> 
        options) : base(options)
    {
    }
    public DbSet<Employee> 
        Employees { get; set; }
}

Register the AppDbContext with DI container by adding this code to Program.cs file.

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();

var connStr = builder.Configuration.
GetConnectionString("AppDb");
builder.Services.AddDbContext
<AppDbContext>(options => 
    options.UseSqlServer(connStr));    
    

This code retrieves the database connection string from the appSettings.json file and then registers the AppDbContext with the DI container by passing the connection string information.

Open the HomeController class from Controllers folder and modify the Index() action as shown below:

public class HomeController : Controller
{
    private readonly ILogger<HomeController> _logger;
    private readonly AppDbContext db;

    public HomeController(AppDbContext db,
    ILogger<HomeController> logger)
    {
        this.db = db;
        _logger = logger;
    }

    public IActionResult Index()
    {
        
        return View(db.Employees.ToList());
        
    }
    // other actions and code 
}    

Here we passed a list of Employees to the Index view.

Now open Index.cshtml and output the employee data as shown below.

<ul>
    @foreach(var item in Model)
    {
        

            @item.EmployeeID
            . 
            @item.FirstName 
            @item.LastName 
            (@item.Title)
        
    }
</ul>

Run the application to confirm the output. The following screen shot shows a sample run of the app.

Now that our sample app is ready, we will publish it to a local folder. To do open nVS Code terminal window and issue this command (ensure that you are in VsCodeDeployDemo folder) :

dotnet publish -c Release -o ./bin/Publish    

This command will generate the deployable output in the Bin/Publish folder as shown below:

So far so good. Now we will take this published output to an Azure App Service.

We will deploy our app to App Service using two techniques -- manual ZIP file deployment and Azure App Service extension for VS Code.

To deploy our web app to an App Service using manual ZIP file deployment technique, we need to create a new Azure Web App using the Azure portal.

So, log in to the Azure portal and go to the App Service section.

Click on the Create | Web App option and fill in all the details for the new Azure Web App such as name and pricing plan.

And --

Next, go inside the Publish folder and ZIP all the files as a single ZIP file named VsCodeDeployDemo.zip.

Then navigate to this URL in a browser :

https://******
.scm.azurewebsites.net/ZipDeployUI    

Substitute ****** with youu Azure Web App name. This will open Kudu UI as shown below :

Currently there are no files. Drag and drop VsCodeDeployDemo.zip in the file explorer of this UI. This will automatically unzip the content and the file explorer will look like this :

Open another browser tab and navigate to the Azure Web App you just deployed.

At this stage you will be greeted with an error message like this :

We get this error because during development we connected with our local installation of Northwind database. After deployment our code can't connect with that database. We will fix this error and redeploy our web app using the second technique -- VS Code Azure App Service extension.

Install the Azure App Service extension in Visual Studio Code using the Extensions pane.

Now we need to deploy the Northind database in Azure SQL Server and grab its connection string. To keep this article focused on the topic of deployment, I am not going to discuss the process of deploying the Northwind database to Azure. I am going to assume that you have done that already and have access to its database connection string :

Open the appSettings.json file and replace the development time connection string with this one:

"ConnectionStrings": {
    "AppDb" : "Server=tcp:******.database.windows.net,1433;
    Initial Catalog=Northwind;
    Persist Security Info=False;
    User ID=******;Password=******;
    MultipleActiveResultSets=False;
    Encrypt=True;
    TrustServerCertificate=False;
    Connection Timeout=30;"
    }    

Make sure to replace ****** with your values.

Publish the web app again using the same dotnet publish command we used earlier.

Then locate the Publish folder in the VS Code Explorer (not Solution Explorer). Right click on it and select the Deploy to Web App shortcut menu option.

Follow the prompt and pick the same Azure Web App from the list that you created during ZIP file deployment. It will show you the deployment progress message like this :

Once the deployment is complete it will show a success message like this :

Click on the Browser Website button to open tha website in a browser window. This time it should show the data from the Employees table:

In this example you deployed the files to an existing Azure Web App. If you want you also create a new Azure Web App from VS Code.

To do that click on the Azure option from the left side pane and expand the App Services section.

In this example we stored the database connection string in appSettings.json file. For Azure web apps there are a few better approaches for storing sensitive information such as the connection string. We will discuss them in the next article.

That's it for now! Keep coding!!