Building a web API & web application on Azure platform as a service.

Introduction: All my articles are compiled into simple steps with detailed screen shots and elaborative description. By following these steps even, a novice programmer should be able to replicate scenario. Please go through the steps and provide your valuable feedback to make my next articles more clearer and intent.
Srinivas

Note: I took help of various internet sources while researching this item. Credit goes to internet and Microsoft communities.

This is my first article on Azure.

Follow below mentioned 25 steps to build and deploy a web application on Azure platform as a service

After completing this blog, you will be able to do

Create various apps by using App Service.
Configure application settings for an app
Deploy apps by using Azure Command-Line Interface (CLI), and zip file deployment.

Step 1: Open Azure portal (https://portal.azure.com)

Step 2: Create a new resource group by clicking on Resource Groups icon on home page.

What is Resource Group? – Resource group is a container which holds all resources for an azure application. It’s a kind of grouping and managing resources.

Give a unique group name and use the region which ever is near to you.

Step 3: Now we need to create a storage account.

What is Storage account? – An Azure storage account contains all of your data objects like blobs, files, queues, tables and disks. Azure storage account provides a unique name space by using which you can access data over http & https. Data in azure storage account is durable, highly available, secure and scalable.

Create a new storage account by clicking on Storage Account button on home page or Create resource icon. While creating storage account, we need to provide the resource group just now we created.

In first tab select the resource group, give a unique name for storage account and select the appropriate location. Please leave the next tabs with default selections. And click on Create.

Step 4: Access the storage account once it is created. Go to the Access Keys section and copy the value from Connection String text box. The connection string we will used in our application at later stages to access the storage account.

Step 5: Now it’s time to create a blob container in storage account to store images. These images later can be accessed by our dot net application. Go to storage account we created in earlier steps. Select Container link in Blob service section and create a new container.

Step 6: Create a blob container as shown below. While creating the blob I choose anonymous read access, so that application can read blob data without any authorization.

Step 7: Access the images blob container just created in previous step and click on upload button to upload all your files. Here I am uploading all jpg files.

Step 8: 6 Files have been uploaded to our blob container as shown below.

Step 9: Now it’s time to create an app in azure so that we can deploy a dot net API application later to this app. Click on App services button available on home page and add a new app service.

Step 10: Create new web app from app service as shown below. While creating, choose dot net core, so that we can deploy a dot net core application later. Please leave other tabs to default values. This app will be used like an api to access our blob container.

While creating the web app, create a new App service plan, the same need to used it for web application also.

Step 11: Please select the web app just now created and configure it to use the storage account we created in earlier steps. To do that, select configuration link in settings section and create a new application setting for web app.

Step 12: Create new application setting as shown below. Put the value of connection string we copied earlier while creating the storage account. Save the changes. Please make sure the same Name(MyConnectionString) is being used in API configuration code.

Step 13: Now select properties link from the settings section and copy the URL mentioned. This will be our API Link.We will use this URL later in our article.

Step 14: Now its time to look at dot net core API application, which can be used to access the blob container. Create a new API application by using dot net core. And open by using Visual studio code. ( You can use existing application available in github also). After creating API, add a new Controller and name it as ImagesController. This controller contains methods to read and write images from blob container we created in azure. Created HttPClient and Options variables and initialized in constructor. Created a method called “GetCloudBlobContainer” which initializes connection to blob and give the access.

Step 15: Created Get and POST methods to retrieve and post new images to the blob container.

Step 16 : Now it’s time to deploy this API to the web app we created in earlier steps. Launch new terminal from visual studio code.

Step 17: Run the command AZ login, which will launch login page of azure. Give your credentials and authorise. Now your terminal connected to azure.

Step 18: Run below command to deploy API application to the web app we created. Below command will deploy the code as zip file. Please see the status code in below image after running the command.

az webapp deployment source config-zip –resource-group appSrcGrp –src api.zip –name imgapisrinivasmateti

Step 19: Your deployment was successful. If you browse the api URL, application will retrieve information from blob container as shown below.

Step 20: We already completed API deployment, Now we need to work on web application, which consumes above mentioned API. This web application is a user interface which reads and writes information to blob. Create a new web app in azure interface as shown below.

Step 21: As shown in step #11, create a key in the web application to store API url.

Step 22:Now we need to work on the web application code. Create a new dot net core application and add below mentioned code to application. Add 2 methods to get and post images by calling the API.

Step 23: Snap shot of view logic, to display and post images to azure container.

Step 24: After building the application, deploy the same to azure web app we created later in this article. Use below mentioned command to deploy the application.

az webapp deployment source config-zip –resource-group appSrcGrp –src web.zip –name imgwebsrinivasmateti

Step 25: Web application is deployed and now you can access it. Please see below mentioned snap shot after accessing application. You can upload images to Azure blob by using this web application.