Monday, May 25, 2020

Create Web App

Azure Web Apps

Azure Web Apps provides a platform (PaaS) to build an App in Azure without having to deploy, configure and maintain your own Azure VM’s (IaaS). User can build application with any language like ASP.NET, PHP, Node.js and Python and Azure Web App will provide platform and runtime to execute the application code.

In below example for simple azure application for store(shop) marked as green. You can see their 5 items involved

1.       User machine to access the application with help of internet and web browser

2.       Web App hosted the store application hosted

3.       App Service Plan provide the VM configuration where the app will be hosted

4.       Storage blob used for store large files like images etc.

5.       Azure database used for saving store data  

This is just for your understanding, how application with database setup in azure. In future post I will show you. How we will create this type of solution step-wise.  

How App Service works

Traditionally, when you would develop and host a web application, we create a virtual machine or physical server, log into it, and set up something like nginx on Linux or IIS on Windows Server. Deploying such an application comes with the implied responsibility of managing that virtual machine, making it highly available, patching it, updating the operating system, and keeping the web service binaries patched and up to date too.


The idea of PaaS is that we spend our time managing the application; the infrastructure exists, certainly, but we stop caring about it because it is no longer our responsibility. Microsoft Azure accomplishes this by using an abstraction called the Azure Service Fabric

An App Service is tied to a VM, so you basically have one VM per app. A Service Fabric cluster has a certain number of VMs and your app will run on one or more of them. Service Fabric will control that for you. With Service Fabric you can for example run ten apps on a five-node cluster, so that means you pay for five VMs instead of ten.

How to create Web App

When we create web app in azure mainly 3 azure services created, will understand it here

1.       Resource group

2.       App Service Plan

3.       Web App

Resource group

A container that holds related resources for an Azure solution. I had mentioned in previous post azure resource group created with help of “Microsoft.ResourceGroup” resource provider. I will show you here how to create resource group in azure.

You need to buy azure subscription if you don’t have they provide 3 types of subscription

1.       Free (https://azure.microsoft.com/en-in/free)

2.       Pay-as-you-go (Pay what you use in azure plan)

3.       Member offers (Visual Studio subscribers)

Once you buy subscription go into below URL

Open Azure Portal https://portal.azure.com


When we create resource group it required from user

1.       Subscription

2.       Resource group Name

3.       Region 



Subscription

An Azure subscription is linked to a single account, the one that was used to create the subscription and is used for billing purposes. There are three main types of subscriptions available, free, pay-as-you-go, and member offers (Visual Studio subscribers).

Resource group Name

Enter a new resource group name. A resource must have a unique name is case-insensitive.

Region

Resource group region required to store the meta data (definition) of the Azure resources inside the group. However, resources inside a resource group are location independent and can be placed in a different region\location.

App Service Plan

An App Service plan defines a set of compute resources for a web app to run. Azure App Service Plan resource provider is “Microsoft.AppServicePlanCreate”. I have created “DJBlogs” resource group in above example now we will create App Service Plan inside resource group.


We need to select some options when create new service plan like

1.       Name (Name of service plan)

2.       Operating system (Virtual machine Operating system which will host “Web App”)

3.       Region (Azure data centre name where App Service plan will be created)

4.       SKU and Size (Pricing tier defined by Azure for our Web App)




We need to configure the App service Plan based on Web App requirement

Web App

Azure Web Apps provides a platform to build an App in Azure without having to deploy, configure and maintain your own Azure. Azure Web App resource provider is “Microsoft.WebSite”.

When we create new “Web App” required 2 items

1.       Resource Group (Created “DJBlogs” resource group above)

2.       App Service Plan (Created “DJBlogsAppPlan” App Service Plan above)

Also, we need some other information when create new “Web App”

1.       Name (Name of the web app)

2.       Publish (What will be the publish type is code or docker container)

3.       Runtime Stack (Runtime for web app is it Java, .Net, PHP etc)

4.       Operating system (What will the operating system Linux, Windows)

5.       Region (Azure data centre name where resource will be created)






Once fill all these information press create button it will create “Web App” (djblogs).

Web App URL: https://djblogs.azurewebsites.net

Once it is done you go to resource group “DJBlogs” and it will show 2 resources

1.       Djblogs (Web App)

2.       DJBlogsAppPlan (App Service Plan)



This is the logic structure in Azure

Click in “djblogs” web app it will open below screen with azure default template user interface 



Publish Web App

Once you created Web App in azure now you can publish your code into it. In below screenshot I will show how we can do that.

We will create .net core version 3.1 MVC application with help of visual studio 2019 and will publish this in Azure Web App. You can see it below screen created MVC project “djblogs” scaffolding in visual studio.

 

Once project is created we need to download publisher profile from Azure Web App. Which help us to publish the code on azure. It holds all information which required for publish the code.



Now we can publish our code in azure web app. Open project in visual studio and right click in your project click on publish option. Once publish window is opened and click on create new publish profile and import the downloaded profile from azure portal.

Once publish profile imported .net core application will automatically published code in Azure Web App.

if code is successfully published it will open the published code URL in browser like below

URL: https://djblogs.azurewebsites.net


There are multiple other ways to publish the code in Azure Web App. I will show you in future posts.

Hope it will help you to understand Azure “Web App”. 

Keep sharing keep learning. Thank you

11 comments:

  1. Perfect will learn more from you :)

    ReplyDelete
  2. This is very educational content and written well for a change. It's nice to see that some people still understand how to write a quality post! Webdesign SEO Antwerpen

    ReplyDelete
  3. I’ve been searching for some decent stuff on the subject and haven't had any luck up until this point, You just got a new biggest fan!.. Webdesign

    ReplyDelete
  4. This is such a great resource that you are providing and you give it away for free. Webdevelopment

    ReplyDelete
  5. This is very educational content and written well for a change. It's nice to see that some people still understand how to write a quality post! Webdesign bureau

    ReplyDelete
  6. Wonderful blog! I found it while surfing around on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Appreciate it. https://hostinglelo.in/

    ReplyDelete
  7. We have sell some products of different custom boxes.it is very useful and very low price please visits this site thanks and please share this post with your friends. vegabréfsáritun Kanada

    ReplyDelete
  8. It is a great website.. The Design looks very good.. Keep working like that!. https://hostinglelo.in/

    ReplyDelete
  9. This post is so helpfull and informative.keep updating with more information...
    Angularjs Concepts
    Angularjs Framework

    ReplyDelete
  10. I was surfing the Internet for information and came across your blog. I am impressed by the information you have on this blog. It shows how well you understand this subject. dark web links

    ReplyDelete