Continuous integration, test, and deployment example

Last Update: 6/30/2017

Visual Studio 2017 | Visual Studio 2015 | Team Services

This walk-through demonstrates how you can use the continuous integration and continuous deployment features of Visual Studio Team Services and Microsoft Team Foundation Server (TFS) to build, test, and deploy applications quickly and efficiently to Azure App Services; and run a simple load test after deploying every update.

The walkthrough is divided into the following sections:

It will take around 45 minutes to complete all of the steps.

For information about deploying to targets other than Azure App Service, see Build and deploy your app.

Create the Azure app service

In this section, you'll create the Azure app service instance you'll need to deploy the app.

  1. Sign into the Azure portal using the same credentials as your Visual Studio Team Services account, choose App Services, and add a new service instance.

    Creating an Azure app service instance, adding a new service

  2. Select the simple Web App type for your new service.

    Creating an Azure app service instance, choosing the type

  3. In the confirmation page, choose Create.

    Creating an Azure app service instance, starting to create

  4. Enter a name for the new Web App instance and the new Resource Group, then choose Create.

    Creating an Azure app service instance, entering the parameters

  5. In the navigation bar, select All resources and check that the list contains the new App Service instance. It may take a few minutes to be fully available.

    Creating an Azure app service instance, checking for the new instance

For more details about creating web apps in Azure App Services, see Azure Web Apps Documentation

Create the sample web app

In this section, you will create a simple ASP.NET MVC web app containing unit tests that you can execute as part of the build process.

  1. In Visual Studio, create a new ASP.NET Web Application project from the Web section of the list of installed templates.

    Creating the new project

  2. When prompted, select MVC template and make sure to set (tick) the Add unit tests checkbox.

    Including unit tests in your project

  3. Save and close the new project, then check it into your Visual Studio Team Services or Team Foundation Server repository.

    Checking the sample app into the repository

For more details about creating apps in Visual Studio, see Solutions and Projects in Visual Studio. For more details about using Team Services code repositories, see Share your code with Visual Studio and Team Services Git.

Configure continuous integration

In this section, you will create a build definition that is configured to run automatically when you check in any changes to the sample app, and it will automatically execute the unit tests it contains.

  1. Sign into your Visual Studio Team Services account (https://your-acccount.visualstudio.com) and open the project where you checked in the sample app.

  2. Open the Build & Release hub and, in the Builds tab, choose + New definition.

    Starting a new build definition

  3. Choose the ASP.NET template for the new build definition.

    Choosing the build type

  4. In the next page of the wizard, make sure you set (tick) the Continuous integration... checkbox, then choose Create.

    Specifying continuous integration

  5. For the NuGet restore task in the new definition, use the file selector to select the solution file for your sample web app.

    Specifying the source solution for the Nuget task

  6. For the Build solution task, use the file selector to select the solution file for your sample web app and choose the version of Visual Studio you used to create the app.

    Specifying the source solution for the Visual Studio Build task

  7. Save the new build definition.

    Saving the definition

  8. Queue a new build of the definition.

    Starting a test build

  9. After the build has finished, you see the summary for each task and the results in the live log file. Choose the Tests link.

    Viewing the build results

  10. The Tests tab provides comprehensive results of executing the unit tests defined in the solution. Use the Outcome list to show the tests that passed.

    Viewing the test results

    What are the typical types of tests I can use to validate my app?

  11. Choose the test summary item at the top of the list of tests to open the Test hub in a new browser window, showing a summary and charts for this test run.

    Viewing the test results

For more details about build definitions in Team Services, see Continuous integration on any platform. For more details about unit tests and the results, see Get started with unit testing.

Configure continuous deployment

In this section, you will create a release definition that is configured to start a release that deploys the app automatically when a successful build occurs. After successful deployment, the release will automatically execute a simple load test to validate the deployment.

  1. Close the Test hub browser window and, in the build summary page in the Builds hub, choose the Release icon and then choose Yes to confirm.

    Starting a new release definition

  2. Select the Azure App Service Deployment with Performance Test template.

    Selecting the release definition template

  3. In the next page of the wizard, check that the correct Source (Build definition) is selected and make sure your set (tick) the Continuous deployment checkbox. Then choose Create.

    Specifying continuous deployment

  4. In the new release definition, choose the "pencil" edit icon next to the default name and enter some meaningful name. Press RETURN to save it.

    Editing the definition name

  5. In the new release definition, select the Deploy Azure App Service task. In the parameters pane, select your Azure subscription from the drop-down list and choose Authorize to validate it. Then select your App Service name from the drop-down list.

    Configuring the Deploy Azure App Service task

    If you don't see any subscriptions listed, choose the Manage link and, in the Services page, create a new Azure Resource Manager service endpoint. If you have problems creating the connection, see Troubleshoot Azure Resource Manager service endpoints.

    Creating an Azure service connection

    Can I deploy to a staging slot first, and then to production?

  6. Select the Quick Web Performance Test task and, in the parameters pane, enter the full URL of your Azure App Service instance.

    Configuring the Quick Web Performance Test task

    You can get the full URL from the Overview page for your App Service instance in the Azure portal. The URL will be in the form http://your-app-service-name.azurewebsites.net.

    Finding the app service instance URL

    What other tests can I run to validate my deployment?

  7. Save the new release definition.

    Saving the release definition

  8. Create a release from your definition using the Release icon in the toolbar.

    Creating a new release

  9. After the release starts, choose the Release-x link just below the toolbar.

    Selecting the link to the new release

  10. This shows a summary of the release, with the Deployment status as IN PROGRESS. Choose the Logs link above the toolbar.

    Selecting the Logs link in the release summary page

  11. The Logs page shows the status of each step in the release, and a live log. When the release has successfully completed, choose the Summary link above the toolbar.

    Selecting the Summary link in the logs page

  12. The Summary page shows the final release summary, and the load test results ("No thresholds violated").

    Viewing the final release summary

  13. Open the Load test tab of the Test hub. This shows a summary of all the load test runs you have executed. Open the LoadTest.loadtest run that was just completed,

    Viewing all the load test runs

  14. As well as the Summary page for the load test run, you can open the Charts, Diagnostics, and Logs tabs to see more information about the test run.

    Viewing details of the load test run

    For more details about release definitions, see Release Management in Team Services. For more details about load tests and the results, see Run URL-based load tests with Visual Studio Team Services.

Explore behavior when a test fails

In this section, you will modify the sample app so that one of the unit tests will fail, and see how the CI/CD process is halted when the test fails during the build process.

  1. In Visual Studio, open the source solution for your app and open the HomeController.cs file from the Controllers folder of your main app project (in this example, it's SampleWebAppWithTests\Controllers\HomeController.cs).

  2. Change the line in the About method to show a different message, such as:

    public ActionResult About()
    {
      ViewBag.Message = "My super new web app.";
      return View();
    }
    
  3. Save the change and check in the change to your Team Services repository.

  4. Open the Builds tab of the Build & Release hub. You'll see a build of your build definition in "in progress". Choose the build number link next to this to open the build summary.

    Viewing the CI build in progress

  5. In the build summary, you can see the message that one of the unit tests failed, and that there was no deployment from this build. Because the test failed, Team Services did not automatically create a CD release.

    Viewing the result of the failed CI build

  6. Choose the Test link to open the test details tab. You can see a summary of the test run, and - by default - a list of the failed tests. Choose the one failed test to see details. The error message shows that the description for the About method (which you edited) does not match the expected value.

    Viewing the detailed test results

  7. Verify that the new build did not start a CD release by opening the Releases tab of the Build & Release hub. You can see that there is only the first release you created manually earlier in this example.

    Checking if any release is in progress

View the complete CI/CD process

In this section, you will fix the failing test, check in the updates, and see the complete CI/CD process execute; finishing with the results of the post-deployment load test.

  1. Go back to your source solution in Visual Studio and open the HomeControllerTest.cs file from the Controllers folder of the Tests project (in this example, it's SampleWebAppWithTests.Tests\Controllers\HomeControllerTest.cs).

  2. Change the line in the About test method so that it matches the message you specified when you edited the main project earlier. In this example:

    [TestMethod]
    public void About()
    {
      // Arrange
      HomeController controller = new HomeController();
    
      // Act
      ViewResult result = controller.About() as ViewResult;
    
      // Assert
      Assert.AreEqual("My super new web app.", result.ViewBag.Message);
    }
    
  3. Save the change and check in the change to your Team Services repository.

  4. Open the Builds tab of the Build & Release hub. You'll see a build of your build definition in "in progress". Choose the build number link next to this to open the build summary and check that it succeeds.

  5. Choose the Test link to open the test details tab. You'll see that all the tests passed.

  6. Verify that the new build did start a CD release by opening the Releases tab of the Build & Release hub. This time you see a new release in progress.

    Checking that a release is in progress

  7. In your web browser, open your new ASP.NET website. The URL will be in the form http://your-app-service-name.azurewebsites.net.

    Viewing the final result website

See also

Help and support

Report any problems on Developer Community, make suggestions on UserVoice, get advice on Stack Overflow, and get support via our Support page. We look forward to your feedback.