Lab 09: Implement Web Apps

Objective: This lab introduces Azure Web Apps. You'll create a web app, deploy a simple "Hello World" application from GitHub, configure a staging slot, swap slots, and configure autoscaling.

Scenario: Your organization is migrating on-premises websites to Azure. You'll explore using Azure Web Apps (part of Azure App Service) to host a PHP-based website, replacing aging on-premises hardware.

Key Concepts:

• Azure Web Apps: A fully managed platform-as-a-service (PaaS) for hosting web applications. Supports various languages and frameworks (e.g., .NET, PHP, Node.js, Java, Python).

• App Service Plan: Defines the compute resources (VM size, number of instances) allocated to your web app. Determines pricing and scaling capabilities.

• Deployment Slots: Separate environments (e.g., staging, production) within a single web app. Allow you to test changes before deploying them to production.

• Deployment Center: Manages deployments to your web app, supporting various sources like GitHub, Azure Repos, and local Git.

• Autoscaling: Automatically adjusts the number of instances in your App Service plan based on demand (e.g., CPU usage).

• Swapping Slots: A zero-downtime deployment technique. Traffic is redirected from one slot (e.g., staging) to another (e.g., production) with minimal interruption.

Lab Tasks

Task 1: Create and Configure an Azure Web App (5 minutes)

1. Sign In: Log in to the Azure portal (https://portal.azure.com).

2. Create Web App: Search for and select "App Services" and click "+ Create" -> "Web App."

   • Basics:

     • Name: WebApp48965394 (or a unique name) - This will be part of your web app's URL.

     • Publish: Code

     • Runtime stack: PHP 8.2

     • Operating System: Linux

     • Pricing plan: Premium V3 P1v3 (This is important for autoscaling later)

     • Zone Redundancy: accept the defaults.

   • Click "Review + create," then "Create."

3. Go to Resource: Once deployed, click "Go to resource."

• If the deployment failed, use another region. (e.g. Canada Central!)

4. Test Default Page: On the web app's "Overview" blade, click the "Default domain" link. You should see the default Azure App Service welcome page. Close the new browser tab.

Task 2: Create a Deployment Slot

1. Add Staging Slot:

   • In your web app's resource, under "Deployment," select "Deployment slots."

   • Click "Add slot."

     • Name: staging

     • Clone settings from: Do not clone settings

   • Click "Add."

2. Verify Staging Slot URL: Click on the newly created staging slot. Note that it has a different URL than the production slot (it will include -staging in the name).

Task 3: Configure Web App Deployment Settings (5 minutes)

1. Deployment Center (Staging Slot):

   • Important: Make sure you are on the staging slot's blade (not the production slot). You can verify by checking the URL or the name at the top of the blade.

   • Under "Deployment," select "Deployment Center."

   • Settings:

     • Source: External Git

     • Repository: https://github.com/Azure-Samples/php-docs-hello-world

     • Branch: master

   • Click "Save."

2. Test Staging Slot:

   • Go to the "Overview" blade of the staging slot.

   • Click the "Default domain" link. You should see the "Hello World" application. This may take a minute or two to deploy; refresh the page if needed.

Task 4: Swap Deployment Slots

1. Swap Slots:

   • Navigate back to the main web app's resource (not the staging slot). The easiest way is to use the breadcrumbs at the top of the portal.

   • Under "Deployment," select "Deployment slots."

   • Click "Swap."

   • Verify that the Source is staging and the Target is production.

   • Click "Start Swap."

2. Test Production Slot:

   • Go to the "Overview" blade of the main web app (not the staging slot).

   • Click the "Default domain" link. You should now see the "Hello World" application on the productionURL. The swap is complete.

   • Copy the default domain URL - you will need it for load testing.

Task 5: Configure and Test Autoscaling

1. Configure Autoscaling:

   • Go to the main web app's resource (not the staging slot).

   • Under "Settings," select "Scale out (App Service plan)."

   • Choose Automatic. Note the Rules Based option.

   • Set the maximum burst field to 2 and cliock on save. ("maximum burst" refers to the maximum number of instances that an App Service Plan can scale out to during periods of high demand.)

2. Create a Load Test:

   • In the left pane, select Diagnose and solve problems.

   • In the "Load Test your App" box, select "Create Load Test."

   • Click "+ Create" and give your load test a unique name.

   • Select Review + create and then Create.

   • Wait for the test to be created, select Go to resource.

3. Add HTTP Request to Load Test

   • From the Overview | Add HTTP requests, select Create.

   • On the "Test plan" tab, click "Add request."

   • In the "URL" field, paste your "Default domain" URL (from Task 4, Step 2). Ensure it begins with https://.

   • Click "Review + create," then "Create." (This may take a couple of minutes.)

4. Observe Test Results (Briefly):

   • Review the test results, looking at "Virtual users," "Response time," and "Requests/sec."

   • Click "Stop" to end the test. You don't need to wait for the full test to complete for the purposes of this lab. The goal is to initiate a load test, not to fully analyze its results.