Azure Developer College

# 💎 Breakout 2: Add a serverless microservice to our sample app and include messaging 💎

⏲️ Est. time to complete: 45 min. ⏲️

# Here is what you will learn 🎯

Time for our second "Break-Out" session!

We now will deploy all required services of our SCM Contacts Management app to Azure, including the Vue.js Single Page Application. To host the SPA, which is basically a static website, we make use of the Static Website Hosting (opens new window) option of Azure Storage Accounts. This is the cheapest option to host applications built e.g. with Angular, React or like in our case Vue.JS.

We also add a second service, that allows us to save images for our contacts. The service will be implemented in .NET Core and will use Azure Storage Queues (to make you familiar with a messaging service option in Azure) to notify an Azure Function that in turn creates thumbnails of the images. The results will then be saved in an Azure Storage Account.

At the end of the day, this will be the architecture of our SCM Contacts Management application:

architecture_day2

# Table Of Contents

  1. Services to handle Contact Images
  2. Deploy the Azure Function to resize images
  3. Deploy the Azure Web App providing the API to store images
  4. Host the Single Page Application in Azure
  5. Wrap-Up

# Services to handle Contact Images

We will start implementing our target architecture by adding a Storage Account to save contact images.

# Storage Account (Container/Queue)

Therefore, create a Storage Account in the resource group you took for the first breakout session (should be scm-breakout-rg). Create the account having these parameters:

Parameter Value
Name the storage account <YOUR_PREFIX>scmresources
Location West Europe
Performance Standard
Account Kind Storage V2
Replication LRS
Access Tier Hot

When the Storage Account has been created, add two containers where we will be storing the images:

Container Name Public Access Level
rawimages Blob
thumbnails Blob

Also, add a new Queue in your Storage Account. Name the queue thumbnails.

The infrastructure for handling images regarding storage and messaging is now set up.

# Azure Function for Image Manipulation

In the Serverless challenge, we created the Azure Function via the Visual Studio Code wizard. Now, let's see how the the Portal experience is like.

Go to your resource group (scm-breakout-rg) and add an Azure Function. To do so search for "Function App" in the wizard.

Follow the wizard and when asked, enter the following information (only important information will be mentioned):

  • Basic Tab
    Parameter Value
    Function App name choose a globally unique name
    Publish Code
    Runtime Stack .NET Core
    Version 3.1
    Region: West Europe
  • Hosting Tab
    Parameter Value
    Storage Account choose the one you created before in this challenge
    Operating System Windows
    Plan Type Consumption (Serverless)
  • Monitoring
    Parameter Value
    Enable AppInsights No

portal_bo2_func

When the Function has been created, we need to add a few Configuration settings that our image manipulation function needs to be working correctly:

  • Open the Azure Function and switch to the Configuration view.

  • Add the following Configuration settings

    Parameter Value / Hints
    QueueName thumbnails
    StorageAccountConnectionString take the Connection String from your Storage Account (under Access Keys)
    ImageProcessorOptions__StorageAccountConnectionString take the Connection String from your Storage Account (under Access Keys)
    ImageProcessorOptions__ImageWidth 100

    TIP

    📝 You should open the portal in a second tab in your browser, because you need to switch back and forth copying values from different locations.

  • Save your settings. The Functions app will now restart to apply your changes.

# Deploy the Azure Function to resize images

Now it is time to deploy the Image Resizer Function App to Azure. Therefor, you need to open a new Visual Studio Code Workspace file. Please go to the folder day2 and run code day2-breakout2.code-workspace from the command line. This will open the workspace dedicated to this second breakout challenge.

You will see the following folder structure:

Day2 Workspace Structure - Breakout 2

You will see two more projects added to the workspace compared to Breakout 1 (the remaining folders are the same as in the previous breakout):

  • Resources API - contains the backend logic for storing images for contacts objects
  • Image Resizer Function - contains the Azure Function code to handle image resize operations

To deploy the function follow these steps:

  • right-click on the Image Resizer Function folder and click "Deploy to Function App..."
  • select the Azure Function you previously created as the deployment target and confirm the dialog

The deployment of you function starts and after a few seconds, it is running in Azure.

# Deploy the Azure Web App providing the API to store images

We need to add another Azure Web App to host the "Resources API" of our SCM Contacts application:

  • Go to your resource group scm-breakout-rg
  • Create an Azure Web App (you can choose to use the Portal or the Azure CLI: OS - Windows, RuntimeStack - .NET Core 3.1 (LTS), Size - S1, AppInsights is not needed at the moment). You can choose the same settings as for the Contacts API.

When the deployment has finished, we also need to add a few settings. Open the Web App in the Portal and go to the "Configuration" view (under Settings):

  • add the following parameters:
    Parameter Value / Hints
    ImageStoreOptions__StorageAccountConnectionString take the Connection String from your Storage Account created in this Break Out session (under Access Keys)
    StorageQueueOptions__StorageAccountConnectionString take the Connection String from your Storage Account created in this Break Out session (under Access Keys)
    ImageStoreOptions__ImageContainer rawimages
    StorageQueueOptions__ImageContainer rawimages
    ImageStoreOptions__ThumbnailContainer thumbnails
    StorageQueueOptions__Queue thumbnails
    StorageQueueOptions__ThumbnailContainer thumbnails

TIP

Now, go back to Visual Studio Code and "right-click deploy" the API from the Resources API folder to the Azure Web App.

Time for testing!

# Test with you local Single Page Application

When everything has been deployed to Azure:

  • Open the settings.js file of your SPA (folder Frontend --> public/settings)
  • Adjust the resourcesEndpoint property.
  • Make sure, that endpoint points to the Contacts API in Azure.
  • Enter the value of your newly deployed Resources API for it, e.g. https://scmimageresource.azurewebsites.net/ (opens new window).
  • Switch to the "Debug" view and start the Single Page Application (dropdown: Day2 - Launch Frontend).

To test everything we just set up, create a new Contact and open the details of it afterwards. On the right side box, you should now see a button called "CHANGE AVATAR".

browser_avatar

Upload a picture and save the Contact!.

# Host the Single Page Application in Azure

We still run the Single Page Application on our local machine. Time to switch to hosting in Azure. As mentioned before, we make use of the "Static Website" feature of Azure Storage Accounts.

It's very simple to use:

  • Create a new Azure Storage Account
  • Go to "Static website" under Settings of your Azure Storage Account and enable it
  • Choose index.html as Index document name and Error document path

portal_static_website

TIP

📝 When you save the settings, Azure will create a new container called $web where you can copy static (web) files to. Azure will serve the contents of this containers as "Static Website". See more on the official documentation (opens new window).

Now open a command-line for the folder Frontend. Right-click on it and choose "Open in Integrated Terminal":

vscode_integrated_terminal

In the shell, run the following command:

$ npm run build

> scmfe@0.1.0 build /Users/yourname/dev/azure-developer-college/day2/apps/frontend/scmfe
> vue-cli-service build

   Building for production...
   ...
   ...
   ..
   .

 DONE  Build complete. The dist directory is ready to be deployed.

This starts a local build of the Vue.JS application, which puts all results/artifacts (the static website itself) into a dist folder under Frontend. When the build has finished, right-click on that dist folder and choose "Deploy to Static Website via Azure Storage" and select the correct storage account.

vscode_deploy_staticwebsite

When the deployment to Azure has finished, VS Code will show a popup where you can click on "Browse to website" to open your Vue.JS app running in Azure. You can also find the URL in the settings of the static website under "Primary Endpoint").

# Wrap-Up

🎉 Congratulations 🎉

You have just created your first modern, multi-service Azure-backed application. You made use of:

All in combination with a modern Vue.JS frontend that is also working on mobile devices!

◀ Previous challenge | 🔼 Day 2 | Next challenge ▶