Launching a simple Web App in Azure

Introduction

Azure provides number of PaaS services to deploy applications easily without worrying about the underlying infrastructure. Some of them include Azure Cloud Services, Azure Web Apps, Azure Mobile Apps, SQL Azure, Document DB, etc. The benefit of PaaS is developers can dedicate their time into developing the application without hassles of managing the infrastructure to deploy it.

Azure Web App

Azure Web App is one such service which allows developers to quickly build, manage, and deploy dynamic websites very easily. Azure Web App is a part of Azure App Service which is a PaaS offering from Azure to create Web and Mobile apps for any platform or device. Azure App Service includes various services like Web Apps, Mobile Apps, Logic Apps and API Apps. C#, HTML5, PHP, Python, Java, Node.js are some of the supported languages in Azure Web Apps.

Web App can be deployed in three ways:

  • Through Azure ARM Portal
  • Using Azure CLI
  • Using Visual Studio
Requirements
Azure Services

To deploy a simple Web App in Azure, we shall first create a Resource Group and an App Service plan. App Service plan define a collection of physical resources utilized to host your application such as Region, Instance size, the number of instances, and SKUs. Application Insights is Performance Management service for web developers which can be used with Web Apps.

SDKs and Other tools

To provision a Web App from Azure Portal, the only thing required is ACTIVE Azure Subscription. Provisioning a Web App from Azure portal will provision a simple container where you can deploy your files without having to manage the underlying infrastructure. After provisioning a Web App, required files can be added, modified or deleted in the number of ways stated below:

  1. Using Kudu which is web-based management tool and can be accessed from Azure Portal
  2. Using Azure CLI or Azure CLI 2.0 which will require local Git repositories
  3. Visual Studio 2012 or higher along with proper version of Azure SDK
  4. Any FTP clients like WinSCP, for instance, can be used for FTP deployments

Here we shall see how can one deploy our files in Web App using FTP and using Visual Studio 2015.

provisioning a Web Apps from Azure Portal

To get started with Web Apps from Azure portal, navigate to portal.azure.com and enter your credentials to log in. Click on + New > Web + Mobile and select Web App.

user_60255_58de90c42148e.PNG

Creating Web App

Enter appropriate name for the web app. This will also be the part of the URL to browse your web app. Select the Azure Subscription. Under Resource Group, click Create New and enter Resource Group Name.

user_60255_58de9140133a0.PNG


Creating App Service Plan

Under App Service Plan, click on Create New. Enter App Service Plan name, select Location and in Pricing Tier select Basic B1.

user_60255_58de918eb8e4e.PNG

Turn On the Application Insights and click Create.

Once the Web App is deployed, we can browse to see the following page.

user_60255_58de92b83f07b.PNG_800.jpg

Deploying custom files to Web App

To deploy custom files to Azure Web App, navigate to your web app blade and take note of the FTP credentials. We shall use WinSCP to upload custom files to Web App. For example, here we will create a simple `index.html` file. Use any text editor to create this file and save it as `index.html`. The content of the file should be as shown below:

 <html>
<head>
<title>Sample "Azure Web App" Application</title>
</head>
<body bgcolor=white>
<p>This is the <i>home page</i> for the new <b>Azure Web App</b> deployed through Azure Portal. </p>
</body>
</html>

Now, on Web App settings blade, click on Deployment credentials and set password for FTP and SFTP.

user_60255_58de9550c6f19.PNG

Go back to Overview tab, copy FTP hostname and paste it in WinSCP. Do the same for FTP/deployment username, and enter the password in WinSCP to connect to web app.

user_60255_58de95b4cf65f.PNG

Once the connection is established, go to site > wwwroot folder on the right pane. On left pane, navigate to index.html file we created previously. Right-click and upload that file inside wwwroot folder.

user_60255_58de95ea47852.PNG

Browse to web app again and we can see new file in homepage of the webapp.

user_60255_58de9619bdc08.PNG


Deploy Web App using Visual Studio

Creating Web App in Visual Studio 2015

To create a simple web application in Visual Studio, click on File > New Project. Under Visual C#, select Web and on right hand pane select ASP.NET Web Application.

user_60255_58de97463953f.PNG_800.jpg

On the next page, select Single Page Application and make sure Host in Cloud option is checked.

user_60255_58de9784a1503.PNG_800.jpg

On the next page, enter the web app name that is suitable for a URL. Select the Subscription, Resource Group and App Service Plan. We will use the previously created properties. Once done, click Create.

user_60255_58de97b326240.PNG_800.jpg


Deploying Web App in Azure

Once the solution is ready, click on Publish site option in Web Publish Activity.

user_60255_58de97f551e72.PNG

On Publish dialog box, verify the values and click Publish button to publish web app on Azure.

user_60255_58de984275f34.PNG

Once published, the URL of the website will be available in Output Window.

user_60255_58de987af2d38.PNG

Thus, the new Web App is ready to roll in few easy steps.

user_60255_58de98a870deb.PNG

Sources / Resources

Azure also supports deploying various CMS and e-commerce applications like WordPress, Joomla, Drupal, Magento, etc. to deploy on Azure Web Apps. These are available in Azure Marketplace. Go ahead and explore more!

Click here for more courses on Azure from Linux Academy.

Happy Learning!

Looking for team training?