By - Shashank Ranjan (v-shranj@microsoft.com)

For browser to talk to Azure Storage, instead of exposing storage connection string, we can use SAS Key (Share Access Security). SAS key is valid only for limited time and has specific permissions like write but not read or list. For more details on SAS keys please see here

Here is quick sample to upload blob files to Azure Storage from a browser directly and then process it the server side.

1. Blob files are uploaded directly from browser to Storage using SAS Key
2. Browser sends the blob file name to Web server
3. Web server access blob using connection string

1. Download JavaScript Client library for Azure Storage

• Download the zip from https://aka.ms/downloadazurestoragejs
• More details on this client library is found here and here

2. Generate SAS token

1. Log into Azure portal https://portal.Azure.com
2. Navigate to your Storage Account
3. Click on the Share Access Signature
4. Select write only as shown below and click Generate SAS token button
5. Copy SAS token
6. Note : you may have to change expiry date/time if you are planning to use this SAS key for longer duration
   

3. Enable CORS

1. Log into Azure Portal https://portal.azure.com
2. Navigate to your Azure Storage account
3. Click on CORS
4. Set these following values and hit Save button
   

4. Client side code

1. Extract the above zip file and copy the azure-storage.blob.min.js to your application scripts folder. For ASP.NET MVC application, you can copy it to Script folder as shown below
   
2. In your client side code, add these lines [code language="javascript"]

   Select file to upload to blob

   Upload to blob

   Do server side processing

   [/code]

5. Server side code

1. Add following code on your server side [code language="csharp"] public ActionResult Contact(string id) { // id is blob file name CloudStorageAccount storageAccount = null; CloudBlobContainer cloudBlobContainer = null; var storageConnectionString = "CONNECTION STRING TO STORAGE"; CloudStorageAccount.TryParse(storageConnectionString, out storageAccount); CloudBlobClient cloudBlobClient = storageAccount.CreateCloudBlobClient(); cloudBlobContainer = cloudBlobClient.GetContainerReference("CONTAINER"); CloudBlockBlob cloudBlockBlob = cloudBlobContainer.GetBlockBlobReference(id); ViewBag.Message = "Your contact page."; return View(); } [/code]

Azure DevOps is a complete solution for software development, from planning to building to deployment. It has easy to use interface, with a nice flow from source code to publishing. Here is a nice link that talks about different services within Azure DevOps

Here are quick steps for on demand publishing websites from DevOps to AppService.

In this tutorial, we are going to show how to create a project in DevOps, upload source code to DevOps, build this source code and finally publish it to Azure AppService

1. DevOps Portal

1. Log into DevOps Portal at https://dev.azure.com
2. Create a new project, by clicking on the New Project button as shown below



3. In the next screen, give a project name and click on the Create button

   

4. Once the project is create, you can clone the repo in Visual Studio as shown below
5. If you like to push your existing code to this repo, select 2nd option

   

2. Visual Studio

1. When you click on Clone in Visual Studio, VS will prompt you to select a local path as shown below

   

2. In the Visual Studio, select Team Explorer tab and click on Create a new project as shown below

   

3. In the new project dialog, select Web | ASP.NET Web Application and give a project name as shown below

   

4. In next window, select MVC and click OK button as shown below

   

5. Once the project is created, in the Solution Explorer open View | Shared | _Layout.cshtml page
6. Change the application name as shown below

   

7. Now, lets check-in this code
8. In the Team Explore, click on the Changes button as shown below

   

9. Enter a comment and commit the changes as shown below

   

10. Browse to the Azure DevOps portal, go to Code tab, you should see the new project files as shown below

    

3. Setup a Build pipeline in Azure DevOps

1. Now we have uploaded our source code to Azure DevOps Repo, lets build our source code
2. In the Code, click on the Set up build button

   

3. Select ASP.NET template from the list as shown below

   

4. Change the name and click on Save & Queue as shown below

   

5. In the next window, click Save & Queue

   

6. Once the build is queued, you can click on the build name to get more details as shown below

   

7. Once the build is successfull, it is time to Publish

4. Publish to Azure AppService

1. To create a Release Pipeline, click on the Release button as shown below

   

2. In the template window, select Empty Job as shown below

   

3. Next goto Tasks tab and search for Azure AppService
4. Select Azure App Service Deploy as shown below

   

5. Click on the Azure App Service Deploy, select Version 4.*(preview)
6. Select Azure Subscription and click on the Authorize button

   

7. Now, select Web App on Windows
8. Next, select a AppService Website as shown below

   

9. Once the publish settings are done, click on Save as shown below

   

4. Setup a Release

1. Once the publish pipeline is done, you can click on the Create a Release button as shown below

   

2. In the next dialogbox, select Stage 1 and click on Create button

   

3. Now deploy this Release to Azure
4. Click on the Release-1as shown below

   

5. Next, click on the Deploy button as shown below

   

6. In the next dialogbox, click on Deploy button as shown below

   

7. This should start the deployment. You can click on the In progress link to get details as shown below

   

8. Here is the screenshot when the deployment is completed

   

5. Website

1. Now browse to your Azure AppService website, you should see the Wabac as shown below

   

Better approach is Managed Identity. This option allows to access protected Azure AD resources without any need for secrets or credentials in your code or in web.config. More details on Manage Identity can be found here 

Here are the quick steps to use Managed Service Identity Azure AppService

1. Create a Azure AppService Website and protect it with Azure AD (EasyAuth). This will be our Web API website
2. Create another Azure AppService Website and enable Managed Service Identity. This will be our client trying to consume above Web APIs
3. Write code to get token using Managed Identity and pass it to Web API call

1. WebAPI website with EasyAuth

• Log into Azure portal
• Click on the “+ Create a resource” on top left
• In the Search textbox type “web app”
• Select “Web App”
• Click on the “Create” button
• Provide App name, resource group name, appservice plan
• (in my sample code this is WabacOneAD)
• Click on “Create” button
• Once the website is created, go to the resource
• Click on the “Authentication / Authorization” blade
• Enable “App Service Authentication”
• Select “Log in with Azure AD” from dropdownbox
• Select Azure AD as provider
• Select Express option and click OK
• Now click on the Save button

2. Website with MSI

• Log into Azure portal
• Click on the “+ Create a resource” on top left
• In the Search textbox type “web app”
• Select “Web App”
• Click on the “Create” button
• Provide App name, resource group name, appservice plan
• (in my sample code this is WabacOne)
• Click on “Create” button
• Once the website is created, go to the resource
  
• Click on the “Managed service identity” blade
• Click on “On”
• Click Save button

3. Now for the code

• Open Visual Studio
• Create a new Website project (either .net core or .net framework)
• Select MVC option
• In the Home controller, add following code to About action
  [code language="csharp"] public ActionResult About() { ViewBag.Message = "User Name is " + User.Identity.Name; return View(); } [/code]
• In the Contact action, add following code
  [code language="csharp"] static HttpClient client = new HttpClient(); public ActionResult Contact() { var azureServiceTokenProvider = new AzureServiceTokenProvider(); var accessTokenTask = azureServiceTokenProvider.GetAccessTokenAsync("https://wabaconead.azurewebsites.net/"); accessTokenTask.Wait(); var accessToken = accessTokenTask.Result; var url = "https://wabaconead.azurewebsites.net/home/about"; client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessToken); var responseTask = client.GetStringAsync(url); responseTask.Wait(); var response = responseTask.Result; ViewBag.Message = "Your contact page." + accessToken + " HTML Response " + response; return View(); } [/code]
• You may need to add Microsoft.AzureServices.AppAuthentication NuGet Package
• Now deploy this website to above two websites
• When you access the first website, you get promoted for Azure AD credential so we are sure that this website is protected with Azure AD
• Now try to access Home/About…this should return your email address you have used to log into Azure AD
• Now browse to the second website, access the Home/Contact…this should call the first website and display the content. Now check for the username (search for text “User Name is”)

4. Note, there is a bug in the EasyAuth / Express options.

It doesn't add the website URL in the allowed token audiences. Follow these steps to fix this bug

• Go to the first website in Azure portal
• Click on the Authentication / Authorization blade
• Click on the Azure AD
• Change it from Express to Advanced
• In the Allowed Token Audiences add your website URL as shown below
• Click OK
• Click Save

Figure 1: User not able to see his/her project if selected VSTS as source.

Figure 2: Access level of the user in Azure DevOps project.

Figure 3: User need to have BASIC permission level.

Figure 4: User can see and select his project if VSTS is selected as source.

Run From Package deployment has many advantages and makes DevOPs life much easier. No more live editing, no more file in use error, better cold start performance, same version gets deployed across multiple AppServices, etc. For more details please click on this link

Slot Swap with Preview options allows you to do a final sanity check and warmup the website before taking on production load. For more details please see this link and this one

FYI, for high availability and better network performance, you should consider hosting your website in multiple regions and configuring a Azure Traffic Manager. For more details please see this link. Websites with heavy graphic, it is recommended to use CDN and upload all media files to Azure Storage. For more details please click on this link. This will reduce the size of package zip file.

Combining these above two features, we will be able to do better controlled deployment with least amount of downtime.

Here is sample PowerShell script to streamline deployments using these two features : 

Main steps in this PowerShell scripts are

1. Upload the zip file to Azure Storage and get SAS url
2. Add this SAS url to the appsetting of AppService website
3. Initiate Slot Swap With Preview
4. Test the slot website and do the warmup
5. Commit Slot Swap With Preview

[code language="ps"] #Login-AzureRmAccount # provide your web package name $zipFilePath = ".\V1.zip" # provide your storage account detail $storageAccountName = "runaspacakge" $storageResourceGroupName = "runaspackagecentralus" $containerName = "mypackage" # provide your website details $websiteResourceGroupName = "runaspackagecentralus" $slotName = "preprod" $website1Names = "runaspackageeastus", "runaspackagecentralus" # set the package name to current datetime $uploadPackageName = (Get-Date).ToString("yyyyMMddHHmmss") Write-Host "New package name will be "$uploadPackageName".zip" Write-Host "trying to get storage..." $storageAccount = Get-AzureRmStorageAccount -ResourceGroupName $resourceGroupName ` -Name $storageAccountName Write-Host "trying to get storage context..." $ctx = $storageAccount.Context Write-Host "trying to upload to blob..." $blobupload = Set-AzureStorageBlobContent -File $zipFilePath ` -Container $containerName ` -Blob $uploadPackageName ` -Context $ctx Write-Host "trying to get SAS URL..." $sastokenURL = New-AzureStorageBlobSASToken -Container $containerName -Blob $uploadPackageName -Context $ctx -Permission rwdl -FullUri foreach($website1Name in $website1Names ) { Write-Host $website1Name Write-Host "`t trying to get website..." $webApp = Get-AzureRmWebAppSlot -ResourceGroupName $websiteResourceGroupName ` -Name $website1Name ` -Slot $slotName Write-Host "`t trying to get appsettings..." $currentAppSettings = $webApp.SiteConfig.AppSettings $appsettings = @{} ForEach ($kvp in $currentAppSettings) { $appsettings[$kvp.Name] = $kvp.Value } # update package URL $appsettings['WEBSITE_RUN_FROM_PACKAGE'] = "$sastokenURL" Write-Host "`t trying to set appsetting..." $setappSetting = Set-AzureRMWebAppSlot -ResourceGroupName $websiteResourceGroupName ` -Name $website1Name ` -AppSettings $appsettings ` -Slot $slotName ` } $ans = Read-Host 'Start slot swap with preview? (Y/N)' if( $ans -eq 'Y' -OR $ans -eq 'y') { } else { Exit } foreach($website1Name in $website1Names ) { Write-Host $website1Name Write-Host "`t trying to swap with preview..." Switch-AzureRmWebAppSlot -ResourceGroupName $websiteResourceGroupName ` -Name $website1Name ` -SourceSlotName $slotName ` -DestinationSlotName production ` -SwapWithPreviewAction ApplySlotConfig Write-Host "`t sending a test web request to slot website..." $response = Invoke-WebRequest -Uri $webApp.HostNames[0] write-host "`t test request status code is " $response.StatusCode Write-Host "`t test slot website now...http://"$webApp.HostNames[0] $ans = Read-Host "`t Commit this swap? (Y/N)" if( $ans -eq 'Y' -OR $ans -eq 'y') { Write-Host "`t`t Completing slot with preview swap..." Switch-AzureRmWebAppSlot -ResourceGroupName $websiteResourceGroupName ` -Name $website1Name ` -SourceSlotName $slotName ` -DestinationSlotName production ` -SwapWithPreviewAction CompleteSlotSwap } else { Write-Host "`t`t Canceling slot with preview swap..." Switch-AzureRmWebAppSlot -ResourceGroupName $websiteResourceGroupName ` -Name $website1Name ` -SourceSlotName $slotName ` -DestinationSlotName production ` -SwapWithPreviewAction ResetSlotSwap } } Write-Host "DONE" [/code]

Here is screenshot of output of this above PowerShell script :

If there are any errors downloading the zip file from blob storage, you should see FAILED TO DOWNLOAD ZIP FILE.txt in the wwwroot folder as shown below:

Setting up Application Gateway with WAF with an App Service that uses multiple Custom Domain names

Prerequisites

Before We Start!!

Adding Custom Domain in Web Apps

Setting up the Application Gateway

Create Application Gateway

Editing existing / default Backend pool to connect App Service

Add new HTTP Settings

Add Multi Site Listener for customer domain

Create Rule

Delete Default Listener, HTTP Setting and Rule

Run the PowerShell Commands for application gateway

Create CNAME record for each domain

Lets say you would like to get the machine name from all VM instances that are running your Azure AppService website or you would like to create a folder under the wwwroot, this below sample PowerShell scripts can execute any DOS command

For example, lets say you have a website running in an App Service Plan that has more than one instance and you would like to delete log files form all instances. You can log into KUDU console at <your website name>.scm.AzureWebsites.net and use Debug Console | CMD to delete log files. By default, KUDU console is connected to one of random instance. If you like to connect to another instance, you can follow these steps 

Another option is you can use below PowerShell scripts that will execute a CMD command on all instances :

Here is a quick PowerShell scripts to get list of all websites in your Azure Subscription, along with the processes running within each website.

This script also print the VM Instance ID and VM machine Name. Here is the sample output :