Getting Started with Azure App Service: A Beginner's Guide to Web App Deployment
Published Jun 21 2024 12:00 AM 12.6K Views
Copper Contributor

I'm Mahnoor Javaid, an enthusiastic Microsoft Learn Student Ambassador (MLSA) I’m delighted to present my blog, "Getting Started with Azure App Service: A Beginner's Guide to Web App Deployment", developed in collaboration with the Microsoft Learn team.

This blog will take you through getting started with Azure App Service with a comprehensive beginner's guide! Learn the step-by-step process of deploying your first web app using Azure. From navigating the Azure portal to mastering deployment via Azure CLI, unlock the secrets to seamless web app deployment.

Get ready to elevate your skills and bring your projects to life with Azure App Service!

Azure App Service is a fully managed platform as a service (PaaS) designed to host web applications, RESTful APIs, and mobile backends, simplifying the process of deploying, managing, and scaling your web apps. In this tutorial, I'll guide you through deploying your first web app using Azure App Service. Follow along to unlock the secrets of seamless web app deployment! You can also connect with me on LinkedIn for more updates and insights into the world of technology.


Prerequisites
 

Before diving in, ensure you have the following: 

Microsoft Azure Account:

If you don't have one, sign up for a free account on the Azure Portal all students get a FREE Azure Subscription at Azure for Student

Deploying via Azure Portal 

Steps to Deploy a Web App 

1. Create and Set Up Your Azure Account 

  • If you’re new to Azure, follow the steps to create your account. 

2Build Your Web Application 

Choose your preferred tech stack (e.g., .NET, Python, Node.js, or Java) and develop your web application. You can use development tools like Visual Studio, Visual Studio Code, or the command line. 

3. Create a Resource Group 

  • In the Azure portal, navigate to the "Resource groups" section. 

MahnoorJavaid_0-1718571260433.png

 

  • Click "Create" and enter a name for your resource group (e.g., "MyWebAppResourceGroup). 

Group 29.png

MahnoorJavaid_1-1718571488623.png

 

  • Select your subscription and a region close to your user base, then click "Review + create". 

MahnoorJavaid_2-1718571514753.png

4. Create Your Web App Service 

  • Go to the "Create a resource" section and select " App Services". 

Group 29 (1).png

  • On App Services click on " Web Services". 

Group 29 (2).png

  • Fill in the necessary details: 
  • Subscription: Choose your subscription. 

MahnoorJavaid_3-1718571815303.png

  • Resource Group: Select the resource group you created. 

MahnoorJavaid_4-1718571825292.png

  • Name: Enter a unique name for your web app. 

MahnoorJavaid_5-1718571851122.png

  • Publish: Choose "Code" . 

MahnoorJavaid_6-1718571897218.png

  • Runtime Stack: Select your application's runtime stack (e.g., .NET, Node.js). 

MahnoorJavaid_7-1718571925476.png

  • Region: Choose the same region as your resource group. 

MahnoorJavaid_8-1718571947524.png

  • Click "Review + create" and then "Create" to deploy your web app service. 

MahnoorJavaid_9-1718571974976.png

5. Deploy Your Web App 

You can deploy your web app using several methods such as GitHub Actions, Visual Studio, or Azure CLI. Here, we'll use Git: 

  • Set Up Deployment Credentials: In the Azure portal, navigate to your web app's "Deployment Center". 
  • Select Deployment Source: Choose "Local Git" as the deployment source. 

Group 29 (3).png

MahnoorJavaid_10-1718572173297.png

 

  • Clone the Repository: Copy the Git clone URL provided by Azure. 
  • Deploy Your Code:
  • Open a terminal and clone the repository:
    git clone <Azure_Git_URL>
  • Navigate to the cloned directory: 
    cd <your_app_directory>
  • Add your web app code to the directory. 
  • Commit and push your changes:
    git add . 
    
    git commit -m "Initial commit" 
    
    git push azure master 
     

6. Monitor Your App 

Use Azure Monitor, Application Insights, and Diagnostic Logs to keep an eye on your app's performance.

  • Azure Monitor: Azure Monitor is a comprehensive solution for collecting, analyzing, and acting on telemetry data from your cloud and on-premises environments. It allows you to track the performance and health of your applications and services. Learn more about Azure Monitor.
  • Application Insights: Application Insights is an Application Performance Management (APM) service designed to help you monitor your application's live performance, detect and diagnose performance issues, and understand user behavior. Explore Application Insights.
  • Diagnostic Logs: Diagnostic Logs enable you to capture detailed runtime information from your Azure resources. These logs are essential for monitoring performance, troubleshooting issues, and auditing activity within your applications. Learn more about Azure Diagnostic Logs.

Access these tools via the Azure portal to ensure everything runs smoothly.

  • In the Azure portal, navigate to the respective service's monitoring section to access Azure Monitor, Application Insights, and Diagnostic Logs for your app.

7. Add Custom Domains & SSL Certificate 

Step 1: Obtain a SSL Certificate

Get an SSL certificate from a trusted CA like DigiCert, GoDaddy, or Cloudflare again as students you get access to these services for FREE via the GitHub Student Pack


Step 2: Upload the SSL Certificate to Azure

  • Log in to the Azure Portal
  • Navigate to the Azure resource where you want to install the SSL certificate, such as an App Service
  • Go to the SSL settings and upload the certificate, private key, and any intermediate certificates.

Group 30.png

 

  • Validate the certificate that you have uploaded.

MahnoorJavaid_0-1718569958495.png

MahnoorJavaid_2-1718570361857.png

 

Step 3: Update DNS Settings

  • For custom domains, update the DNS records to point to the Azure resource’s IP address or domain. For App Services, use the provided default domain without updating DNS settings.

MahnoorJavaid_3-1718570415493.png

Step 4: Test and Enforce HTTPS
Test your website or service with HTTPS to ensure the SSL certificate is functioning correctly. For improved security, enforce HTTPS by redirecting all HTTP traffic to HTTPS.

MahnoorJavaid_4-1718570575668.png

 

8. Connect to a Database 

Securely Connecting Azure App Service to Services and Databases

Your Azure App Service might need secure connections to various services. Here's how to do it effectively:

Connection Methods

1. App Identity

    • When to Use: No authenticated user is present; credentials aren’t accessible or need management.
    • How: Managed identities handle credentials via role-based access control (RBAC).
    • Examples: Access Microsoft Graph, Azure SDKs.

MahnoorJavaid_5-1718570752118.png

2. Authenticated User

  • When to Use: Actions require the permissions of the signed-in user.
  • Examples: Access Microsoft Graph, SQL database as the user.

MahnoorJavaid_6-1718570752125.png

3. Secrets

  • App Settings: Store secrets as environment variables (encrypted-at-rest).
  • Key Vault: Secure storage, restricts access, provides monitoring.
    • When to Use: Non-Azure services or resources needing keys.
    • Options:

MahnoorJavaid_7-1718570752132.png

 

Deploying and Securing an ASP.NET Core App on Azure

Learn how to deploy an ASP.NET Core app to Azure App Service, connect it to Azure SQL Database and Azure Cache for Redis, and ensure secure connections.

Prerequisites

  • Active Azure account
  • GitHub account

Steps to Deploy:

1. Create Azure Resources

    • App Service: Host the web app.
    • Azure SQL Database: Manage the database.
    • Azure Cache for Redis: Enable caching.
    • Configure app name, region, runtime stack (.NET 7), hosting plan, and resource group.

MahnoorJavaid_8-1718570752138.png

2. Verify Connection Strings

    • Check AZURE_SQL_CONNECTIONSTRING and AZURE_REDIS_CONNECTIONSTRING in App Service configuration.

MahnoorJavaid_9-1718570752147.png

3. Deploy Sample Code

    • Fork the sample repository on GitHub.
    • Configure GitHub Actions for CI/CD.
    • Modify appsettings.json and Program.cs with correct connection strings.
    • Commit and push changes to trigger deployment.

MahnoorJavaid_10-1718570752158.png

4. Generate Database Schema

    • Use SSH in App Service to run database migrations.

MahnoorJavaid_11-1718570752164.png

 

5. Browse to the App

    • Navigate to the deployed app URL and test functionality.

MahnoorJavaid_12-1718570752175.png

9. Review Best Practices 

Scaling:

  • Auto-Scaling: Utilize Azure's auto-scaling features to automatically adjust your app's resources based on demand. Learn more about scaling options in Azure App Service.
  • Manual Scaling: If you prefer more control, manually scale your app by adjusting the number of instances or the performance tier of your App Service Plan. Learn how to scale an app in Azure.
  • Monitoring: Use Azure Monitor to track the performance and load on your application. Set up alerts to notify you when scaling actions are necessary. Explore Azure Monitor for detailed monitoring capabilities.

Security:

  • HTTPS: Ensure all communications with your app are encrypted by enforcing HTTPS. This can be done through the Azure Portal or by configuring web.config files for your application. Learn how to enforce HTTPS in Azure App Service.
  • Secure Coding Practices: Follow secure coding guidelines to protect against common vulnerabilities such as SQL injection, cross-site scripting (XSS), and cross-site request forgery (CSRF). Explore the OWASP Top Ten for best practices.
  • Azure Security Center: Use Azure Security Center to get security recommendations and best practices. It provides advanced threat protection across your workloads and integrates with other Azure services to enhance security. Learn more about Azure Security Center.

Network Security:

  • Virtual Network (VNet): Deploy your web app within a Virtual Network (VNet) to isolate it from other networks and enhance security. This setup allows you to control inbound and outbound traffic, and implement network security groups (NSGs) to filter traffic. Learn about Azure Virtual Network (VNet).
  • Private Endpoints: Use Private Endpoints to securely connect to Azure services, such as Azure SQL Database or Azure Storage, without exposing your resources to the public internet. Explore Azure Private Endpoint for more information.
  • Application Gateway and Web Application Firewall (WAF): Protect your application from common web vulnerabilities by using Azure Application Gateway with integrated WAF. This helps in defending against threats such as SQL injection and cross-site scripting attacks. Learn more about Azure Application Gateway and WAF.

 

Deploying via Azure CLI  

1. Install Azure CLI:

Requirements:

  • Ensure that you have the Azure CLI installed on your machine.
  • You will need administrative privileges to install software on your machine.

Installation Process:

  • Download and install Azure CLI from the Azure CLI page.

2. Install Git:

Requirements:

  • Git is required for deploying your code using Git repositories.
  • Administrative privileges are needed to install software.

Installation Process:

  • Download and install Git from the Git Downloads page.
  • Follow the installation instructions for your operating system.

3. Log in to Azure:

    • Open your command line interface and log in to your Azure account using the command: az login

1. Create a Resource Group:

    • Create a resource group for organizing related resources using the command:

 

az group create --name <ResourceGroupName> --location <Location>

 

2. Create an App Service Plan:

    • Create an app service plan which defines the location, features, and cost of your web app using the command:

 

az appservice plan create --name <PlanName> --resource-group <ResourceGroupName> --sku FRE

 

3. Create a Web App:

    • Create your web app within the app service plan using the command:

 

az webapp create --name <AppName> --resource-group <ResourceGroupName> --plan <PlanName>

 

4. Deploy Your App:

    • Deploy your code to the web app using one of the deployment methods such as FTP, local Git, GitHub, etc. For example, to deploy from a local Git repository, use the command:

 

az webapp deployment source config-local-git --name <AppName> --resource-group <ResourceGroupName> --query url --output tsv

 

5. Push Your Code:

    • Push your code to the deployment URL provided by the previous command.

6. Browse Your Web App:

    • Once the deployment is complete, you can browse your web app using the command:

 

az webapp browse --name <AppName> --resource-group <ResourceGroupName>

 

Remember to replace <ResourceGroupName>, <Location>, <PlanName>, and <AppName> with your actual resource group name, location, app service plan name, and web app name, respectively.

 

Conclusion 

Congratulations! You’ve successfully deployed your web app using Azure App Service. Now, you can explore additional Azure features and services to further enhance your app. Happy coding! 

References: 

  1. Getting started with Azure App Service 
  2. Host a web application with Azure App Service 
  3. Get started with .NET apps on Azure App Service 
  4. az webapp deployment | Microsoft Learn  

 

1 Comment
Co-Authors
Version history
Last update:
‎Jun 17 2024 01:28 AM
Updated by: