05-challenge-bo-2.md

💎 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 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:

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	6
  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

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:

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 6 (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/.
• 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".

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

:::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. :::

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

In the shell, run the following command:

$ npm run build

> [email protected] 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.

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:

• Azure AppServices
• Storage Accounts
• Messaging (Azure Storage Queues)
• Serverless aka Azure Function Apps
• Static website hosting

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

◀ Previous challenge | 🔼 Day 2 | Next challenge ▶