Develop with WebJobs in Azure

1.5 hours
  • 9 Learning Objectives

About this Hands-on Lab

Azure WebJobs run executables or scripts in the context of an application, whether it’s a web app, an API app, or a mobile app. Think of them as scheduled tasks (cron jobs) that can be run in the Azure App Service, as opposed to on a virtual machine.

In this hands-on lab, we will deploy a WebJob that resizes images that are uploaded to blob storage. This solution can be used for something like a blog site, where smaller images are required for thumbnails and galleries.
2
Lessons Learned:

– Using Visual Studio to deploy an application to an Azure Web App
– Deploying a WebJob to an Azure Web App
– Modifying the properties of the WebJob in the Azure Portal
– Using the WebJob dashboard to view logs

Learning Objectives

Successfully complete this lab by achieving the following learning objectives:

Download the Visual Studio solution, WebJob, and sample images

Using the Azure Portal, download the Remote Desktop Protocol (RDP) file for the virtual machine. The VM name will differ based on the lab, but will always begin with vm-.

Login credentials:

Username: azureuser
Password: LA!2018!Lab1

The following script will download the PhotoStor Web App, the Thumbnailer WebJob, and some sample images that we will use in the lab.

Powershell code to run:

Add-Type -AssemblyName System.IO.Compression.FileSystem

$url = "https://github.com/linuxacademy/content-az-300-lab-repos/blob/master/create-an-azure-web-app/LA_PhotoStor.zip?raw=true"
$url2 = "https://github.com/linuxacademy/content-az-300-lab-repos/blob/master/create-an-azure-web-app/images.zip?raw=true"
$url3 = "https://github.com/linuxacademy/content-az-300-lab-repos/blob/master/develop-with-webjobs-in-azure/Thumbnailer.zip?raw=true"

$zipfile = "C:UsersazureuserDesktopLA_PhotoStor.zip"
$zipfile2 = "C:UsersazureuserDesktopimages.zip"
$zipfile3 = "C:UsersazureuserDesktopThumbnailer.zip"

$folder = "C:UsersazureuserDocumentsVS"
$folder2 = "C:UsersazureuserPictures"

[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12
Invoke-WebRequest -UseBasicParsing -OutFile $zipfile $url 

[System.IO.Compression.ZipFile]::ExtractToDirectory($zipfile, $folder)

[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12
Invoke-WebRequest -UseBasicParsing -OutFile $zipfile2 $url2 

[System.IO.Compression.ZipFile]::ExtractToDirectory($zipfile2, $folder2)

[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12
Invoke-WebRequest -UseBasicParsing -OutFile $zipfile3 $url3

[System.IO.Compression.ZipFile]::ExtractToDirectory($zipfile3, $folder)

Remove-Item -Path $zipfile
Remove-Item -Path $zipfile2
Remove-Item -Path $zipfile3
#

The trailing hashtag is used so we paste and run the script in full.

Deploy the PhotoStor Web App using Visual Studio

In this task, we are going to deploy a fully functional web application that will allow us to upload images into Azure Blob Storage. We will deploy the code into the pre-provisioned App Service Web App.

Note: The next steps will all be completed on the VM

  1. Use Visual Studio 2017 to open the solution (.sln) file that you downloaded in Step 2. When prompted, sign in to your lab (NOT VM) account using the credentials above.
  2. Right-click the PhotoStor project and click Publish
  3. Choose Azure App Service and Select existing. Click Publish.
  4. Expand the lab resource group and click the webapp2-XXXXX Web App.

Click OK. Visual Studio will publish the Web App and open it in a web browser when complete. You will see a site that looks like this:

PhotoStor

Test the PhotoStor Web App by uploading sample images

Open a new browser tab (or use the browser window that was automatically opened in the virtual machine) and navigate to the Web App URL. You can copy this value from the Overview pane of the Web App blade.

Upload the sample images downloaded in Task 2 by either clicking the upload box or dragging them from File Explorer (drag and drop does not work with Edge). Don’t upload them all, as we will use two or three in the next objective.

You will see the images being uploaded to blob storage, and once there each image will be listed below the upload box:

PhotoStor

Clicking any of the hyperlinks will result in the image being displayed.

Create additional Web App settings for use by the WebJob

To save time, the Web App was already pre-deployed with settings to interact with blob storage. However, additional settings are required for the WebJob to interact with blob storage. We will configure those now.

We’re creating three settings:

App Setting NameValue
AzureStorageConfig__ThumbnailContainerthumbnails
AzureWebJobsDashboardDefaultEndpointsProtocol=https;AccountName=;AccountKey=
AzureWebJobsStorageDefaultEndpointsProtocol=https;AccountName=;AccountKey=

Note: Insert the storage account name and access key values into the AzureWebJobsDashboard and AzureWebJobStorage values, between the = and the ;, like this:

DefaultEndpointsProtocol=https;AccountName=STORAGE_ACCOUNT_NAME;AccountKey=STORAGE_ACCOUNT_KEY

There’s some preparation before this step. We need to get those values. Let’s open up a text editor and paste that line into it. We can paste the other two values as we get them. It will save typing, and possibly avoiding a fat-fingering type of mistake.

To find the values we need, we’ve got to get into our Azure Portal. Click on Storage accounts in the main menu on the left, and then click on our storage account. We need the name of the storage account, and our storage account key. The first is easy to find, because it’s right there in front of us on the overview page. For the key though, click on Access keys under Setttings in the menu to the left. Copy the first key and paste it into the text editor we opened up earlier.

Navigate to the Web App in the Portal. In the Web App menu, click Application Settings.

In the Application settings section, there’s an Add new setting link. If we click on that, we’re greeted with a pair of input boxes where we can enter a name and a value.

Now we can add the new settings. The only thing left is to set the Always On slider to On.

"Always On"

Click Save at the top of the pane.

Open the WebJob in Visual Studio and familiarize yourself with the code

Now let’s have a look at the WebJob that will resize our images.

On the virtal machine, close the PhotoStor Web App solution, saving if prompted. Open the Thumbnailer.sln file that we downloaded in Objective 1.

Open the functions.cs file in Solution Explorer and familiarize yourself with the functions. Afterward, proceed to the next objective.

Publish the Thumbnailer WebJob to your Web App

Now we are ready to publish our WebJob.

  1. In Solution Explorer, right-click the Thumbnailer project and click Build. After a few seconds, the Output window should show that the application was successfully built.
  2. In Solution Explorer, right-click the Thumbnailer project and click Publish as Azure Webjob.
  3. Select Microsoft Azure App Service as the publish target, and then click Next >.
  4. Accept the defaults on the next page and then click Validate Connection. You should see a green check mark once the connection has been validated. Click Publish. You will see the following output when publishing has successfully completed:

"WebJob published successfully!"

Refresh your web browser to view the thumbnails

Refresh your web browser (or reopen if you’ve closed it). The WebJob should have already completed its first pass on images in the images container. Now, in addition to the list of image URLs, you should now also see thumbnails of the images on the right-side of the page!

PhotoStorv2

Upload a few more images to blob storage

Upload a few more sample images downloaded in task 2 by either clicking the upload box or dragging them from File Explorer (again, drag and drap does not work with Edge). The list of images should now include the images you just uploaded.

Where are my thumbnails?

The images were uploaded successfully. However, the WebJob has not yet run against the images container. Why?

Although our WebJob is "continuous" in nature, meaning that it runs all the time, blob storage containers are only checked for new incoming blobs every 10 minutes. This means that our WebJob will eventually process the new incoming blobs, but it might take a while to do so. We can either wait, or simply restart the WebJob, which forces a check of the blob container every time it is started and stopped.

In the Azure Portal, navigate to the Web App. In the Web App blade, click on WebJobs. In the WebJobs lens, click on the WebJob and then click Stop. Once the WebJob is stopped, refresh the Web App in your web browser and the thumbnails will have appeared.

Review the WebJob logs in the WebJobs dashboard

The WebJob dashboard is a convenient place to review the logs of a particular WebJob, including a list of the recent invocations.

In the WebJob lens, select the WebJob and then click *Logs. The dashboard opens in a new browser tab. Here you can view the current status of the WebJob, its associated functions, and its recent invocations.

"WebJob Dashboard"

Additional Resources

Note: As of April 10, 2019, the virtual machine used in this lab is running Windows Server 2016 Datacenter. The functionality of this lab is not affected by this change. However, student experience will differ slightly from the lab portrayed in the solution videos.

  1. Log in to the Azure Portal prior to beginning Solution: Part I.

  2. In Solution II, wait 45 seconds to 1 minute between stopping and restarting the WebJob. Failure to wait could cause errors in processing new images.

Note: Using Internet Explorer as the web browser on the Virtual Machine can be unreliable. It is recommended you use your own browser (e.g. Google Chrome) on your own computer to view the WebApp. If you use IE on the VM you may need to open and close as REFRESH does not work reliably.

What are Hands-on Labs

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Get Started
Who’s going to be learning?

How many seats do you need?

  • $499 USD per seat per year
  • Billed Annually
  • Renews in 12 months

Ready to accelerate learning?

For over 25 licenses, a member of our sales team will walk you through a custom tailored solution for your business.


$2,495.00

Checkout
Sign In
Welcome Back!

Psst…this one if you’ve been moved to ACG!