Continuous integration, test, and deployment tutorial

VS 2017 | VS 2015 | VSTS | TFS 2018 | TFS 2017 | TFS 2015

This tutorial demonstrates how you can use the continuous integration and continuous deployment features of Visual Studio Team Services (VSTS) 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.

In this tutorial, you will learn how to:

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 an Azure web app using the portal

Note

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

  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.

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 VSTS or TFS 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 VSTS code repositories, see Share your code with Visual Studio and VSTS 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 VSTS 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 new build definition, select the Process item and then select the Hosted agent queue.

    Choosing the default agent queue

  5. Open the Triggers tab and turn on the Continuous integration trigger. Make sure the repository containing your app is selected.

    Specifying continuous integration

  6. Save the new build definition and queue a new build.

    Starting a test build

  7. Choose the link to the build in the message bar that appears.

    Choosing the build link

  8. 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

  9. 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?

  10. 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 VSTS, 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.

    Starting a new release definition

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

  3. 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

  4. In the new release definition, open the Tasks tab and select the Deploy Azure App Service task. In the parameters pane, select your Azure subscription from the drop-down list. 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 Settings icon 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?

  5. 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?

  6. Save the new release definition.

    Saving the release definition

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

    Creating a new release

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

    Selecting the link to the new release

  9. 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

  10. 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

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

    Viewing the final release summary

  12. 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

  13. 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 VSTS. For more details about load tests and the results, see Run URL-based load tests with VSTS.

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 VSTS 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 VSTS 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

Next step