Activity Overview: In this graded activity, students will learn how to publicly host web-content via two alternative methodologies. Students will host a static website directly via storage, and a server-less application.

Activity Outcomes: After completing this activity will be able to

• Demonstrate configuration of storage accounts
• Demonstrate configuration of server-less applications
• Demonstrate web-hosting principles

Deliverable: Upload all requested screenshots below, as a .pdf export from the editor of your choosing.

Naming convention: “lastnamefirstinitial_Activity#.pdf” e.g: “smithp_A1.1.pdf”

Be sure to include your name, student number, and course (CNW-2511) at the top of your document.

Hosting Web Content in Azure

Part of the advantage in hosting an environment on a Cloud platform is the ease of access to resources from anywhere in the world. In order to leverage this advantage, organizations must provide publicly-accessible web content in a highly-available, scalable, yet cost-efficient manner. Technicians must be familiar with many of these deployment models, along with the various methods to implement them.

Utilizing a Command-Line Interface (CLI) is often preferable to a Graphical User Interface (GUI) in a production environment. Provisioning, automation, and configuration become far more efficient when a technician can perform tasks in this way.

Follow this link to log in to the Azure Portal. Virtual Machines (and many other billed resources), must be disabled/deleted via the Azure dashboard to prevent continuous billing. Shutting down a VM within the OS will not disable them.

After you have completed this activity, you will delete all created resources, then verify with screenshots.

Do not create any resources unless you are specifically requested to. This runs a very high risk of your student account credits ($100 cap) being spent in their entirety, at which point you will no longer be able to access any of the resources required for this course, and future courses.

In this lab, you will be provisioning:

• One (1) Resource Group
• One (1) Storage Account
• One (1) Storage Blob
• One (1) App Service Plan
• One (1) App Service

As you progress through this activity, your instructor may request that you capture a screenshot periodically (on Mac OS: “command+shift+3” to capture the whole screen, or “command+shift+4” then drag the cursor over the area you would like to capture). These screenshots are part of your required deliverable and will be graded.

Please attend or view Live Lecture (Week 3 Part 1) when available for the latest walkthrough. It is important to understand Cloud Service Provider (CSP) platforms change frequently, so the available recording here may look differently than what you see. You are welcome to use your best judgement to navigate any differences, or wait until the Live Lecture recording becomes available for further elaboration.

Host a Static Website via Storage

1. Create a new Resource Group
   1. Region: East US 2
   2. Name: CNW-WEB
2. Create a new Storage Account
   1. Resource Group: CNW-WEB
   2. Storage Acct Name: “firstinitiallastname”web
   3. Location: East US 2
   4. Performance: Standard
   5. Account Kind: StorageV2
   6. Replication: Locally Redundant (LRS) or no redundancy, if available
   7. Access-Tier: Standard (Whichever option is least expensive, this is considered Cool storage)
      
3. Create a Static Website from within the Storage Account
   1. In the sidebar, under “Data Management” click “Static Website”
   2. Click “Enabled”
   3. Index Document Name: “index.html”
   4. Note the Primary Endpoint URL (this is the public URL to access your static website)
   5. Access “$web” container and upload “index.html” (download the .zip below and extract)
   6. Leave upload blob setting as their defaults
4. Access your static website via the Endpoint URL (great color, huh!?) – screenshot
5. Return to to “Data Management > Static Website” and click “$web” to access the container
6. Click “Index.html” then select “Edit Blob”
7. On line 19, change the “bgcolor” Hex value to “FFFF00” (yellow) and click “Save” – screenshot
8. Access your website URL to see the changes (you may need to reload a few times)

• 1 KB

Host a Website via Server-less App

1. Create an App Service Plan
   1. Name: “firstinitiallastname“web
   2. Resource Group: CNW-WEB
   3. OS: Windows
   4. Location: Central US
   5. Pricing Tier: F1 Free
2. Create an App Service
   1. Name: cnw1″firstinitiallastname“
   2. Resource Group: CNW-WEB
   3. App Service Plan: The plan you just created (should be selected by default)
   4. Application Insights: Disabled
   5. OS: Windows
   6. Runtime Stack: .NET Core 2.1 (or the nearest version if 2.1 is not available)
3. Configure App Service to display static website
   1. Navigate to your storage blob website
   2. Right click on the page, and select “View Page Source”
   3. Select all (cmd+a), then copy (cmd+c)
   4. Navigate back to your App Service
   5. In the sidebar, select “Development Tools > App Service Editor”
   6. Click “Go”
   7. Select “WWWROOT > hostingstart.html”
   8. Select all (cmd+a), then paste the copied html from step C
   9. On line 19 or 20, change the “bgcolor” hex value to “F00200” (red)
   10. Navigate to the App Service’s public URL (which can be found on the overview page) – it should be “cnw1firstinitallastname.azurewebsites.net”

Required Screenshots

The following screenshots should show the configurations identified in lab, for each component:

1. Storage Account
   1. Overview page
   2. Static Website page
2. Browser displaying the blob-hosted website (purple) – be sure to capture the entire browser window
3. Browser displaying the blob-hosted website (yellow) – be sure to capture the entire browser window.
4. App Service Plan Overview page
5. App Services
   1. Overview page
   2. App Services Editor displaying HTML for the hosted website
6. Browser displaying the App Services-hosted website (red) – be sure to capture the entire browser window
7. All Resources page showing that all resources have been completely deleted (it should be empty)

There should be 9 individual screenshots.