Practice 13 - MS Azure Public Cloud

In this practice session, we will try out a selection of Azure public cloud services. You will learn about different types of cloud services, how continuous integration works, how to deploy cloud resources using a command-line interface and how to test that the services have been deployed correctly.

The lab content is related to the RADON Horizon 2020 EU project (http://radon-h2020.eu/), which goal is to unlock the benefits of serverless FaaS for the European software industry using TOSCA language and developed tools.

G. Casale, M. Artac, W.-J. van den Heuvel, A. van Hoorn, P. Jakovits, F. Leymann, M. Long, V. Papanikolaou, D. Presenza, A. Russo, S. N. Srirama, D.A. Tamburri, M. Wurster, L. Zhu RADON: rational decomposition and orchestration for serverless computing. SICS Software-Intensive Cyber-Physical Systems. 2019 Jan 1-11. https://doi.org/10.1007/s00450-019-00413-w

References

Azure Cloud documentation: https://docs.microsoft.com/en-us/azure/?product=featured
Github handbook: https://guides.github.com/introduction/git-handbook/
Github Hello-world guide: https://guides.github.com/activities/hello-world/

Exercise 13.1 Accessing Azure Cloud portal

MS Azure cloud is integrated with Microsoft account and students of UT should be able to log in with their university account and be able to use the cloud resources under the Azure for Students subscription.

Log into Azure cloud: https://azure.microsoft.com/en-us/
- Use your university email and password
- If asked which subscription type to use, select "Azure for Students subscription".
Open the Azure Cloud portal: https://portal.azure.com/#home
Familiarize yourself with the available services: https://portal.azure.com/#allservices

Exercise 13.2 Deploying Apps in Azure Static Web App service

Azure Static Web App service can be used to deploy Web applications that need no backend components and which can be deployed as HTML or Javascript documents, where all the logic of the application is executed on the client-side. Currently this

Task 13.2.1 Creating a Github repository for a custom web page

In this task, we will create a simple HTML Web application Github repository.

Log into your Github (http://github.com/) account or create a new one.
Let's generate a copy (Not a full fork) of an example Azure Static Web HTML application GitHub project
- Go to https://github.com/staticwebdev/vanilla-basic/generate
- Assign a new name for the GitHub repository we are about to create. Something like: utcloud2021azapp
- Click Create repository from template
If you are unfamiliar with Git and Github, then read the guides in the References section of this lab guide.
Go to your repository. The application is a simple HTML with content written into index.html file.
- Modify the index.html file (Can edit directly in Github) and replace <h1>Vanilla JavaScript App</h1> inside the body with a custom message that includes your name.
- Feel free to add additional content or images to the HTML page, as long as your name is clearly visible on the page (You will be making a screenshot of the deployed page later)

Task 13.2.2 Deploying the web page on Azure cloud as a static Web App

In this task, we will deploy and configure an Azure cloud service for deploying the application directly from the GitHub repository.

Go to the Azure Cloud Portal: https://portal.azure.com/
Search for the Static Web Apps service
Create a new Static Web App
If you do not have a Resource group yet, create a new one.
Choose West Europe region
Sign in with your Github account
- This will provide MS Azure access to your GitHub account!
- MS Azure will use this to configure automated deployment configuration to detect whenever you push new commits to your application in Github. We will take a closer look at this in a later task.
Select your Github username as the Organization
Select the recently created HTTP application repository.
Select main as the branch
Select Custom as Build Presets (but leave all values as default under it)
Click Review and Create
After the deployment has been finished, you can go to the created Static Web Apps resource and click on the URL of the deployed service to access your webpage:

Task 13.2.3 Modifying the app and investigating the automatic deployment pipeline

Like briefly mentioned before, Azure sets up an automated workflow, which is triggered when you commit changes to your Web Application source code in Github.

You will modify your application in GitHub, check whether the application in Azure cloud is automatically redeployed, and investigate how the automated redeployment is implemented.

Modify the Index.html file in Github and commit (and push if not using GitHub website directly) the changes.
The GitHub-to-Azure integration is implemented as GitHub workflow, which is defined inside your repository (Azure created it there) in the .github/workflows folder'
Open the workflow file and read through it
- The workflow defines different integration jobs that are triggered on specific Git events.
- For example, The build_and_deploy_job job is triggered when GitHub event type is PUSH (new commits have been pushed to GitHub)
- In practice, a command inside a Docker container (Image type: Azure/static-web-apps-deploy@v0.0.1-preview) is executed every time a PUSH event happens. This command uses Azure cloud API to push new changes into the Azure Static App service.
For Github to be able to trigger and execute actions inside the Windows Azure platform, it also saved the access token as a GitHub secret inside GitHub linked to your repository.
- Inside the workflow definition, these secrets are accessed programmatically like this: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_XXXXXXXXXXXXXXX}}
- You can update or remove secrets by going to your project settings and opening the Secrets page.
You can see the WorkFlow executions in the Actions tab inside your Github project.
- You can see which workflow actions were successful, their status, and also design new workflows yourself
You can revoke Azure access to your GitHub account inside your Github profile settings (In: https://github.com/settings/applications under Authorized OAuth Apps).
- But do not do this until you have at least completed and submitted all the practice session deliverables
Take a screenshot of the deployed Static Web App
Answer: How long does it take for Azure to update what your application is displaying?
- You can try to test it manually (modify the HTML page and check how long it takes for Azure to update the live page) or check how long the Update action actually takes time (By checking the Actions tab in GitHub)

PS! This service was launched in May 2020, and is in Preview mode, meaning it does not cost anything. That may change later, but users get 30 days notification if that is changed. Static Web Apps supports only client-side applications (HTML, JS). If you want more dynamic websites (for example that use Python or PHP to generate web pages on the server-side) then one can use Azure functions instead.

Exercise 13.3 Deploying Azure Serverless functions

In this task, you will learn how to use the Azure command-line interface (CLI) to manage Azure services and use it to deploy a Serverless function. We will set up an Azure VM, install Azure CLI software on it, download and test a serverless function implementation first locally inside the VM and finally deploy it inside Azure Cloud.

The Serverless function implementation and deployment guide we use in this lab task has been created by scholars from the Imperial College of London: Shreshth Tuli, Runan Wang, and Giuliano Casale for their Performance Engineering course https://www.imperial.ac.uk/computing/current-students/courses/60017/

The function we are going to use in this task is related to style-transfer machine learning models. Artistic style transfer models mix the content of an image with the style of another image. The style transfer model used in this function is called Rain Princess. Examples of the styles can be seen here.

NB! Before you start, you are tasked with an additional responsibility to measure how long it takes you to solve THIS Exercise (13.3).

Note down when you start and note down when you finish solving it.
No need to try to rush, we would like to know the average time it takes to set up, deploy and test Serverless functions using CLI commands in Azure.

Task 13.3.1 Create an Azure instance for testing and deploying Serverless function

In this task, you will deploy an Azure cloud VM which we will use in the next task to deploy and test an Azure function locally before deploying it to the cloud.

Search for the Virtual machines Azure service inside the Azure Cloud console
Create a New Azure VM
- Region: West Europe
- Image: ubuntu 18.04
- Size: default (Standard D2s_v3)
- Authentication type: SSH public key
- SSH public key source: generate new (unless you have already created one inside Azure)
- username: azureuser
- Rest of the settings can stay the same.
Deploy the VM
NB! make sure you download and save the SSH key file. it is needed to connect to the deployed VM.
After deployment, go to the VM resource page and copy the VM IP address

Task 13.3.2 Deploy a Serverless function inside the VM

We will set up software on the VM for testing Serverless functions, download the function and run it inside the server.

Connect to the instance over SSH using the specified VM IP, username, and SSH key. Similar to how you connect to OpenStack instances in previous labs.
Install the required software tools that we will use in the next steps
- sudo apt-get update
- apt-get install python3-venv
Install Azure CLI package:
- curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash

Install Azure function tools:

wget -q https://packages.microsoft.com/config/ubuntu/19.04/packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
sudo apt-get update
sudo apt-get install azure-functions-core-tools

Log in to the Azure cloud
- az login
- Follow the steps described in the output-
Open port 7071 for the VM:
- az vm open-port --resource-group AZURE_RESOURCE_GROUP --name VIRTUAL_MACHINE_NAME --port 7071
  - NB! Replace VIRTUAL_MACHINE_NAME with the name of the VM you created
  - NB! Replace AZURE_RESOURCE_GROUP with the resource group name your VM belongs to
Download the Serverless function source code repository copy into your PC:
- Download location: https://owncloud.ut.ee/owncloud/index.php/s/F2q4TEZgKabTokF
- Ask for the password in Slack from Pelle Jakovits
Copy the downloaded zip file to the Azure VM using scp.
- SCP command template: scp -i PATH_TO_DOWNLOADED_SSH_KEY_FILE bootcamp-imp-coursework-example.zip azureuser@<IP OF VM>: (do not forget the trailing :)
- For example: scp -i ~/azurekeys/pellekey.pem bootcamp-imp-coursework-example.zip azureuser@172.17.67.200:
- If you usually use Putty to connect to cloud VMs, You can use Git Bash (https://gitforwindows.org/) or WinSCP instead for file transfer over SSH.
Unpack the zip file using unzip program
Go to the modules/function-deploy/functions folder inside the unpacked folder
- Create a new Python virtual environment: python3 -m venv .venv
- Activate the virtual environment: source .venv/bin/activate
- Update the Python pip package manager: pip install --upgrade pip
- Install all the Python libraries specified inside the requirements.txt file: pip install -r requirements.txt
Start the function service locally: func host start
Check that the function is deployed, go to http://<public_ip>:7071/
Test the function deployed on VM by submitting an image file:
- Open a new terminal connection to the instance and run the following command inside the 60017-2021-cwk2-master folder (or run this command in a different Linux Server/workstation)
- http http://<public_ip>:7071/api/onnx @tutorial/babyyoda.jpg > output.jpg
- May have to install Linux package httpie to use this command
- output of the command will be saved as output.jpg file.
  - You will have to download the output.jpg file to see the result unless you run this command inside your own computer.
Example input and output:

Task 13.3.3 Deploy the function inside Azure Cloud globally

We will use the previously set up VM to run the Azure Cloud CLI command to deploy the function globally inside the Azure cloud and verify that it is working properly.

Create an Azure storage account required for uploading function code.
- Go to the Azure portal and search for “storage accounts (classic)” service.
- Under Services, select “storage accounts (classic)”.
- Add a new storage account and assign a name for it.
- Note down the name of the storage account, you will need to use it later (STORAGE_ACCOUNT).
Deploy the function:
- NB! Before running the following command, make sure that all the parameters match the actual resource names you have created in the previous steps.
  - replace FUNCTION_NAME with a unique name for your function that contains your last name.
  - Do same with STORAGE_ACCOUNT and RESOURCE_GROUP
- ```
az functionapp create \
--resource-group RESOURCE_GROUP \
--os-type Linux \
--consumption-plan-location westeurope \
--runtime python \
--runtime-version 3.7 \
--name FUNCTION_NAME \
--storage-account STORAGE_ACCOUNT
```
Publish the function code under the created service:
- Make sure you run the following code in the modules/function-deploy/functions directory inside the project folder
- func azure functionapp publish FUNCTION_NAME --build remote --python
- Replace FUNCTION_NAME with your function name.
Check what is the function endpoint URL by going to the Azure Portal, searching for the Function App service.
- Go to your function app service -> Functions -> onnx -> Get function URL.
- NB! Function will not have the same endpoint than we used while testing locally inside the VM
- It will include an additional code component, something like this: https://functionname.azurewebsites.net/api/onnx?code=5HbZjm8m...
Test the function by submitting a image file by opening a new terminal connection to the VM and running the following command inside the 60017-2021-cwk2-master folder
- http http://<FUNCTION_ENDPOINT_> @tutorial/babyyoda.jpg > output.jpg
Download the resulting file and check it.

NB! Note down the time when you have finished solving this task and everything works properly.

Deliverables:

Link to the GitHub repository created in Task 13.2.1
Answer: How long does it take for Azure to update what your application is displaying? (Task 13.2.3)
Screenshot of the deployed Static Web App (Task 13.2.3)
Screenshot of the deployed function in the Azure VM (Task 13.3.2)
URL to the function deployed inside the Azure Cloud (Task 13.3.3)
Answer: How long did it take you to solve the Exercise 13.3 Deploying Azure Serverless functions

NB! Remmember to shut down or remove the Azure VM after you have finished! otherwise it will keep spending your credits.

13. lab 13

Solutions for this task can no longer be submitted.

Possible solutions to potential issues

If the resulting image is 0 bytes, it means that the request did not return an image file.
- It may be because you are not using the full Azure function endpoint.
- Check what is the function endpoint URL by going to the Azure Portal, searching for the Function App service.
  - Go to your function app service -> Functions -> onnx -> Get function URL.
  - NB! Function will not have the same endpoint than we used while testing locally inside the VM
  - It will include an additional code component, something like this: https://functionname.azurewebsites.net/api/onnx?code=5HbZjm8m...
If you get an error about Unprotected Private key file when using SSH or SCP commands to connect to the VM:
- It means that the file permissions of the downloaded secret SSH key file should be set lower, so other users inside your system do not have permissions to see the secret key file.
- Using the Linux command chmod 600 PATH_TO_KEY_FILE should solve this issue
Error: Service not available
- Seems there was a major Azure outage and the West EU availability zone was not available during at least one day
- Creating a Resource group, storage account and function inside a different Cloud Availability zone worked as an alternative.
  - Choose North Europe instead of West Europe.
  - The respective option specifying north europe when creating the function would be: --consumption-plan-location northeurope

Cloud Computing 2020/21 spring