Azure Serverless Architectures: host a static website in Azure Storage

Azure Storage v2 accounts allow you to serve static content (HTML, CSS, JavaScript, and image files) directly from a storage container named $web. Taking advantage of hosting in Azure Storage allows you to use serverless architectures including Azure Functions and other PaaS services.

When you enable static website hosting on your storage account, you select the name of your default file and optionally provide a path to a custom 404 page. As the feature is enabled, a container named $web is created if it doesn’t already exist.

You can enable static website from the Azure CLI using this script:

#Parameters

param(
    [Parameter(Mandatory=$True, HelpMessage="Please specify the storage account name")][String]$Storage_Name_Web,
    [Parameter(Mandatory=$True, HelpMessage="Please specify the subscription ID")][String]$subscriptionId
)

#Connect to Azure
Connect-AzAccount

#Change the context to the Azure subscription
Set-AzContext -Subscription $subscriptionId

# Enable static website
az account set --subscription $subscriptionId
az storage blob service-properties update --account-name $Storage_Name_Web --static-website --404-document "404.html" --index-document "index.html"

Or you can enable static website from the Azure Portal:

To test the website, you can upload a sample html file to the blob storage. From the storage account, go to the blobs section and expand the $web container.

Upload a sample html file with the name “index.html”.

In my case the index.html contains a link to a picture:

<html>
  <body>
    <img src="blog.bmp">
  </body>
</html>

Now when you browse the blob storage endpoint, in my case
https://ranariwebstorage.z6.web.core.windows.net , you get the index.html:

Share this:

Like this:

Related