Sample Environment in Azure Cloud Platform Based on the Shared Cloud Architecture

I have come up with some simple functions to describe the some of Azure cloud platform features of Resource Manager, Active Directory, Front Door, Web App, Function App and Storage(MySQL database,Azure Storage). The article is as an requirement of course SENG 41283 : Distributed and Cloud Computing and link https://science.kln.ac.lk/tunits/setu/index.php/component/sppagebuilder/90-seng-41283

Before begin it needs to create an Azure account with an active subscription after that can sign in to Azure portal at https://portal.azure.com. After the login you can see The Azure home like,

Azure home

it can navigate to what we want. Then lets begin,

1. Resource Manager

Resource manager is the deployment and management service for Azure. It groups a collection of assets in logical way to monitor, access control and manage all resources in the Azure account. The Resource Manager has four level of scope of management groups, subscriptions(Your subscription), resource groups and azure resources(Virtual machines,Storage,Web apps and etc.). To get the services we have to create resource group in the Azure.

How to create Resource Group?

Click on Azure Portal Menu -> Select Resource groups->Create

After that it will move to below window

Resource group creating view

For the subscription you are required to choose your subscription method from the list.(In my case I have used Student subscription.)

And then you are required to give a universally unique name to it as you wish. The azure will helps you to create universally unique name where needs unique name.

For the region it is better to select closet region to your client from the drop down list.

Then finally you can create the resource group by clicking create button. It will take less than a minute to create the Resource group.

Overview from https://docs.microsoft.com/en-us/azure/azure-resource-manager/management/overview

Using resource group I have created simple system to upload images to database and generate pdf from created html page. For that I used angular and ASP.Net MVC (Model View Controller).

Lets move to second step,

2.Azure Active Directory

Azure Active Directory(AD) is Microsoft’s multi-tenant, cloud-based directory and identity management service. For an organization, Azure AD helps employees sign up to multiple services and access them anywhere over the cloud with a single set of login credentials.

Click on Azure Active Directory,

then it will shows the Active Directory’s features like below,

In my case I used external app to integrate Azure AD. Since Azure target around B2B, B2C and Azure’s auth user experiences, Azure AD External Identities and the new set of features were created. With Azure AD External Identities, Azure makes a whole bunch of investments that will make it easier for organizations and developers to secure, manage and build apps that connect with different types of users outside an organization. For the configuration I used Active Directory Authentication Library (ADAL) for Angular6 library for integrating Azure AD into my system.

To install library, we have to insert below code into IDE terminal

npm install microsoft-adal-angular6

After that import the ADAL module to the app.module which is in Angular application.

import { MsAdalAngular6Module,AuthenticationGuard } from ‘microsoft-adal-angular6’;

After importing ADAL module to the app.module

To obtain tenent, clientId, redirectUri, endpoints and postLogoutRedirectUri we need to register using App registration feature in Azure AD.

Click on App Registration -> Click on New registration

Then you will see this kind of window. In there as the name you are required to give a unique name.

In Supported account types you are able to choose who can access to the system.

We can configure the Redirect URI from here as well as later.

And finally by clicking to Register it will register the cloud app.

To confirmation click on app registration again and see whether the app was registered. Then click on the app, it will show,

Now we can enter these data into our angular app to integrate. And also can edit RedirectUri.

To obtain URIs we need create to create an App service in Azure.

3.App services

Azure App Service is an HTTP-based service for hosting web applications, REST APIs, and mobile back ends. It provides to develop languages like .NET, .NET Core, Java, Ruby, Node.js, PHP, or Python. It has power such as security, load balancing, auto scaling, and automated management. And also can take advantage of its DevOps capabilities, such as continuous deployment from Azure DevOps, GitHub, Docker Hub, and other sources, package management, custom domain, and TLS/SSL certificates.

To create an App service

Click on App services -> Create New

As before need to choose subscription method.

And then Resource group which we have created.(Or we can create new one by clicking create new)

For the Name universally unique name should be entered.

Since we have coded app we have to tick on code in publish field.

For the runtime stack ,provide to choose your preference language which the external app was created.

And choose the OS

Make sure to use same region as used in previous operations . Otherwise it popups an warning.

Then press create.

After creating the app will be displayed in app services stack an after select the app it will look,

Here the URI for our app.

After this need complete the angular app.

In my app I have created 2 pages, named as login-form and dashboard to route the according to the login action.

According to routing I have configured my Angular app as follows,

login-form.html

login-form.ts

I have used login-form as the login page.

dashboard.html

dashboard.ts

After login it will direct to dashboard. And it can logout from this page.

app-routing.module.ts

From here I have set login-form path as LoginComponent, and if it is given access it will be directed to dashboard,and if has nothing it will redirected to login-form, the path test for the testing purpose.

And the after the stuff were done, we need to compress the project into single directory called dist with the hope of host on a server. To do that,

ng build — prod

therefor I used WINSCP. To publish my website it needs a domain name, port number,user name and password in WINSCP using FTP (File Transfer Protocol). here is the view of WINSCP FTP client.

To accomplish host name, username and password, need to configure a before created app in Azure according to use FTP connection to access the files.

therefore,

Click on App Services -> Click your app -> Select Deployment Center -> Select FTP under Manual Deployment (push / sync) topic.

Using these credential we can login. After that drag the files in the dist file in to server. Then you can run the app using provided URI.

For the describe Azure front door I have to create another two Azure web apps which are working as the services in back end. Therefore I used ASP.Net and .Net core. web app in Visual Studio.

One app for upload images into database,

I have used MySQL database to connect this app. Therefore it needs to configure the server in Azure for MySQL.

Click Create resource -> Select Database field -> Click Azure for MySQL

Additionally you have to include server name and account credentials.

And then create.

After creating your Azure DB it will display,

All the credentials to create new connection. I have used MySQL workbench to create tables.

Create new connection in MySQL workbench

To create a connection, we have to insert above details into these fields to manage our Azure database.

After configurations the given connection string can be inserted to ASP.Net project.

After development of my web app in Visual Studio, we can publish it to Azure web app by right clicking on the project and selecting publish.

Then it shows 3 methods to publish. Among them I used import profile method. To achieve a profile we need to download published profile of our relevant Azure web app.

Get publish profile from Azure

Here is the final publish step.

And also I have done same thing to my next web app called Html To Pdf Generator web app.

Then lets move to Azure front door

4.Azure Front Door

Azure front door

Azure Front Door enables to define, manage, and monitor the global routing for web traffic by optimizing for best performance and for maintain high availability. Using Front Door, can be able to transform multi-region consumer and enterprise applications into high-performance personalized modern applications, APIs, and contents.

Way of the Azure front door working.

To use Azure front door I have used below method,

Search for Azure front doors -> Create New ->

Add the resource group

There is an additional things have to do when creating a front door, click to configuration tab. then it will show three windows as Frontends/domains, Backend pools and Routing rules. So there are some configurations to be done for each individually. For my case I have used URL based routing.

In Frontends/domains, we have to include unique name to our frontend.

After adding frontends, we can move to backend pool. Here also we have to add unique name to Name field.

And then we have to add our first web service host name to backend by clicking Add a backend.

For the path we can give the directory path within //. It means that the direction path after hash tag in the main path.

Rest of them can be changed according to our preference.

And click add.

Here is the main thing of the Azure front doors which means that routing the whole apps according to our guidance.

For the Name we can give unique name like before.

Accepted protocols can be selected from the list.

It will be automatically selected the frontends/domains which we add in frontends/domains section. It is for routing to frontend.

We have to add a path to match the backend services. Once the path is matched it will execute the routing rules which we are given to the rules engine.

We can choose redirect or forward for routing type. In my case it is needed to forward after login to ImageLoader.

After that for the next web app I have update the routing rule by giving another path.

After That Lets move to Azure function app.

5. Function app

Azure Functions allows to run functions without involving about application infrastructure. The function is “triggered” by a specific type of events like responding to messages, running on a schedule, or as the result of an HTTP request.

For create Azure Function app

Click on New -> Select Function App

Fill the stuff according to previous methods.

So I have created a simple function app to trigger to display hello message message according to Http trigger. To do that I have followed Microsoft docs for Azure function app.

Here is my app code

So That’s it about my description.

Thank you!

References-

Azure documentation

Stack Overflow - Where Developers Learn, Share, & Build Careers

Setup Angular Application To Use Azure AD Authentication

My Source code

FrontEndAngular — https://github.com/dmpwuok/FrontEndForAzure.git

PdfConverter- https://github.com/dmpwuok/AzureBackendServices.git

ImageLoader- https://github.com/dmpwuok/AzureBackEndApps.git

FunctionApp — https://github.com/dmpwuok/AzureFunctionApp.git

ARM Template for my Azure resources — https://github.com/dmpwuok/SENG-41283-arm-templates-under.git