Deploying Web Apps with Azure App Services: A Complete Beginner's Guide

📘 Chapter 1: Introduction to Azure App Services and Setup

🔍 Overview

Deploying modern web applications requires speed, security, scalability, and minimal infrastructure overhead. Microsoft Azure App Services provides exactly that—a fully managed Platform-as-a-Service (PaaS) solution to host web apps, REST APIs, and backend services with support for multiple languages and frameworks.

This chapter introduces you to Azure App Services, walks you through setting up your environment, and guides you step-by-step to creating your first web app on Azure.

🧠 What is Azure App Service?

Azure App Service is a cloud platform for building and hosting web apps in a fully managed environment. You don't have to worry about infrastructure, patching, or scaling. Instead, focus on code, configuration, and continuous delivery.

✅ Key Features

• Host web apps, APIs, backend services, or containers
• Supports .NET, Java, Node.js, Python, PHP, Ruby
• Built-in autoscaling, load balancing, and SSL
• Seamless CI/CD integration with GitHub, Azure DevOps
• Built-in authentication, monitoring, and backup

🧱 App Service Architecture Overview

🛠️ Step 1: Set Up Azure Environment

Before deploying, you need:

• An Azure subscription (Free Tier available)
• Azure CLI or Azure Portal access
• (Optional) Visual Studio Code or Visual Studio

✅ Install Azure CLI

bash

# Windows/macOS/Linux

https://learn.microsoft.com/en-us/cli/azure/install-azure-cli

Log in:

bash

az login

📦 Step 2: Create a Resource Group

A resource group is a logical container for resources like your web app, app service plan, and database.

bash

az group create --name MyResourceGroup --location eastus

☁️ Step 3: Create an App Service Plan

The App Service Plan determines the pricing tier, OS, and performance level.

bash

az appservice plan create --name MyAppServicePlan \

  --resource-group MyResourceGroup \

  --sku B1 --is-linux

🌐 Step 4: Create Your Web App

Now create your actual web app linked to the plan:

bash

az webapp create --resource-group MyResourceGroup \

  --plan MyAppServicePlan \

  --name myfirstwebapp123 \

  --runtime "NODE|18-lts"

✅ Replace myfirstwebapp123 with a globally unique name.

💡 Runtime Options

🚀 Step 5: Deploy Your Code

Option A: Deploy via Local Git

bash

az webapp deployment source config-local-git \

  --name myfirstwebapp123 \

  --resource-group MyResourceGroup

Azure will return a Git URL. Push your code using:

bash

git remote add azure <GIT-URL>

git push azure main

Option B: Deploy via ZIP Package

bash

az webapp deployment source config-zip \

  --resource-group MyResourceGroup \

  --name myfirstwebapp123 \

  --src path/to/yourapp.zip

🔄 Step 6: Test Your Web App

Open your browser:

text

https://myfirstwebapp123.azurewebsites.net

Your app should be live!

🔧 Step 7: Configure App Settings and Environment Variables

You can configure environment-specific settings:

bash

az webapp config appsettings set \

  --name myfirstwebapp123 \

  --resource-group MyResourceGroup \

  --settings NODE_ENV=production API_KEY=123456

🔒 For secrets, use Azure Key Vault.

🔐 Step 8: Enable HTTPS and Custom Domain

✅ HTTPS

Azure enables HTTPS by default. To enforce HTTPS:

bash

az webapp update \

  --name myfirstwebapp123 \

  --resource-group MyResourceGroup \

  --set httpsOnly=true

✅ Custom Domain (via Portal)

1. Go to your App in Azure Portal
2. Navigate to “Custom Domains”
3. Add your domain (verify via TXT/CNAME)
4. Bind SSL certificate

📊 Step 9: Monitor and Diagnose Issues

Enable Application Insights for real-time performance monitoring.

bash

az monitor app-insights component create \

  --app MyInsights \

  --location eastus \

  --resource-group MyResourceGroup \

  --application-type web

Then connect it to your web app:

bash

az webapp config appsettings set \

  --resource-group MyResourceGroup \

  --name myfirstwebapp123 \

  --settings APPINSIGHTS_INSTRUMENTATIONKEY=<your-key>

📋 Summary Table – Azure App Service Setup Steps