Sample Environment in Azure Cloud Platform.

This article is about set up a sample environment in azure cloud platform based on shares cloud architecture.

Here is the architecture diagram of the environment.

In here i used azure resources to deploy this project.

Azure Resources

Azure web app

Azure Function

Azure Database for MySQL server

Azure Cache for Redis

Azure Storage

Application Insights

Azure front door

Azure Static web app

Azure Firewall

Now we discuss about how that resoureces used in this project.

1. Create Azure Resource Group.
2. Azure Web app for Redis Cache.
3. Azure web app for access MySQL database.
4. Azure Function for uploading files.
5. Azure front door.
6. Angular front end service.
7. Set up Firewalls.

1. Create Azure Resource group.

First i created the resource group to include other resources.A resource group in Azure is a container in which the metadata for a logical group of resources is stored like Web app, My SQL db, Function app, Virtual Machines etc. Those all resources managed as a group. As well as, this resources like an objects that are used to represent your services in azure. Then users can easily deploy the resources.

Create a Resource Group

Select create a resource in Azure services.

Add Azure subscription, Resource group and select region. Next Review & create the resource group. Now you can add the other recourse to the resource group.

2. Azure Web App for Redis Cache

https://github.com/KumudithaGimnath/web-app-service1

Now we add the web app from the resource group

Then Create the web app.

Now select the subscriptions , add resource group and instance details of name, runtime stack and region. Finally Review and create the web app.

After creating the web app commit the Nodejs project to github repository.

Next go to the github/workflows and add the highlighted points to the yml file.

Next commit this yml file.

Now you have to add the secrets. For that you have to go to the azure web app and click the Get publish profile and download it.

After downlod that text file, go to the github secrets and add new secret, next paste the text file to the text box and add it.

Next add Azure Cache for Redis to the Resource group

Next set up the DNS name,Subscription and Resource group and create the new redis cache.

Next add configuration of the Redis Host, Redis password and Redis port to the web app configurations.

3. Azure web app for access MySQL database.

https://github.com/KumudithaGimnath/web-app-service2

For this Create the web app like above. Next add azure database for MySQL to the Resource group.

After create add the subscriptions and server name and admin username and password. Next create the MySQL server.

Next we have to create the database using MySQL Workbench. For the workbench database Host name and User name you must add the Azure My SQL database provided Server name and Server admin login name.

4. Azure Function for uploading files.

Now we create the Azure function for uplode files. For that I add the azure function in resource group.

select the HttpTrigger

Next index.js and function.json functions need to be implemented in the Code+Test.

Index.js file

function.js file

Next setup the integration part by creating output storage of Azure Blob Storage.

The storage account is automatically created when the Function App created.We can store files, images etc in the Azure Storage Account.

Now you can check the file uploding function correctly works.

you can see that the uploaded file stored in the storage account by going to Storage Explorer.

5. Azure front door.

Now I add the Azure Front door between the static web app and the web apps, in order to mask the back end service URLs. Basically it acts as the proxy like behavior.

Next create the front door in resource group.

Below highlighted link is the front door URL. Next I added the Web Application Firewall in order to add policies and rules to the Front Door.

Next

configured policy settings in order to add a custom rule.

Next you can add a Custom rule to accept only one request per one minute. If it sends an another request within minute it blocks that request

6. Angular front end service.

https://github.com/KumudithaGimnath/frontend-app

Now you can create Angular Front app and commit that app to Github repository. Before project commit to Github repository set “outputPath”: “dist” inside the angular.json file.

Next add the Static web app in Resource Group.

Fill the details and sign in to the github and go to the build part.

In here fill the App Artifact location as dist. and create it.

Next You have to create the Active Directory. Now finish the Static Web App Switch Directory to your directory.

Next go to App Registrations in your directry and select your Front end app.

References

ARM Template — https://github.com/KumudithaGimnath/SENG-41283-arm-templates