Cloud Vendor | Microsoft Azure |
Proficiency Level | Cloud Enthusiast |
Tags | Azure StorageStorage BlobWeb Server |
Summary
In this lab, you will provision a Microsoft Azure Storage Account and create a static website in it. You will upload static web pages and images to the storage blob that is used for the static web site and will test that the content is served properly.
Each exercise below builds upon the previous one. You should start each new exercise from the last step of the previous exercise unless it is explicitly written otherwise.
Learning Objectives
After completion of this lab, you will be able to:
- Provision an Azure Storage Account
- Create a static website in the newly provisioned Azure Storage Account
- Upload content to the static website
- Test the static web site
- Delete the Storage Account
Prerequisites
To complete this lab, you will need the following:
- Reliable internet connection
- A work, school or personal Microsoft Account used to access Microsoft Azure Management Portal
- A subscription for Microsoft Azure
Exercise #1: Creating Azure Storage Account
In this exercise, you will provision a Microsoft Azure Storage Account.
Steps
- Sign into the Microsoft Azure Management Portal at http://portal.azure.com using your Microsoft Account
- Click on
in the upper left corner right under the logo
- In the search box search for Storage account and press Enter
- Click on the
button
- On the Basics tab in section, Project Details fill in the following information
Subscription →<select your Microsoft Azure subscription>
Resource group →Create new
Resource group name (the text field in the pop up) →storagelab01-rg
- On the Basics tab in section, Instance Details fill in the following information
Storage account name →[first name][last name initial]lab01str
Region →West US 2
Performance →Standard
Account kind →StorageV2 (general purpose V2)
Replication →Locally-redundant storage (LRS)
Access tier →Hot
- Click on the
button
- On the Networking tab in section, Network connectivity fill in the following information
Connectivity method →Public endpoint (all networks)
- Click on the
button
- On the Advanced tab, leave everything as default
- Click on the
button
- On the Tags tab, add the following tags:
Role →static web
Lab →storagelab01
Owner →<your name>
OwnerEmail →<your email>
- Click on the
button
- Review the summary and click on the
button
- Wait until the deployment is completed
- Once the deployment is completed, click on
in the left-hand menu list
storagelab01-rg
resource group in the list and click on it
the - Milestone step: At this point, you have learned how to provision a Storage Account in Microsoft Azure. Verify that you have the following resources in your
storagelab01-rg
resource group:
[first name][last name initial]lab01str
Storage account
Exercise #2: Create a Static Website in Azure Storage Account
In this exercise, you will create a Storage Blob Container that you can use to host a static web site.
- Click on the
[first name][last name initial]lab01str
Storage Account resource - From the Overview blade, click on the
button in the left side navigation for the Storage Account
- On the Static website blade, change the Static website toggle button to
Enabled
- Fill in the following information in the form that appears
Index document name →index.html
Error document path →error.html
- Click on the
button
- Milestone step: At this point, you have learned how to create a static web site in your Storage Account in Microsoft Azure.
- Click on the
button next to the Primary endpoint field
- Open a new browser window and paste the copied URL into the address bar
- Milestone step: At this point, you have learned how to access the static web site you created in your Storage Account by using your browser.
Exercise #3: Upload Content to the Static Website in Azure Storage Account
In this exercise, you will upload content to the static website.
- Create a new file on your local machine with name
index.html
and the following content<!DOCTYPE html> <html> <head> <title>Welcome to Azure Storage</title> </head> <body> <h1>My Static Website</h1> <p>Hello, I am a static web site hosted in Azure Storage.</p> </body> </html>
- Create a new file on your local machine with name
error.html
and the following content<!DOCTYPE html> <html> <head> <title>Ooops... error!</title> </head> <body> <h1>An error occured</h1> <p>Ooops, it seems that we encountered an error or you are trying to access the wrong page.</p> </body> </html>
- Take a screenshot of the text editor you used to create the above two files and save it on your local machine with the following name
ide-screenshot.png
- Click on the
button in the left side navigation for the Storage Account
- Click on the
$web
container - Click on the
button on top of the blade
- Click on the
button next to the Files field on the Upload blob blade
- Select the
index.html
,error.html
, andide-screenshot.png
files from your local machine and click on thebutton
- Milestone step: At this point, you have learned how to upload content to the static web site in your Storage Account in Microsoft Azure.
- Click on the
toddysmlab01str - Containers
in the breadcrumbs on top of the page - Click on the
button in the left side navigation for the Storage Account
- Click on the
button next to the Primary endpoint field
- Open a new browser window and paste the copied URL into the address bar
- Milestone step: At this point, you have learned how to access the home page of the static web site you created in your Storage Account by using your browser.
- Add the following to the end of the URL in your browser’s address bar and click Enter
/foo
- Milestone step: At this point, you have learned how to the static web site you created in your Storage Account handles errors.
- Remove the
/foo
from the URL in your browser’s address bar and add the following
/ide-screenshot.png
Click Enter. - Milestone step: At this point, you have learned how to the static web site you created in your Storage Account can handle other static content like images.
Exercise #4: Delete the Azure Storage Account
In this exercise, you will delete the Azure Storage Account to save costs.
- Click on the
toddysmlab01str
in the breadcrumbs on top of the page - Click on the
button on top of the page
- Type the name of the Storage Account in the field and click on the
button
- Milestone step: At this point, you have learned how to delete your Storage Account to save cost.
Last Update: October 8, 2019
You must be logged in to post a comment.