Build and deploy to an Azure Web App

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 this quickstart you will use the Azure portal to configure an entire CI/CD pipeline, and then see it build and deploy your app.

For example, 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 built 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.

For a simple way to follow this quickstart, 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

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.

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:

    <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 quickstart, 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: