Distributed and Cloud Computing Hands-on

SE/2015/012

11 min readAug 5, 2020

--

This article has been written as a partial requirement for the course : SENG 41283 : Distributed and Cloud Computing at University of Kelaniya, Sri Lanka. The main areas discussed here are :

setting up a sample environment in Azure cloud platform
the cloud infrastructure setup for a simple web application using the available services in Azure

Disclaimer : The website used in this article is only a sample online platform built by me and does not represent the NATIONAL BLOOD TRANSFUSION SERVICE — SRI LANKA or any of its entities.

Azure Dev Tools

What was formerly known by the names Microsoft Imagine, DreamSpark and MSDN-AA has now been replaced by Microsoft Azure Dev Tools. It is a program by Microsoft that provides access to students for facilities such as Microsoft software design, Microsoft developer tools, Cloud Computing Access and learning resources.

This article has been written based on Microsoft Azure services. First, I have created an account and activated the free credit of $200 dollars. This credit will be used up depending on our usage.

Azure Portal

The Azure portal is an alternative for command-line tools and has a graphical user interface. When you sign in to Azure and navigate to the portal, this is how the homepage looks like :

The portal is easy to use and allows users to manage their subscription and work their way around the portal to try out the available services.

Resource Group

First we start by creating a resource group for the project. For this project, I have created a resource group called: nbts_sl.

This resource group will hold all the related resources of our project and all of it can be managed as a group.

The infrastructure of the resource group can be generated as an Azure Resource Manager (ARM) template which is a JSON file that can be used to deploy the resources continuously without having to setup from scratch.

Some of the resources used in this project include App services, Azure Database for MySQL servers, Azure Active Directory, Front doors, CDN Profiles, Application Insights etc. Each resource can only exist in one resource group (i.e. app service xyz can only exist in one resource group)and services can be searched using the search bar.

App Service

Azure App Service enables users to build and host web apps, mobile back-ends and RESTful APIs in any programming language. It is an HTTP-based service and supports Docker as well.

I created an App service called nbtsslwebserver which will be used integrate all files of my website. The application I have used for this project is a PHP web app.

Details of the App Service created : nbtsslwebserver

The structure underneath the app service follows a folder structure that imitates the folder structure we generally see in our local environment in which the application resides. The application can be a single page or an integration of several files.

Once the app service is created, we need to deploy our PHP app to the created Azure app service. For this, Azure provides several methods such as continuous integration using a GitHub repo, Azure repo or Bitbucket repo and manual deployment using OneDrive, Dropbox or FTP. My files are stored in a local directory and therefore I have used manual deployment using an FTP connection.

For manual deployment, navigate to Deployment Center and choose FTP. From the Dashboard, we can obtain the FTPS endpoint, username and password to connect with WinSCP, which is the client tool I have used for this project to transfer files from the local directory to the cloud.

Copy the credentials and start a session with WinSCP.

Transfer all your files related to the website to /site/wwwroot/ pane

Once the file transfer is done, navigate to Configurations tab -> Default documents in Azure to add your homepage file as the web page that is displayed as the root URL. In my project, the homepage file name is main.php and it has been added.

The web application can now be accessed via the URL given in the overview of the web app service. Note that the name given when creating the app service is used in the URL.

The homepage of the website when the URL is accessed. This is the page set in default documents

MySQL Server

Azure provides MySQL database as a service because MySQL is the most used database engine in the world. MySQL offers scalability, performance and it is not a burden on the resources. 9 out of 10 websites use MySQL because it has been developed for SaaS. Popular platforms such as Facebook, YouTube also use MySQL.

My website has two forms that will be used to capture user information. The captured data should be stored in a back-end database.Therefore I need a MySQL server and a database in the cloud environment.

To create our server we will be using : Azure Database for MySQL servers.

For this project, I have created a MySQL server called nbts-db.

By default, Azure rejects all connections to the server and the databases inside the server. Therefore, we need to configure the firewall before connecting to Azure Database for MySQL for the first time. That is, we need to add the client machine’s public network IP address (or IP address range) in Connection Security tab.

For my project, I have allowed all IP addresses from 0.0.0.0 to 255.255.255.255 range and disabled SSL connection.

Connecting to the Server

Next step is to connect to the server and create our DB and tables. I have used mysql command-line tool from the Azure Cloud Shell in the browser for this.

Highlighted : Server name and Server Admin Name can be taken from ‘Properties’ tab. Use the password given when creating the server

Next we can create the Database and Tables. For my project I have used one DB called ‘forminfo’ and two tables : appointments and urgent_blood

Once created, the database and tables will be available in the cloud. If needed, data can be inserted into the table using MySQL.

Connecting the App to Azure Database

Now that we have the web app, a database and tables created, we need to make a connection between the two.

For this, I navigated to Connection Strings tab and copied the connection string relevant to the project. I have copied the PHP string as my website is a PHP project.

In this string, replace the password and db name with the password given when creating the database server and name of the database created. Include this string in the db connecting files of your application as this string is used to connect to the server from the application we created.

To configure SSL connectivity, download the SSL certificate given in https://docs.microsoft.com/en-us/azure/mysql/howto-configure-ssl . Transfer it to the web app using WinSCP and replace {ca-cert filename} in connection strings used.

The database and the application are now connected and the tables will be updated when a user accesses the forms in the website and submits information.

Form 1 in the website. Information from this form is recorded in the table : appointments

We can use the Azure Cloud Shell to query the table data.

Azure Active Directory

Azure Active Directory or Azure AD is the cloud-based identity and access management service provided by Microsoft and it supports personal Microsoft Account logins with the App service. To try this out, I have added a simple login button in the homepage which should take the user to login with Microsoft page. After successful login, the user should land on the post-login page which has a logout button. On click, the session should end and user should be taken back to the homepage.

By default my name and details are available in the directory when I open the Azure Active Directory service. This means

We need to first configure the app to use Microsoft Account login. To do this, I first created a new registration for the app by navigating to App registrations in Azure Active Directory service.

Next in Authentication tab of the registered app, the following should be configured :

Redirect URI — This is the page we direct the user to, after successful login.
Logout URL — The page we direct the user to, after successful logout and end of session
Select ID tokens under implicit grants

Copy the tenant (client) ID from Overview tab and the value given in Certificates and secrets tab. I used these values in the two files I created: Login authentication file and logout file. Both these files should be added to the cloud and the login and logout buttons should call these files when clicked.

After successful implementation, this is how it works :

Post-login page after successful sign in

Clicking on logout will end the session and user will be taken to the homepage

Adding a guest user to Azure Directory

By default I am the only user listed in the Azure directory. If I need to allow users from other organizations to collaborate with me and sign in to my web application, the users should be added to my directory as guest users.

To do this, simply head over to All Users tab in the default directory and click on New guest user. Add the user details and select a user role.

Azure provides a list of directory roles to choose from. Depending on our purpose, a suitable role can be assigned.

Directory roles. I have selected **Global Reader** role for the new user.

Once added, the new user will be listed in the directory.

The invited user will receive an email with the invitation to collaborate.

When clicked on the link and after successful sign in, the new user can view the web app in the access panel and also sign into the web app.

Front Doors

Azure Front Door Service is Microsoft’s highly available and scalable web application acceleration platform and global HTTP(s) load balancer. (reference). Front Doors are most suitable for websites that have global reach. Such applications can be impacted by the proximity of the user. Azure Front Door or Azure CDN has several distribution points and deliver content to users more faster due to proximity and optimized connections.

To try this out, I first created a Front Door by configuring the frontends, backend pools and and routing rules.

Now if we click on the URL given as ‘Frontend host’, we will be directed to the homepage of the application. The request will automatically get routed to the nearest server from the specified servers in the back-end pool.

Fronthend host URL given in overview tab

Why use Azure Front Door?

Accelerates application performance
Increases application availability
URL-based routing
Multiple-site hosting
Session affinity
URL redirection

Creating a CDN profile and endpoint

A CDN profile is a container for CDN endpoints and specifies a pricing tier. (reference)

(Note : Before creating a CDN profile, Microsoft CDN should be listed as a registered resource provider in the Azure subscription you are using.)

Search for CDN profiles using the search bar and create a new profile under the same resource group. For my project I have created a CDN profile called nationalbloodtransfusionservice

This CDN profile is used to create endpoints.

I then navigated to create an endpoint in the profile. Make sure a meaningful name is used for the endpoint as this the name given in the URL of the website and it will be used to access the cached resources at the domain <endpoint-name>.azureedge.net. In my project, the domain would be nationalbloodtransfusionservice.azureedge.net

For ‘original hostname’ I used the front door name.

Once the endpoint is successfully added, the endpoint hostname URL can be used to access the website application globally.

Application Insights

Application insights is similar to Google analytics. It is a service used to monitor metrics such as request rates, dependency rates, exceptions, page views, load performances, HTTP(s) calls, user and session counts, performance counters etc.

When the app service is created, the option to enable Application Insights is set to yes by default under the tab : Monitoring. It can also be created separately if required.

Application insights provide several telemetry views to visualize how the application is performing. Examples include : Smart detection, application map, usage analysis etc.