Publishing to an Azure Web App with Continuous Deployment

By Erik Reitan

This tutorial shows you how to create an ASP.NET Core web app using Visual Studio and deploy it from Visual Studio to Azure App Service using continuous deployment.

주석

To complete this tutorial, you need a Microsoft Azure account. If you don’t have an account, you can activate your MSDN subscriber benefits or sign up for a free trial.

Prerequisites

This tutorial assumes you have already installed the following:

Create an ASP.NET Core web app

  1. Start Visual Studio.
  2. From the File menu, select New > Project.
  3. Select the ASP.NET Web Application project template. It appears under Installed > Templates > Visual C# > Web. Name the project SampleWebAppDemo. Select the Add to source control option and click OK.
../_images/01-new-project.png
  1. In the New ASP.NET Project dialog, select the ASP.NET Core Empty template, then click OK.
../_images/02-web-site-template.png
  1. From the Choose Source Control dialog box, select Git as the source control system for the new project.
../_images/03-source-control.png

Running the web app locally

  1. Once Visual Studio finishes creating the app, run the app by selecting Debug -> Start Debugging. As an alternative, you can press F5.

It may take time to initialize Visual Studio and the new app. Once it is complete, the browser will show the running app.

../_images/04-browser-runapp.png
  1. After reviewing the running Web app, close the browser and click the “Stop Debugging” icon in the toolbar of Visual Studio to stop the app.

Create a web app in the Azure Portal

The following steps will guide you through creating a web app in the Azure Portal.

  1. Log in to the Azure Portal.
  2. Click NEW at the top left of the Portal.
  3. Click Web + Mobile > Web App.
../_images/05-azure-newwebapp.png
  1. In the Web App blade, enter a unique value for the App Service Name.
../_images/06-azure-newappblade.png

주석

The App Service Name name needs to be unique. The portal will enforce this rule when you attempt to enter the name. After you enter a different value, you’ll need to substitute that value for each occurrence of SampleWebAppDemo that you see in this tutorial.

Also in the Web App blade, select an existing App Service Plan/Location or create a new one. If you create a new plan, select the pricing tier, location, and other options. For more information on App Service plans, Azure App Service plans in-depth overview.

  1. Click Create. Azure will provision and start your web app.
../_images/07-azure-webappblade.png

Enable Git publishing for the new web app

Git is a distributed version control system that you can use to deploy your Azure App Service web app. You’ll store the code you write for your web app in a local Git repository, and you’ll deploy your code to Azure by pushing to a remote repository.

  1. Log into the Azure Portal, if you’re not already logged in.
  2. Click Browse, located at the bottom of the navigation pane.
  3. Click Web Apps to view a list of the web apps associated with your Azure subscription.
  4. Select the web app you created in the previous section of this tutorial.
  5. If the Settings blade is not shown, select Settings in the Web App blade.
  6. In the Settings blade, select Deployment source > Choose Source > Local Git Repository.
../_images/08-azure-localrepository.png
  1. Click OK.
  2. If you have not previously set up deployment credentials for publishing a web app or other App Service app, set them up now:
  • Click Settings > Deployment credentials. The Set deployment credentials blade will be displayed.
  • Create a user name and password. You’ll need this password later when setting up Git.
  • Click Save.
  1. In the Web App blade, click Settings > Properties. The URL of the remote Git repository that you’ll deploy to is shown under GIT URL.
  2. Copy the GIT URL value for later use in the tutorial.
../_images/09-azure-giturl.png

Publish your web app to Azure App Service

In this section, you will create a local Git repository using Visual Studio and push from that repository to Azure to deploy your web app. The steps involved include the following:

  • Add the remote repository setting using your GIT URL value, so you can deploy your local repository to Azure.
  • Commit your project changes.
  • Push your project changes from your local repository to your remote repository on Azure.
  1. In Solution Explorer right-click Solution ‘SampleWebAppDemo’ and select Commit. The Team Explorer will be displayed.
../_images/10-team-explorer.png
  1. In Team Explorer, select the Home (home icon) > Settings > Repository Settings.
  2. In the Remotes section of the Repository Settings select Add. The Add Remote dialog box will be displayed.
  3. Set the Name of the remote to Azure-SampleApp.
  4. Set the value for Fetch to the Git URL that you copied from Azure earlier in this tutorial. Note that this is the URL that ends with .git.
../_images/11-add-remote.png

주석

As an alternative, you can specify the remote repository from the Command Window by opening the Command Window, changing to your project directory, and entering the command. For example:

git remote add Azure-SampleApp https://me@sampleapp.scm.azurewebsites.net:443/SampleApp.git

  1. Select the Home (home icon) > Settings > Global Settings. Make sure you have your name and your email address set. You may also need to select Update.
  2. Select Home > Changes to return to the Changes view.
  3. Enter a commit message, such as Initial Push #1 and click Commit. This action will create a commit locally. Next, you need to sync with Azure.
../_images/12-initial-commit.png

주석

As an alternative, you can commit your changes from the Command Window by opening the Command Window, changing to your project directory, and entering the git commands. For example:

git add .

git commit -am "Initial Push #1"

  1. Select Home > Sync > Actions > Open Command Prompt. The command prompt will open to your project directory.
  2. Enter the following command in the command window:
git push -u Azure-SampleApp master
  1. Enter your Azure deployment credentials password that you created earlier in Azure.

주석

Your password will not be visible as you enter it.

This command will start the process of pushing your local project files to Azure. The output from the above command ends with a message that deployment was successful.

remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
To https://username@samplewebappdemo01.scm.azurewebsites.net:443/SampleWebAppDemo01.git
* [new branch] master -> master
Branch master set up to track remote branch master from Azure-SampleApp.

주석

If you need to collaborate on a project, you should consider pushing to GitHub in between pushing to Azure.

Verify the Active Deployment

You can verify that you successfully transferred the web app from your local environment to Azure. You’ll see the listed successful deployment.

  1. In the Azure Portal, select your web app. Then, select Settings > Continuous deployment.
../_images/13-verify-deployment.png

Run the app in Azure

Now that you have deployed your web app to Azure, you can run the app.

This can be done in two ways:

  • In the Azure Portal, locate the web app blade for your web app, and click Browse to view your app in your default browser.

  • Open a browser and enter the URL for your web app. For example:

    http://SampleWebAppDemo.azurewebsites.net

Update your web app and republish

After you make changes to your local code, you can republish.

  1. In Solution Explorer of Visual Studio, open the Startup.cs file.
  2. In the Configure method, modify the Response.WriteAsync method so that it appears as follows:
await context.Response.WriteAsync("Hello World! Deploy to Azure.");
  1. Save changes to Startup.cs.
  2. In Solution Explorer, right-click Solution ‘SampleWebAppDemo’ and select Commit. The Team Explorer will be displayed.
  3. Enter a commit message, such as:
Update #2
  1. Press the Commit button to commit the project changes.
  2. Select Home > Sync > Actions > Push.

주석

As an alternative, you can push your changes from the Command Window by opening the Command Window, changing to your project directory, and entering a git command. For example:

git push -u Azure-SampleApp master

View the updated web app in Azure

View your updated web app by selecting Browse from the web app blade in the Azure Portal or by opening a browser and entering the URL for your web app. For example:

http://SampleWebAppDemo.azurewebsites.net