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

📘 Chapter 2: Deploying Applications Using Different Methods

🔍 Overview

Azure App Services supports multiple deployment methods, allowing developers to push code to production through the path that best suits their workflow—whether it's from a local machine, GitHub, Azure DevOps, VS Code, or Docker containers.

This chapter covers all supported deployment strategies, step-by-step examples, and best practices for each.

🧠 Supported Deployment Methods in Azure App Services

📘 Method 1: Deploy via Local Git Repository

🔧 Setup

1. Enable Local Git on your App:

bash

az webapp deployment source config-local-git \

  --name mywebapp \

  --resource-group MyResourceGroup

2. Azure will return a Git endpoint. Add this remote to your local repo:

bash

git remote add azure https://mywebapp.scm.azurewebsites.net:443/mywebapp.git

3. Push your code:

bash

git push azure main

⚠️ You'll be prompted for deployment credentials (set in Azure Portal).

📘 Method 2: Deploy with GitHub Actions (CI/CD)

✅ Advantages

• Automatic deployment on push
• Built-in rollbacks
• Environment-based workflows (staging, production)

🔧 Setup via CLI

bash

az webapp deployment github-action add \

  --repo "username/repo-name" \

  --branch main \

  --name mywebapp \

  --resource-group MyResourceGroup \

  --login-with-github

📄 Example azure-webapps-node.yml (Auto-generated)

yaml

on:

  push:

    branches:

      - main

jobs:

  build-and-deploy:

    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v2

      - name: Set up Node.js

        uses: actions/setup-node@v3

        with:

          node-version: '18'

      - run: npm install

      - run: npm run build --if-present

      - uses: azure/webapps-deploy@v2

        with:

          app-name: mywebapp

          slot-name: production

          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE }}

🔐 You'll need to store the publish profile in your repo's GitHub secrets.

📘 Method 3: Azure DevOps Pipelines

✅ When to Use

• Enterprise-level CI/CD needs
• Structured build + test + deploy stages
• YAML or GUI pipeline editors

🔧 Setup:

1. Create a new Azure DevOps Project
2. Connect your GitHub or Azure Repos
3. Create a new Pipeline → YAML-based
4. Use the Azure Web App Deploy task:

yaml

trigger:

  - main

pool:

  vmImage: 'ubuntu-latest'

steps:

  - checkout: self

  - task: NodeTool@0

    inputs:

      versionSpec: '18.x'

  - script: |

      npm install

      npm run build

    displayName: 'Build Project'

  - task: AzureWebApp@1

    inputs:

      azureSubscription: '<azure-service-connection>'

      appName: 'mywebapp'

      package: '$(System.DefaultWorkingDirectory)/**/dist'

📘 Method 4: FTP and ZIP Deploy

✅ FTP Deployment

1. Go to Azure Portal → Web App → Deployment Center → FTP
2. Note your FTP host, username, and password
3. Use FileZilla or command line:

bash

ftp ftp://mywebapp@ftp.azurewebsites.windows.net

✅ Zip Deploy

bash

az webapp deployment source config-zip \

  --resource-group MyResourceGroup \

  --name mywebapp \

  --src ./webapp.zip

🔁 Fast for uploading builds without needing source control.

📘 Method 5: Visual Studio and VS Code

✅ Visual Studio (for .NET)

1. Right-click on project → “Publish”
2. Choose Azure App Service (Windows/Linux)
3. Select or create a web app
4. Click Publish

✅ Visual Studio Code (Node.js, Python, Static Apps)

1. Install Azure App Service extension
2. Sign in to Azure
3. Right-click folder → “Deploy to Web App”

✅ VS Code automatically detects runtimes and pushes via Kudu.

📘 Method 6: Docker and Container Registry

✅ Use Case

• Full control over the environment
• Dependencies bundled inside containers

🔧 Setup

1. Create Dockerfile (Node.js example):

Dockerfile

FROM node:18

WORKDIR /app

COPY . .

RUN npm install

CMD ["node", "server.js"]

2. Build and push to Azure Container Registry (ACR):

bash

az acr login --name myregistry

docker build -t myregistry.azurecr.io/myapp:v1 .

docker push myregistry.azurecr.io/myapp:v1

3. Create Web App from ACR image:

bash

az webapp create \

  --resource-group MyResourceGroup \

  --plan MyAppServicePlan \

  --name mydockerwebapp \

  --deployment-container-image-name myregistry.azurecr.io/myapp:v1

📊 Deployment Method Comparison Table

💡 Best Practices for Deployment

• Use deployment slots for zero-downtime deployments
• Set environment-specific variables (prod/dev/staging)
• Monitor builds with Application Insights
• Automate rollbacks using GitHub Actions or DevOps triggers
• Use ARM templates or Bicep for reproducible infrastructure