Deploy a .NET Application using Azure CI/CD Pipeline

8 min readNov 27, 2023

Step-by-step guide on how to deploy a .NET calculator app in Azure using app services, azure devops and github.

Automating a deployment process is key to achieving efficiency and reliability that is why we will be using CICD on this project, this will help in saving time, effort and energy needed in constantly having to trigger the deployment ourselves.

Objective:

In this project, we’ll explore how to deploy a .NET application using the Azure CI/CD Pipeline. By the end of this guide, you’ll have a streamlined deployment process that ensures your application is delivered seamlessly to your Azure environment.

Prerequisites

Before diving into the tutorial, make sure you have the following prerequisites in place:

An Azure account.
A .NET application ready for deployment.
Basic knowledge of Azure DevOps and Azure Portal
Basic knowledge of GitHub and git commands

Steps Overview

Set up an Azure DevOps Project:

Navigate to Azure DevOps and create a new project.

2. Create a Service Principal to Connect Between Azure DevOps and Azure Portal:

In Azure Portal, create a new service principal.
Assign roles and create a secret ID for the service principal.

3. Configure Service Connections:

In Azure DevOps, configure service connections to connect Azure DevOps to your Azure resources.

4. Create Azure WebApp:

5. Create a Build Pipeline:

Configure a build pipeline in Azure DevOps.
Use a GitHub repository and edit the azure-pipeline.yml file.

6. Run the Pipeline to Deploy the .NET App:

Trigger the pipeline to deploy your .NET application to Azure.

7. Configure CI/CD for Azure Pipeline:

Edit the pipeline to configure continuous deployment triggers.
Choose the branch and settings for CI/CD based on your project requirements.

8. Verify CI/CD Pipeline via GitHub Commit:

Make changes to your .NET application code, commit the changes in GitHub, and observe the pipeline automatically triggering the deployment

Step 1: Set up an Azure DevOps Project

Navigate to Azure DevOps and create a new project.

On the top right corner, click on “New Project”

Step 2: Create a Service Principal to connect between Azure DevOps and Azure Portal.

To do this navigate to Azure Portal and create a new service principal or you can use an existing one if you have.

To create a new one; search for app registration at the top search bar

Fill up the details as shown, I will be using the Single tenant for “supported account types” and web for my “authentication response URI”

When it is created, we will need to create a secretID. Select it and click on certificates & secrets on the left menu. Click New client secret , write a description and choose the expiring date for the secret. In my case, I will leave everything as default and click add . This will create the secret for me.

NOTE: secretID is a very sensitive credential make sure to keep it secured, this is just for test purposes and will be deleted after this lab.

After creating the secretID , we need to assign roles to it. To assign roles , click on App roles at the left menu bar. Click create app role , then insert the details as shown below. Then Apply it.

I will be using both option for my “allowed member types”, you can choose any of the options based on your preference or project specification.

When you click Apply the roles are then assigned and enabled as shown.

Step 3: Configure the service connections

At the Azure devops portal, go to your new project page and click on the project settings at the bottom left of the page as shown below.

This will open a new output, from the menu on the left…

Click on Service connections > Create Service connection > Select AZure Resource Manager > Then Next

You can either select Service Principal (automatic) or Service Principal (manual) . If you use manual, you will have to manually input the service principal ID, tenant ID, secret value, subscription and other values.

Note: If you don’t have a resource group yet, you may have to create it first.

Click on this documentation “here” to learn how to create one.

Service connection name is the name of your service principal

Step 4: Create Azure WebApp

Login into the azure portal and search for app services , click create and then click on Web App in the drop down menu.

Use the same resource group as the one used earlier. Resource Groups will help you to group all your application resources together.

Make sure to change the runtime stackas shown. After inputting all the details, leave everything as default and click create.

Once the app deployment is completed. We will need to verify it is running. To do this, click on the resource, click or copy the domain url to view the page.

This is the default webapp page

We will have to deploy our code to make this page run our application. To do this, we will be pushing our code into through azure devops pipeline.

Step 5: Create a Build Pipeline

Now, let’s configure a build pipeline to compile the .NET application, run tests, and generate artifacts.

Make sure you already have your code in github, if you don’t have one you can clone, or fork my repository from this github url. https://github.com/ougabriel/online-calculator-app.git

Since this is a github project and our code is pushed there, we will be selecting github as shown

A list of all the repositories in your github will be displayed. Select the right repo you’d like to deploy. NOTE: You may have to login into your github account if you haven’t already done so.

Do NOT run the azure-pipelines.yml configuration, we will be editing this to suit our project. Click on the drop down menu where you have runand click save .

NOTE: Once It is saved it will automatically add a .ymlfile on your github repo

azure-pipelines.yml automatically added to repo

Step 6: Run the pipeline to deploy the .NET app

Edit the pipeline

Delete the default configuration code in the pipeline. Go to the Microsoft Learn page with link below. Copy the Example: Deploy a .NET app configuration code, paste and edit it as shown using your own unique details. Your azure Subscription is the name of your service principal which was created earlier. (found inapp registration) ). Your appName is the name of your webapp (found in app services ) .

https://learn.microsoft.com/en-us/azure/app-service/deploy-azure-pipelines?view=azure-devops&tabs=yaml

Run the pipeline to deploy the .NET app.

Once the pipeline has successfully been deployed, go to azure portal and click the webapp link again or refresh the page you opened earlier.

or click on the job > AzureWebApp > click on the App Service application URL as shown

The .NET should be running now as shown below. Test the app to confirm it is running as it should.

Step 7: Configure CI/CD for Azure pipeline

To do this, we will have to edit the pipeline, click on the three dots as shown, and then click triggers

After clicking on triggers , check the “Override the yaml CI trigger”. NOTE: you can also choose the branch to run this, this can either be on your main branch or any other specified branch.

Step 7: Verify the CICD pipeline via github commit

Depending on how you cloned the repo, you can edit the code on vscode or directly on GitHub then commit the changes. This change will automatically trigger the pipeline and deploy the changes.

Here, I will be changing the background color of the .NET app from green to blue. Edit the index.cshtml section of the code as shown below.

@model Calculator

@{
    ViewData["Title"] = "Home Page";
}

<style>
    .text-center{
        background-color:blue;
        border:2px solid black;
    }
</style>
<form asp-action=""Index"">
    <div class="text-center">
        <h1 class="display-4">Calculator</h1>
        <p><label>First Value</label></p>
        <p><input type="number" asp-for="value1" /></p>
        <p><label>Second Value</label></p>
        <p><input type="number" asp-for="value2" /></p>

        <p>
            <input type="submit" value="add" class="btn btn-primary" asp-for="calculate" />
            <input type="submit" value="sub" class="btn btn-danger" asp-for="calculate" />
            <input type="submit" value="mul" class="btn btn-success" asp-for="calculate" />
            <input type="submit" value="divi" class="btn btn-warning" asp-for="calculate" />
        </p>

        <p><label>Result</label></p>
        <p><input type="number" asp-for="@ViewData["result"]" /></p>

    </div>
</form>

Here, we can see the pipeline is triggered to show the changes we just made.

Confirm the changes by refreshing the app. We now have a new background-color.

You can try this with any color of your choice.

Conclusion

Congratulations! we’ve successfully deployed a .NET application using Azure CI/CD Pipeline. By automating our deployment process, we’ve not only saved time but also enhanced the reliability and consistency of your software releases. Explore additional features and customization options in Azure DevOps to further optimize your development workflow.

Additional Tips and Resources

Ref:

#azuredevops #azure #devops #cicd #deployment #.netapp #onlinecalculator #webapp #gabrielokom #gabriel #okom #devopsproject #azureproject #juniordevopsproject #azuredevopsproject #appservices