Skip to content

Latest commit

 

History

History

Scaling-a-production-website

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 

Scaling a production web site


Overview

In this demo you will go through the steps required to configure auto-scaling in a Microsoft Azure Web App and demostrate this feature using a Visual Studio Load test. Additionally, you will see how to scale a site using Azure Storage.

Goals

In this demo, you will see how to:

  1. Configure auto-scaling for a Web App using the Microsoft Azure portal
  2. Create and configure a load test project in Visual Studio
  3. Use Azure Storage to scale a web app

Key Technologies

Setup and Configuration

Follow these steps to setup your environment for the demo.

  1. Create a Azure Storage account (e.g. geekquiz), create a blob container named images and upload the logo-big.png image located inside the source\assets folder.

  2. Open the GeekQuiz.sln solution located under the source\end folder. Find the <system.webServer> element in the web.config file located in wwwroot and change the url of the Redirect action using the Azure Storage account you have just created.

    Updating the Rewrite Rule

    Updating the Rewrite Rule

  3. Open the GeekQuiz.sln solution located under the source\end folder in Visual Studio and publish it to a new (free) Azure Web App. In the Create App Service dialog box, select an existing Database server or create a new one.

    Create App Service dialog box

    Create App Service dialog box

    Note: Make sure to update the ConnectionString value located in the appsettings.json file with the connection string of your database before deploying.

  4. Register a new user account.

  5. Open the StressGeekQuiz.sln solution located under source\end.

  6. In the Solution Explorer, double-click WebTest1.webtest.

  7. Select the http://geekquizdemo.azurewebsites.net node, as shown in the following figure.

    Selecting the Loop child node

    Selecting the Loop child node

  8. In the Properties window, update the Url field to point to the site you just created.

    Changing the Url

    Changing the Url

  9. Save all files and close the solution.

Demo

This demo is composed of the following segments:

  1. Configuring auto-scaling
  2. Load testing with Visual Studio
  3. Scaling GeekQuiz using Azure Storage
  4. Auto-scaling result

Configuring auto-scaling

  1. Open the Azure Portal and log in with your credentials.

  2. Select the App Services tab and filter the list by your site name.

    filtering App Services

    Filtering App Services

  3. Click the app service where you deployed GeekQuiz during the setup steps.

  4. Open the App Service Plan blade.

    Opening the App Service Plan blade

    Opening the App Service Plan blade

  5. Openning

    Opening the Pricing tier blade

    Opening the App Service Plan blade

  6. Change the web app's pricing tier to S1 Standard.

    Changing the pricing tier

    Changing the pricing tier

  7. Show that there is only one instance.

    Showing that there is only one instance

    Showing that there is only one instance

  8. Select the CPU Percentage metric for scaling.

    Selecting the CPU metric for scaling

    Selecting the CPU Percentage metric for scaling

  9. Change the Instances to 1-3 and Target range to 5-25.

    Changing the CPU Percentage

    Changing the CPU Percentage

    Speaking point: Explain that this is done as we cannot ensure that a bigger load is generated with VS.

  10. Save the changes.

    Note: Don't close the management portal.

Load testing with Visual Studio

  1. Open the StressGeekQuiz.sln solution located under source\end.

  2. In the Solution Explorer, double-click LoadTest1.loadtest.

  3. Run the load test.

    Running the load test

    Running the load test

  4. Open a new instance of Visual Studio.

    Speaking point: Let's take a look at how that solution can be built.

  5. Open the New Project dialog.

  6. Select Test in the templates tree, and select Web Performance and Load Test project.

    Creating the new load test project

    Creating the new load test project

  7. Click OK.

  8. Right-click WebTest1 and select Add Request.

    Adding a request

    Adding a request

  9. Select the new node.

  10. In the Properties window, update the Url field to point to the Azure web app.

    Changing the Url property

    Changing the Url property

  11. Right-click WebTest1 and select Add Loop....

    Adding a loop

    Adding a loop

  12. Select the For Loop rule.

    Selecting the For Loop

    Selecting the For Loop

  13. Update the following values:

    1. Terminating value: 1000.
    2. Context Parameter Name: Iterator.
    3. Increment Value: 1.

    Updating the configuration values

    Updating the configuration values

  14. Select the GeekQuiz request as the first and last item of the loop.

    Selecting the items for the loop

    Selecting the items for the loop

  15. Click OK.

  16. In the Solution Explorer, right-click the WebAndLoadTestProject1 project, expand the Add menu and select Load Test.... A wizard will start.

    Adding a Load Test

    Adding a Load Test

  17. In the New Load Test Wizard dialog, click Next.

  18. Select Do not use think times and click Next.

    Selecting not to use Think times

    Selecting not to use Think times

  19. Change the User Count to 250 users and click Next.

    Changing the user count

    Changing the user count

  20. Select Based on sequential test order and click Next.

    Selecting the test mix model

    Selecting the test mix model

  21. Click Add....

  22. Double-click Web Test 1 and click OK.

    Adding the test

    Adding the test

  23. Click Next.

  24. In the Network Mix page, click Next.

  25. Select Internet Explorer 11.0 as the browser type and click Next.

    Selecting the Browser Type

    Selecting the Browser Type

  26. In the Counter Sets page, click Next.

  27. Set the load test duration to 10 minutes and click Finish.

    Setting the load test duration

    Setting the load test duration

  28. Close the current instance of Visual Studio.

Scaling GeekQuiz using Azure Storage

  1. Open Microsoft Edge.

  2. Navigate to the image that you uploaded to Azure Storage during setup. For example, if the name of the storage account is geekquiz the URL for the image will be http://geekquiz.blob.core.windows.net/images/logo-big.png.

    Showing the logo

    Showing the logo

  3. Open the GeekQuilz.sln solution located under source\end.

  4. Open the site's web.config file located at wwwroot for edition.

  5. Find the <system.webServer> element.

  6. Highlight the URL rewrite rule as shown in the following figure.

    Highlighting the Rewrite Rule

    Highlighting the Rewrite Rule

  7. Back in Microsoft Edge, open the deployed GeekQuiz site (log in if necessary).

    Showing the Geek Quiz website with the image

    Showing the Geek Quiz website with the image

  8. Press F12 to launch the development tools, select the Network tab and start recording.

    Starting the network recording

    Starting the network recording

  9. Press CTRL + F5 to refresh the web page.

  10. Once the page has finished loading, switch back to the development tools and show that the request for the image was redirected to Azure Storage.

    Showing the redirect in Dev Tools

    Showing the redirect in Dev Tools

Auto-scaling result

  1. Back in the management portal, press CTRL + F5 to refresh the page.

  2. Show that a new instance was automatically deployed.

    Showing that the new instance

    Showing that the new instance


Summary

By completing this demo you should have:

  1. Configured auto-scaling for a website using the Microsoft Azure portal
  2. Created a load test project in Visual Studio
  3. Used Azure Storage to scale the static content of a web site