Solution architecture: Continuous integration and deployment (CI/CD) for Azure Web Apps with Visual Studio Team Services

CD-CD pic Azure

For my previous employer I was the architect for designing an e-commerce platform within Azure. A important requirement was to setup a microservices architecture and also a Continuous integration and deployment solution pipeline, so the e-commerce platform would be very agile and dynamic. With some other requirements the best solution for our case, was to work with Azure App Services which enabled us to make continuous web-app deployment easier. Azure App Service is a fast and simple way to create web apps using ASP.NET, Java, Node, or PHP. Our development team was coding with ASP.NET. Making these web apps durable and evergreen requires a continuous integration and continuous deployment (CI/CD) pipeline to push each of our changes automatically.

Our development team worked with Visual Studio Team Services so CI/CD needed to be compliant with this tool. Enabling the Web Apps feature of App Service in Visual Studio Team Services for CI/CD to access continuous-integration and continuous-deployment tools. Visual Studio Team Services provides a Git repository for version control, a build system for continuous integration, and a release-management system for continuous deployment.  Also we used Jenkins for CM. Using these tools, we could track each commit into the repository, through various environments, and into our production website. We used Azure Application Insights to close the feedback loop, correlating problems that occur in production back to a specific deployment and to specific code changes in that deployment.

 

I followed these next steps for my first CI/CD solution in Azure to build and deploy to an Azure Web App. These steps are based upon the best practices of Microsoft Solution Architectures, this helps you to design and implement secure, highly-available, good performance and resilient solutions on Azure.

VSTS

Visual Studio Team Services (VSTS) provides a highly customizable continuous integration (CI) and continuous deployment (CD) pipeline to automatically deliver your ASP.NET Core web app to Azure App Services. In these steps I used the Azure portal to configure an entire CI/CD pipeline, and then see it build and deploy your app.

You can continuously deliver your app to Azure.

A typical release pipeline for web applications

After you commit and push a code change, it is automatically build and then deployed. The results will automatically show up on your site.

Prerequisites

  • A VSTS account. If you don’t have one, you can create one for free. If your team already has one, then make sure you are an administrator of the team project you want to use.

Get the sample code

To configure a CI build process for your app, the source code needs to be in a version control system. You can use VSTS as your version control system, since VSTS provides a full-featured Git server. Alternatively, you can use GitHub.

I followed these steps for a simple way, get the following sample app code and put it into your own version control repository:

https://github.com/adventworks/dotnetcore-sample

To import the sample app into a Git repo in VSTS or TFS:

  1. On the Code hub for your team project in VSTS/TFS, select the option to Import repository.
  2. In the Import a Git repository dialog box, paste the above URL into the Clone URL text box.
  3. Click Import to copy the sample code into your Git repo. 

Create an Azure web app using the portal

If you already have a web app that you want to use, you can skip this and move to the next step.

  1. Sign into the Microsoft Azure portal.
  2. Choose the + icon in the left navigation bar, then choose Web App.Selecting the Web App type to create

    If you don’t see Web App in the list, use the search box to find it.

  3. At the bottom of the introduction page, choose Create.Starting to create the web app
  4. Enter a name for the new web app. You’ll see a green checkmark when the name is unique. Then choose Create.Entering the details for the web app
  5. Choose the App Services icon in the left navigation bar. After a few minutes, you’ll see the new web app appear in the list. Ensure that it is running.Checking the new web app is running

You’re now ready to start using your new web app.

Configure continuous delivery

  1. In the Azure portal, open your web app’s blade. Choose Continuous Delivery and then choose Configure.Starting Continuous Delivery configuration
  2. Select Choose repository and select VSTS for the code repository. Select the project, repository, and branch into which your imported the sample code. When you’re done, choose OK.Configuring the source code repository
  3. Select Configure Continuous Delivery and choose ASP.NET Core. When you’re done, choose OK.Configuring the app type
  4. Skip the other two steps – Test and Deploy – and choose OK to complete the configuration of continuous delivery. You’ll see how to use the test and deployment options in other tutorials.Completing the configuration
  5. When you choose OK, Azure Continuous Delivery configures and kicks off a build and deployment in VSTS. When the build completes, the deployment is automatically initiated. After a while, the deployment is completed. Choose Refresh Logs to see this in the Activity Log.Viewing the log when deployment is complete
  6. Open a new browser window and navigate to your new web at http://your-app-name.azurewebsites.net.

Edit the code and see it deployed

Now that you have a completely automated CI/CD pipeline, any changes that you make to the app are automatically built and deployed by VSTS. To try this, make a change to the app and commit that change to the Git repository.

    1. Both VSTS and GitHub feature a full code editor within the web browser. Using the browser, navigate to Views/Homes/Index.cshtml file in your repository.
      In the VSTS Code hub, edit the Views/Home/Index.cshtml file.edit action in asp.net core view

    2. Make a simple change above the slide carousel div tag:
      htmlCopy
      <h1>Demo of CI/CD!!</h1>
      
    3. Commit your changes to trigger a CI build. When the build completes, it triggers an automatic deployment.

+

It takes several minutes for the build and deployment to execute. Wait until the deployment is done, then verify that your changes are live in your web browser: http://your-app-name.azurewebsites.net.

You’re now ready to collaborate with a team on an ASP.NET Core app with a CI/CD process that automatically deploys your latest work to your web site.

Next steps

When you configured your CI/CD process in this steps, a build and release definition were automatically created in your VSTS project. You can modify these build and release definitions to meet the needs of your team. To learn more see one of these tutorials:

Sources: Microsoft; Azure solution architectures

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s