Step by step guide to deploy a web app on Azure

Posted on by Panther

In this tutorial, we will walk through the process of deploying a web application on Microsoft Azure, a cloud computing platform by Microsoft. Azure provides a wide range of services and tools to help you build, deploy, and manage your applications and services with ease.

By following this step-by-step guide, you will learn how to create an Azure Web App, deploy your application code to the Web App, configure custom domains and SSL certificates, and monitor your application’s performance.

Prerequisites

Before we begin, make sure you have the following:

  1. An Azure account – If you don’t have one, you can create a free account at https://azure.microsoft.com/free/.
  2. A web application – This tutorial assumes you have an existing web application code that you want to deploy.

Table of Contents

  1. Create an Azure Web App
  2. Deploy Application Code
  3. Configure Custom Domains
  4. Setup SSL Certificate
  5. Monitor Application Performance

Let’s get started!

1. Create an Azure Web App

To host our web application, we first need to create an Azure Web App. Follow these steps to create a new Web App:

  1. Sign in to the Azure Portal at https://portal.azure.com/.
  2. Click on the Create a resource button (+) in the top left corner of the portal.
  3. In the search bar, type “Web App” and select Web App from the dropdown suggestions.
  4. Click on the Create button to begin creating a new Azure Web App.
  5. On the Create Web App page, fill in the required details:
    • Subscription: Select your subscription.
    • Resource group: Either create a new resource group or select an existing one.
    • Name: Enter a unique name for your Web App.
    • Publish: Choose the appropriate publish option based on your application requirements. For most web applications, choose Code.
    • Runtime stack: Select the runtime stack that corresponds to your web application’s programming language. For example, if your application is built using Node.js, choose Node.js.
    • Region: Choose the region closest to your target audience or where you want your application to be hosted.
  6. Click on the Next button to proceed to the next section.
  7. On the App Service plan page, you can either create a new App Service plan or select an existing one. An App Service plan defines the compute resources and pricing tier for your Web App.
    • Create new: Select this option if you want to create a new App Service plan.
    • Operating System: Choose the appropriate operating system based on your application requirements.
    • Region: Select the region for your App Service plan.
    • Pricing tier: Choose the pricing tier that suits your needs and budget.
    • Instance count: Specify the number of instances you want for your Web App.
  8. Click on the Next button to proceed to the next section.
  9. On the Monitoring page, you can enable Azure Application Insights to monitor your Web App’s performance and track usage.
    • Enable: Select this option to enable Application Insights integration.
    • Application Insights: Choose an existing Application Insights resource or create a new one.
  10. Click on the Review + create button to review your Web App’s configuration.
  11. After reviewing, click on the Create button to create your Azure Web App.

It may take a few minutes for Azure to create the Web App. Once it’s done, you can proceed to the next step.

2. Deploy Application Code

Once you’ve created the Azure Web App, you can deploy your application code to the Web App. Azure provides several options for deploying your application, including local Git, FTP, Visual Studio, Azure DevOps, and more. In this tutorial, we will focus on deploying using the Azure portal.

Follow these steps to deploy your application code:

  1. Open the Azure Portal and navigate to your Web App’s overview page.
  2. In the left-hand menu, click on Deployment Center. This will open the Deployment Center configuration page.
  3. On the Deployment Center page, choose the source control option that suits your application. Here, we will use Azure Repos Git for demonstration purposes.
  4. Click on the Continue button to proceed.
  5. On the Build provider page, choose the appropriate build provider based on your application. Since we are deploying a web application code, select App Service Kudu as the build provider.
  6. Click on the Continue button to proceed.
  7. On the Deployment settings page, configure the repository settings and branch that contains your application code.
    • Repository type: Select the type of repository hosting service you are using (e.g., Azure Repos Git, GitHub, Bitbucket, etc.).
    • Organization: Specify the organization or account name based on your repository type.
    • Project: Select the project name from the dropdown list.
    • Repository: Choose the repository that contains your application code.
    • Branch: Specify the branch to deploy from (e.g., master, main, develop, etc.).
  8. Click on the Continue button to proceed.
  9. On the summary page, review the deployment settings and click on the Finish button to start the deployment process.
  10. Azure will automatically pull your application code from the specified repository and deploy it to your Web App. You can monitor the deployment progress on the Deployment Center page.

Once the deployment is complete, you can access your web application by navigating to the Web App’s URL. Congratulations, you have successfully deployed your web application on Azure!

3. Configure Custom Domains

By default, Azure provides a domain name in the format {your-web-app-name}.azurewebsites.net for your Web App. However, you may want to use a custom domain name for your application. Azure allows you to configure custom domain names easily.

Follow these steps to configure a custom domain for your Web App:

  1. Open the Azure Portal and navigate to your Web App’s overview page.
  2. In the left-hand menu, click on Custom domains. This will open the Custom domains configuration page.
  3. On the Custom domains page, click on the Add custom domain button.
  4. In the Add custom domain dialog, enter your custom domain name and click on the Validate button.
    • Hostname: Enter the hostname for your custom domain name (e.g., www).
    • Domain name: Specify your custom domain name (e.g., example.com).
  5. Azure will validate the domain name and provide you with the necessary DNS records to add to your domain registrar or DNS provider.
  6. Log in to your domain registrar or DNS provider’s website and navigate to your DNS management settings.
  7. Add the provided DNS records (e.g., CNAME, TXT) to your DNS configuration. This step may vary depending on your specific domain registrar or DNS provider. Consult your provider’s documentation for detailed instructions.
  8. Once you have added the DNS records, go back to the Custom domains page in the Azure portal and click on the Validate button again. Azure will validate the DNS records and confirm if the custom domain configuration is successful.
  9. After successful validation, click on the Add button to add the custom domain to your Web App.
  10. Azure will update the DNS settings and configure the SSL binding for your custom domain automatically.

It may take some time for the DNS changes to propagate. Once the changes are propagated, you will be able to access your web application using your custom domain name.

4. Setup SSL Certificate

Securing your web application with SSL/TLS encryption is essential to protect sensitive data and build trust with your users. Azure provides built-in support for SSL certificates, allowing you to easily secure your Web App with HTTPS.

Follow these steps to set up an SSL certificate for your Web App:

  1. Open the Azure Portal and navigate to your Web App’s overview page.
  2. In the left-hand menu, click on TLS/SSL settings. This will open the TLS/SSL settings configuration page.
  3. On the TLS/SSL settings page, click on the Private Key Certificates (.pfx) tab.
  4. Click on the Create App Service Managed Certificate button to create a new SSL certificate.
  5. In the Create certificate dialog, enter the required details:
    • Certificate name: Provide a name for your certificate.
    • Hostname: Choose the custom domain for which you want to install the SSL certificate. If you haven’t configured a custom domain, Azure will only allow you to generate a certificate for the default Azure domain.
  6. Click on the Create button to generate the SSL certificate.
  7. Azure will generate the SSL certificate and install it on your Web App automatically. This process may take a few minutes.
  8. Once the certificate is installed, you can enable HTTPS-only access for your Web App by toggling the HTTPS only switch on the TLS/SSL settings page.

Congratulations, you have now configured SSL/TLS encryption for your Web App using a free App Service managed certificate!

5. Monitor Application Performance

Monitoring the performance of your web application is crucial to ensure it performs optimally and delivers a great user experience. Azure provides several tools and services to monitor your Web App’s performance, including Azure Application Insights.

Follow these steps to set up Application Insights for your Web App:

  1. Open the Azure Portal and navigate to your Web App’s overview page.
  2. In the left-hand menu, click on Monitoring. This will open the Monitoring configuration page.
  3. On the Monitoring page, click on the Application Insights tab.
  4. If you haven’t enabled Application Insights during the Web App creation process, click on the Turn on button to enable it.
  5. In the Application Insights blade, choose an existing Application Insights resource or create a new one.
  6. Click on the Save button to save the Application Insights configuration.

Once Application Insights is configured, it will start monitoring your Web App’s performance, collecting telemetry data, and providing insights into your application’s behavior.

Additionally, you can explore other monitoring features, such as log streaming, diagnostic settings, and alerts, to gain more visibility into your Web App’s performance.

Conclusion

In this tutorial, you have learned how to deploy a web application on Microsoft Azure using Azure Web Apps. We covered creating a new Web App, deploying your application code, configuring custom domains, setting up SSL certificates, and monitoring your application’s performance.

Azure provides a powerful and flexible platform for hosting and managing web applications, allowing you to scale your application as your business grows. Explore more advanced features and services offered by Azure to optimize and enhance your web application further. Happy deploying!

Related Post