Lecture Notes: Hosting a Website or Web Application on Azure

Presenter: Cephas Lin, Senior Content Developer at Microsoft Reference: Lesson 3.2 in "Learn Azure In a Month of Lunches" by Ian Foulds Resource URL: aka.ms/monthoflunches

Key Topics

• Introduction to Azure App Service
• Steps to Create and Deploy a Simple HTML Page
• Using Azure Cloud Shell and Commands
• Git Deployment vs. Azure CLI Deployment (az webapp up)

Introduction to Azure App Service

• Azure App Service: Web hosting service in Azure
• Benefits: Security, high availability, scalability
• Programming Languages Supported: Most popular web development languages

Steps to Create and Deploy

1. Create Resources in Azure Portal

• Navigate: portal.azure.com and log in
• **Resource Creation Process:"
  • Create resource group: Named MOL
  • Create app service app: Named pizza lunches
  • Runtime: Choose ASP.NET 4.8 (for HTML code)
  • Service Plan: Name autogenerates; select free tier in Dev/Test
• Deployment Complete: Check URL to verify app is running**

2. Deploy Sample HTML Code

• Azure Cloud Shell: Terminal environment in browser
  • Variants: Bash vs. PowerShell (using Bash for this demo)
  • Tools: Includes Git
• **Commands: **
  • Clone Repo: Git clone <GitHub URL>
  • Configure Git: Git config --global user.email and user.name
  • Initialize Repo: Git init
  • Add Files: Git add .
  • Commit: Git commit -m "message"
• **Configure App for Git Deployment: **
  • Command: az webapp deployment source config --name pizza-lunches --resource-group MOL
  • Use app-level credentials
• Push Code to Azure:
  • Add Remote: Git remote add azure <URL>
  • Push: Git push azure master
• Verification: Refresh URL to see HTML deployed

3. Direct Deployment using az webapp up

• Single Command Deployment:
  • Command: az webapp up --name <app_name> --html
  • Creates resource group, service plan, app, and deploys code
  • No need for Git or credentials setup
  • Resource Group: Automatically created if doesn’t exist
  • App Service Plan: Created as part of the command

Comparison: Git Deployment vs. az webapp up

• Git Deployment:
  • Benefits: Convenience with existing GitHub workflows
  • Setup: Requires user/App-level credentials
• az webapp up Command:
  • Benefits: Simplifies resource creation and deployment
  • Drawback: Limited runtime support (Node, Python, .NET Core, ASP.NET)
  • Usage: Ideal for quick deployments without Git
• Recommendation: Based on user preference and existing tools

Conclusion

• Demo covered two deployment methods
• Choose method based on convenience and supported runtimes
• Additional examples in the e-book