Building a back-end API by using Azure Storage and the Web Apps feature of Azure App Service

Prerequisites for this lab : PowerShell / Visual Studio Code / Azure Account / Download Labs Files here

Practical Labs 01: Build a back-end API by using Azure Storage and the Web Apps feature of Azure App Service

In the open browser window, go to the Azure portal (https://portal.azure.com).
At the sign-in page, enter the email address for your Microsoft account, and then select Next.
Enter the password for your Microsoft account, and then select Sign in.

Create a Storage Account

In the Azure portal’s navigation pane, select All services.

From the All services blade, select Storage Accounts.
From the Storage accounts blade, get your list of storage account instances.
From the Storage accounts blade, select + Create.
From the Create storage account blade, observe the tabs
from the blade, such as Basics, Tags, and Review + Create.

Select the Basics tab, and in the tab area, perform the following actions:
- Leave the Subscription text box set to its default value.
- In the Resource group section, select Create new, enter rg-exceed02102021, and then select OK.
- In the Storage account name text box, enter saexceed02102021.
- In the Region list, select the (US) East US region.
- In the Performance section, select Standard.
- In the Redundancy list, select Locally-redundant storage (LRS).
- Select Review + Create.
From the Review + Create tab, review the options that you specified in the previous steps.

Select Create to create the storage account by using your specified configuration.
From the Deployment blade, wait for the creation task to complete before moving forward with this lab.
Select the Go to resource button from the Deployment blade to go to the newly created storage account.

From the Storage account blade, find the Security + networking section, and then select Access keys.
From the Access keys blade, select Show keys.

Select any one of the keys, and then record the value of either of the Connection string boxes. You’ll use this value later in this excercise.

Upload a sample blob

In the Azure portal’s navigation pane, select Resource groups.
From the Resource groups blade, select the rg-exceed02102021 resource group that you created earlier in this lab.
From the rg-exceed02102021 blade, select the saexceed02102021 storage account that you created earlier in this lab.
From the Storage Account blade, in the Data storage section, select the Containers link.
In the Containers section, select + Container.

In the New container window, perform the following actions:
- In the Name text box, enter images.
- In the Public access level list, select Blob (anonymous read access for blobs only), and then select Create.

In the Containers section, select the newly created images container.
From the Container blade, select Upload.
In the Upload blob window, perform the following actions:
- In the Files section, select the Folder icon.
- In the File Explorer window, browse to Azurelabs01 (F):\Downloads\azurelabs01\01\Starter\Images, select the grilledcheese.jpg file, and then select Open.
- Ensure that the Overwrite if files already exist check box is selected, and then select Upload. Wait for the blob to upload before you continue with this lab.

Create a web app

In the Azure portal’s navigation pane, select Create a resource.
From the Create a resource blade, find the Search services and marketplace text box.
In the search box, enter Web App, and then select Enter.
From the Marketplace search results blade, select the Web App result.
From the Web App blade, select Create.

From the Create Web App blade, find the tabs from the blade, such as Basics.

Note: Each tab represents a step in the workflow to create a new web app. You can select Review + Create at any time to skip the remaining tabs.

From the Basics tab, perform the following actions:
- Leave the Subscription text box set to its default value.
- In the Resource group drop-down list, select rg-exceed02102021.
- In the Name text box, enter imgapiexceed02102021
- In the Publish section, select Code.
- In the Runtime stack drop-down list, select .NET Core 3.1 (LTS).
- In the Operating System section, select Windows.
- In the Region drop-down list, select the East US region.
- In the Windows Plan (East US) section, select Create new, enter the value ASP-exceed02102021 in the Name text box, and then select OK.
- Leave the SKU and size section set to its default value.
- Select Next: Deployment (Preview).
From the Deployment (Preview) tab, perform the following actions:
Select Next: Monitoring.
From the Monitoring tab, perform the following actions:
- In the Enable Application Insights section, select No.
- Select Review + Create.
From the Review + Create tab, review the options that you selected during the previous steps.

Select Create to create the web app by using your specified configuration. Wait for the creation task to complete before you move forward with this lab.

Configure the web app

In the Azure portal’s navigation pane, select Resource groups.
From the Resource groups blade, select the rg-exceed02102021 resource group that you created earlier in this lab.
From the rg-exceed02102021 blade, select the imgapiexceed02102021 web app that you created earlier in this lab.

Note: If the imgapiexceed02102021 web app is not listed, select Show hidden types to display it.

From the App Services blade, in the Settings section, select the Configuration link.
In the Configuration section, perform the following actions:
- Select the Application settings tab, and then select New application setting.
- In the Add/Edit application setting pop-up dialog, in the Name text box, enter StorageConnectionString.
- In the Value text box, enter the storage connection string that you copied earlier in this lab.
- Leave the Deployment slot setting text box set to its default value, and then select OK to close the pop-up dialog and return to the Configuration section.
- Select Save from the blade to persist your settings, and then select Continue.

Wait for your application settings to persist before you move forward with the lab.

From the App Services blade in the Settings section, select the Properties link.
In the Properties section, copy the value of the URL hyperlink. You’ll use this value later in the lab.

Deploy an ASP.NET web application to Web Apps

On the taskbar, select the Visual Studio Code icon.
From the File menu, select Open Folder.
In the File Explorer window, browse to Azurelabs01 (F):\Downloads\azurelabs01\01\Starter\API, and then select Select Folder.
In the Explorer pane of the Visual Studio Code window, expand the Controllers folder, and then select the ImagesController.cs file to open the file in the editor.
In the editor, in the ImagesController class on line 26, observe the GetCloudBlobContainer method and the code used to retrieve a container.
In the ImagesController class on line 36, observe the Get method and the code used to retrieve all blobs asynchronously from the images container.
In the ImagesController class on line 55, observe the Post method and the code used to persist an uploaded image to Storage.
On the taskbar, select the Windows Terminal icon.
At the open command prompt, enter the following command, and then select Enter to sign in to the Azure Command-Line Interface (CLI):

az login

In the Microsoft Edge browser window, perform the following actions:

Enter the email address for your Microsoft account, and then select Next.
Enter the password for your Microsoft account, and then select Sign in.

· Return to the currently open Command Prompt window. Wait for the sign-in process to finish.

· At the command prompt, enter the following command, and then select Enter to list all the apps in your rg-exceed02102021 resource group:

az webapp list --resource-group rg-exceed02102021 --query "[?starts_with(name, 'imgapi')]"

Enter the following command, and then select Enter to render only the name of the single app that has the imgapi* prefix:

az webapp list --resource-group rg-exceed02102021 --query "[?starts_with(name, 'imgapi')].{Name:name}" --output tsv

Enter the following command, and then select Enter to change the current directory to the Azurelabs01 (F):\Downloads\azurelabs01\01\Starter\API directory that contains the lab files:

cd F:\Downloads\azurelabs01\Labs\01\Starter\API\

Enter the following command, and then select Enter to deploy the api.zip file to the web app that you created earlier in this lab:

az webapp deployment source config-zip --resource-group rg-exceed02102021 --src api.zip --name imgapiexceed02102021

Note: Replace the <name-of-your-api-app> placeholder with the name of the web app that you created earlier in this lab. You recently queried this app’s name in the previous steps.

Wait for the deployment to complete before you move forward with this lab.

In the Azure portal’s navigation pane, select the Resource groups link.
From the Resource groups blade, find and select the rg-exceed02102021 resource group that you created earlier in this lab.
From the rg-exceed02102021 blade, select the imgapiexceed02102021 web app that you created earlier in this lab.
From the App Services blade, select Browse.
Perform a GET request to the root of the website, and then observe the JavaScript Object Notation (JSON) array that’s returned. This array should contain the URL for your single uploaded image in your Storage account.

Return to your browser window with the Azure portal.
Close the currently running Visual Studio Code and Windows Terminal applications.

Review

In this Lab, you created a web app in Azure and then deployed your ASP.NET web application to Web Apps by using the Azure CLI and Apache Kudu zip file deployment utility.

Reminder: Don’t forget to delete or shutdown all unused Azure resources after your labs for cost saving

Review

Leave a Reply Cancel reply