Develop with WebJobs in Azure

Hands-On Lab

 

Photo of James Lee

James Lee

Training Architect

Length

01:30:00

Difficulty

Intermediate

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

What are Hands-On Labs?

Hands-On Labs are scenario-based learning environments where learners can practice without consequences. Don't compromise a system or waste money on expensive downloads. Practice real-world skills without the real-world risk, no assembly required.

Develop with WebJobs in Azure

In this hands-on lab, we will deploy a WebJob that resizes images. These images have been uploaded to blob storage, but we need smaller versions. This is a process we could use for something like a blog site, where smaller images are required for thumbnails and galleries.

Prerequisites

Login credentials are sitting on the main hands-on lab page. We'll need those for getting into the Azure Portal before we can do anything else.

There's a spot where we've got to wait about a minute between stopping and restarting the WebJob. If we don't wait, we might get errors processing new images. There will be another warning further down the lab guide, just be watching for it.

Without further ado, let's get right into it.

Download the Visual Studio solution, WebJob, and sample images

Using the Azure Portal, get into the All resources page in the dashboard, and click on our virtual machine. Near the top of the screen, click Connect and download the Remote Desktop Protocol (RDP) file, once the Download RDP button shows up.

In our RDP client, we'll use these login credentials:

Username: azureuser Password: LA!2018!Lab

The following script will download the PhotoStor Web App, the Thumbnailer WebJob, and some sample images that we will use in the lab. Copy it, then paste it into Powershell on the VM. Here's that code:

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
#

Let's make sure to leave the trailing hashtag. It will let the the script run 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.

Let's fire up Visual Studio 2017 in the VM and open the solution (.sln) file that we just downloaded. It should be sitting in our %userprofile%/Documents/VS/LA_PhotoStor/PhotoStor folder. Give it a minute to open everything up (there will be a "completed" type message at the bottom of the window), then get into the View menu and select Error list. We can look down in the lower portion of the window for any errors or warnings. If we don't see any, we're golden, and we can move along.

We'll do that by publishing the application. Right-click the PhotoStor project and click Publish. In the Pick a publish target window, choose Azure App Service, then pick Select existing from the list on the right. In the next window that pops up, the Subscription dropdown should autopopulate with our project, but we've got to pick our web app from the lower box (webapp-aueux), then click the OK button. Visual Studio will publish the Web App and open it in a web browser when the publishing is complete. We'll see a site that looks like this:

![PhotoStor](https://raw.githubusercontent.com/linuxacademy/content-az-300-lab-repos/master/images/photostor.png "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 menu.

Upload the sample images we downloaded earlier by either clicking the upload box or dragging them from File Explorer (but note that drag and drop does not work with Edge). Don't upload them all right now. We're going to need a couple for testing later.

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

![PhotoStor](https://raw.githubusercontent.com/linuxacademy/content-az-300-lab-repos/master/images/imagelist.png "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.

Navigate to the Web App. 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. We're creating three settings:

App Setting Name Value
AzureStorageConfig__ThumbnailContainer thumbnails
AzureWebJobsDashboard DefaultEndpointsProtocol=https;AccountName=;AccountKey=
AzureWebJobsStorage DefaultEndpointsProtocol=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.

We've got what we need now, after our little side trip, and we can add the new settings. The only thing left is to set the Always On slider to On.

!["Always On"](https://raw.githubusercontent.com/linuxacademy/content-az-300-lab-repos/master/images/AlwaysOn.png "Always On")

Click Save at the top of the pane.

Publish the Thumbnailer WebJob to your Web App

Now we are ready to publish our WebJob. On the virtal machine, close the PhotoStor Web App solution, saving if prompted. Open the Thumbnailer.sln file that we downloaded earlier (the one that's sitting in %userprofile%/Documents/VS/Thumbnailer/).

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. Right-click the Thumbnailer project again, but this time click Publish as Azure Webjob. In the window that pops up, select Microsoft Azure App Service as the publish target, pick our web app in that popout window, and then click OK. Back on the first popout, we can click Validate Connection to make sure our connection is good, then we can click Publish. You will see the following output when publishing has successfully completed:

!["WebJob published successfully!"](https://raw.githubusercontent.com/linuxacademy/content-az-300-lab-repos/master/images/WebJob_Publish.png "WebJob published successfully!")

STOP HERE!

Remember the mention of pausing while a WebJob restarts? This is it. Hang on here for a bit, and let the web app publish completely. Now is a good time to grab a coffee, go get the mail, or catch up on your Twitter feed. In a minute or two, it's safe to proceed.

Refresh your web browser to view the thumbnails

Refresh your web browser (or reopen it if you 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 also see thumbnails of the images on the right-side of the page!

![PhotoStorv2](https://raw.githubusercontent.com/linuxacademy/content-az-300-lab-repos/master/images/photostor_thumbs.png "PhotoStorv2")

Upload a few more images to blob storage

Upload a few more of the sample images we downloaded with that Powershell script earlier, by either clicking the upload box or dragging them from File Explorer (again, drag and drop 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, it only checks blob storage containers every 10 minutes for new incoming blobs. This means that our WebJob will eventually process the new incoming blobs, but it might take a while. 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, and scroll down to in the menu on the left. Click on WebJobs, highlight our Thumbnailer job, then click Stop up above. Once the WebJob is stopped (wait about a minute), refresh the Webjobs page (using the Azure Refresh button, not our web browser's) to make sure we see the job is stopped, then highlight it and click the Start button.

Now, if we head back to the end-user's view of our web app, we can hit our browser's refresh button, 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"](https://raw.githubusercontent.com/linuxacademy/content-az-300-lab-repos/master/images/WebJobDash.png "WebJob Dashboard")

Conclusion

We did it! Not only does our web app allow us to upload images but it automatically creates thumbnails of those images, so that visitors aren't chewing up bandwidth or waiting a long time for the big images to load. Congratulations!