Deployment and Azure

---

Overview

Microsoft Azure offers secure and flexible development, deployment and scaling options for any size web application. Leverage your existing tools to create and deploy applications without the hassle of managing infrastructure.

Provision a production web application on your own in minutes by easily deploying content created using your favorite development tool. You can deploy an existing site directly from source control with support for Git, GitHub, Bitbucket, CodePlex, TFS, and even Dropbox. Deploy directly from your favorite IDE or from scripts using PowerShell in Windows or CLI tools running on any OS. Once deployed, keep your sites constantly up-to-date with support for continuous deployment.

Microsoft Azure provides scalable, durable cloud storage, backup, and recovery solutions for any data, big or small. When deploying applications to a production environment, storage services such as Tables, Blobs and SQL Databases help you scale your application in the cloud.

This module will show you the different topics you could encounter when deploying your site to production environments in Microsoft Azure.

Objectives

In this module, you'll see how to:

• Create and deploy a Web Application to a Microsoft Azure Web App using Visual Studio
• Change behavior of your app based on different deployment environments
• Work with Multiple Deployments Slots in Azure

Prerequisites

The following is required to complete this module:

• Visual Studio Community 2015 or greater
• ASP.NET Core 1.0

Note: You can take advantage of the Visual Studio Dev Essentials subscription in order to get everything you need to build and deploy your app on any platform.

Exercises

This module includes the following exercises:

1. Build and Deploy from Visual Studio
2. Working with Environments in Visual Studio
3. Working with Multiple Deployment Slots

Estimated time to complete this module: 60 minutes

Note: When you first start Visual Studio, you must select one of the predefined settings collections. Each predefined collection is designed to match a particular development style and determines window layouts, editor behavior, IntelliSense code snippets, and dialog box options. The procedures in this module describe the actions necessary to accomplish a given task in Visual Studio when using the General Development Settings collection. If you choose a different settings collection for your development environment, there may be differences in the steps that you should take into account.

Exercise 1: Build and Deploy from Visual Studio

Azure App Service Web Apps is a fully managed platform that enables you to build, deploy and scale enterprise-grade web apps in seconds. Focus on your application code, and let Azure take care of the infrastructure to scale and securely run it for you.

In this exercise you'll create a new Web site in Visual Studio based on the ASP.NET Core 1.0 Web Application project template and then publish the application to an Azure App Service Web App.

Task 1 - Deploying a ASP.NET Core application to Azure

1. Open Visual Studio Community 2015 and select File | New | Project... to create a new solution.

2. In the New Project dialog box, select ASP.NET Core Web Application (.NET Core) under the Visual C# | Web tab, and make sure .NET Framework 4.6.1 is selected. Name the project MyWebApp, choose a Location and click OK.

   

   New ASP.NET Web Application project

3. In the New ASP.NET Project dialog box, select the Web Application template under ASP.NET 5 Templates. Also, make sure that the Authentication option is set to No Authentication. Make sure the "Host in the cloud" option is not checked (you will run this manually). Click OK to continue.

   

   Creating a new project with the Web Application template

4. Right-click the MyWebApp project and select Publish.... In the Publish Web dialog, click Microsoft Azure App Service.

   

   Microsoft Azure App Service

5. Click Add an account.... to sign in to Visual Studio with your Azure account.

   

   Adding an account

6. Then, click New... to open the Create App Service dialog box. The Create App Service dialog box will appear. Fill the Web App Name and Resource Group fields. Then click the New... button next to App Service Plan.

   

   Create App Service dialog box

7. Click OK in the Configure App Service Plan dialog.

   

   Configure the App Service Plan

8. Click the Create button in the Create App Service Plan and wait while Azure provisions your resources.

9. Back in the Publish Web dialog, all the connection fields should be populated. Click Next > to view the Settings tab, which shows the Configuration and Target Framework. Click Publish to publish the site.

   

   Publishing the site to the new Microsoft Azure Web App

   Once publishing completes, the web app will be automatically launched in your browser (at http://{yourwebappname}.azurewebsites.net).

   

   Web app published to Azure

Exercise 2: Working with Environments in Visual Studio

ASP.NET Core introduces improved support for controlling application behavior across multiple environments, such as development, staging, and production. Environment variables are used to indicate which environment the application is running in, allowing the app to be configured appropriately.

In this exercise, you'll add code to this application to change its behavior based on the active environment. You will use Visual Studio launch profiles to test different environments locally.

ASP.NET Core uses a particular environment variable, ASPNET_ENV (or Hosting:Environment), to describe the environment the application is currently running in. This variable can be set to any value you like, but three values are used by convention: Development, Staging, and Production.

Task 1 - Add Environment Specific Code

1. Open the Views\Shared\_Layout.cshtml file in your editor. Observe the Environment TagHelper which renders its content only if the active environment matches one of the values in the names attribute.

   <environment names="Development">
       <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
       <link rel="stylesheet" href="~/css/site.css" />
   </environment>
   <environment names="Staging,Production">
       <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
               asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
               asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
       <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
   </environment>

2. At the top of the layout file, add the following line to inject the Hosting Environment service into your view.

   @inject Microsoft.AspNetCore.Hosting.IHostingEnvironment HostingEnvironment
   

3. Find the footer element in layout page and modify it to display the active environment.

   <footer>
       <p>&copy; 2016 - WebApplicationBasic</p>
       <p> Env: @HostingEnvironment.EnvironmentName </p>
   </footer>

Task 2 - Create a Visual Studio Launch Profile

1. Right-click on the project in solution explorer and click on properties.

2. Select the Debug tab in the project properties window and click New button.

   

   Create a new launch profile

3. Name the new launch profile IIS Express (Staging) and click OK.

4. In the Launch dropdown choose IIS Express

   

   Launch IIS Express

5. Add an Environment Variable named Hosting:Environment with a value of Staging and save the changes to your project properties.

   

   Set Environment Variable

6. In the Debug Dropdown, select IIS Express (Staging) and launch your application. You should now see the environment name displayed in the footer of your web application.

Exercise 3: Working with Multiple Deployment Slots

Azure App Service Web Apps enables you to perform staged publishing. When you deploy your site, you can choose to deploy it to a separate deployment slot instead of the default production slot. And then swap the deployments in these two slots with no down time. This is really useful for validating changes before releasing to the public, incrementally integrating site content, and rolling back if changes are not working as expected.

In this exercise, you'll deploy an application to the staging environment of your Azure App Service Web Apps. To do this, you'll create the Web App and provision the required components at the management portal, download a publish profile, and deploy from Visual Studio. You will then execute the application in this staging environment to verify its operation. Once you're satisfied that it's working according to your expectations, you'll promote the application to production.

Note: To enable staged publishing, the Web App must be on one of the Standard plans. Note that additional charges will be incurred if you upgrade your Web App to a Standard plan. For more information about pricing, see App Service Pricing.

Task 1 - Scaling up your Azure Web App

1. Go to the Azure Portal and sign in using the Microsoft account associated with your subscription.

2. Select App Services from the nav bar on portal.azure.com and select your previously created Web App.

   

   Select App Service in Portal

3. Select Scale Up (App Service Plan) in the Settings blade of your web app. If your Web App is not on a Standard plan, select one by clicking the Pricing tier tile. For instance, select the S1 Standard plan.

   

   Web App Pricing tier

   Microsoft Azure offers 5 plans for users to run their Web Apps - Free, Shared, Basic, Standard and Premium. In Free and Shared, all Web Apps run in a multi-tenant environment and have quotas for CPU, Memory, and Network usage. You can mix and match which sites are Free (strict quotas) vs. Shared (more flexible quotas). The maximum number of free Web Apps may vary with your plan. In Standard, you choose which Web Apps run on dedicated virtual machines that correspond to the standard Azure compute resources. You can change the mode of your Web App by clicking the Pricing tier tile in the Usage section of the corresponding App Service plan blade.

4. Back in the Settings blade, select Deployment slots. Click the Add Slot command at the top and create a new slot named staging. Set your Web App as Configuration Source and then click OK.

   

   Creating the staging deployment slot

5. After a few seconds you'll see a new slot with the name of your Web App followed by -staging. Select it to navigate to the staging Web App settings.

6. Select Application Settings in the Settings blade and add an App Setting named Hosting:Environment with a value of Staging. Check the Slot Setting checkbox for this setting and click Save after adding the setting to save your changes.

   

   Setting Staging Environment Variable

7. Download the Publish Profile for the staging slot from the Web app blade.

   

   Download publish profile

8. In Visual Studio, right-click on the Project in Solution Explorer and select Publish....

9. In the Publish Web dialog, click the Profile tab and choose Import.

   

   Import Publish Settings

10. Import the downloaded Publish Profile

    Note: Ensure you have downloaded the profile for your staging slot. The filename should end with ..(staging).publishsettings

    

    Select Publish Settings

11. In the Preview tab on the Publish Web dialog, ensure you have selected the Web Deploy publish profile for your staging slot and then click Publish.

Task 2 - Publish a change to the staging slot

1. In Visual Studio, use the Solution Explorer to open the Views\Shared\_Layout.cshtml file.

2. Change the content of the About link to About Us

   <li><a asp-area="" asp-controller="Home" asp-action="About">About Us</a></li>

3. Right-click the MyWebApp project and select Publish.... In the Publish Web dialog, select your staging slot and click Publish.

   

   Publish to Staging

Task 3 - Promote your staging slot to production

1. Go back to the Azure Portal and navigate to the staging Web App.

2. Click the Swap command at the top.

   

   Swap to production

3. Verify that the Source targets the staging slot and the Destination targets production, and then click OK to proceed with the swap operation. Azure will immediately swap the content of the production site with the content of the staging site.

   Note: Some settings from the staged version will automatically be copied to the production version (e.g. connection string overrides, handler mappings, etc.) but others will stay the same (e.g. DNS endpoints, SSL bindings, etc.).

   

   Confirming swap operation

4. Once the swap is complete, browse to your Web App in both slots. You can verify that the production site is now the one with the deployed application.

   Note: You might need to refresh your browser to clear the cache. In Microsoft Edge, you can do this by pressing CTRL+F5.

   

   Web App running in the production environment

---

Summary

By completing this module, you should have:

• Created and deployed a Web Application to a Microsoft Azure Web App using Visual Studio
• Changed behavior of your app based on different deployment environments
• Worked with Multiple Deployments Slots in Azure

Note: You can take advantage of the Visual Studio Dev Essentials subscription in order to get everything you need to build and deploy your app on any platform.