Menu

Virtual Geek

Tales from real IT system administrators world and non-production environment

Host static website on Azure Storage Account

Microsoft Azure Storage Account blob can be used as serverless web server to host static website pages, Static website content includes files pages from HTML, CSS, JavaScript and image files. Website files and data is stored on Storage Account special container named $web. This enables and gives you the feature of hosting your website content on Azure Storage account as Serverless architecture example to interact with Azure functions and other PAAS services (Platform as a service). Azure Storage Account static website is great option for hosting in case you don't want a web server.

In my earlier article How to create a Storage Account in Microsoft Azure my Azure Storage Account is already setup and ready to use. Go to the storage accounts view and click on the Storage where you want it to serve as static website.

Microsoft Storage Accounts azure csv storagev2 create new storage account container blobs windows microsoft cloud storage table queue file share smb3 nfs.png

This is the overview page of storage account, It is configured with default settings example StorageV2 (general purpose v2), replication type locally-redundant storage (LRS) and etc.

Microsoft Azure Storage Account diagnose and solve problems iam access control data migration storage explorer containers file shares networking cdn shared access signature security data protection geo-replication.png

From the left side navigation pane select Static Website under Data management node. Enabling static websites on the blob service allows you to host static content. Webpages may include static content and client-side scripts. Server-side scripting is not supported. As data is replicated asynchronously from primary to secondary regions. files at the secondary endpoint may not be immediately available or in sync with files at the primary endpoint.

After enabling static website,  Primary endpoint is the website can be accessed via this region-specific web endpoint. It is different from the blob storage endpoint which you use to upload new content. Index document name is the name of the webpage that Azure Storage returns when a request is made to the root of the website or any subfolder. Error document path is path of the 404 document. The document will be displayed when Azure Storage returns a 404 error.

You can see it created a special $web folder you can go to the container by clicking it.

Microsoft Azure Windows Storage Account enable static website blob service host static website client-side scripts index.html primary endpoint.png

Under Data Storage >> Containers navigation pane you can see $web container folder is listed. You need to upload your static web content files on this folder.

Microsoft Azure windows containers azure storage accounts blob files shares queues tables networking cdn access keys shared access signature encryption security static website host $web.png

To upload the web pages I have taken help of Storage Explorer (preview) option. Expanded Blob Container >> $web. Click Upload blob button, choose the files and click Upload button. It will list the summary what files are uploaded to blob. Upload cannot be used on folder so I have created New Folder and remaining files uploaded there. Instead you can use AzCopy tool to copy folder recursively. 

AzCopy copy transfer fails with 403 This request is not authorized to perform this operation using this permission
Azure azcopy login error Selected user account does not exist in tenant 'Microsoft Services' and cannot access the application '579a7132-0e58-4d80-b1e1-7a1e2d337859'

Microsoft azure storage account storage explorer preview containers blob file shares queues tables networking azure CDN access keys shared access signature host static website $web upload blob.png

To access the web site hosted on storage account use Primary Endpoint url on browser which start with https://<StorateAccountName>.z13.web.core.windows.net to test static website.

Microsoft Azure storage account host a static website web.core.windows.net virtual machines inventory website virtual network backup storage account charts containers blobs file shares.png

Useful Articles
Part 1: Create and deploy a website with Microsoft Azure web app service plan
Part 2: Configure a custom domain in Azure Web Apps
Part 3: Uploading to Azure Web Apps Using FTP
Part 4: Add and manage TLS SSL certificates on Azure Web App
PART 1 : MICROSOFT AZURE CREATION AND CONFIGURATION OF VPN TUNNEL SERIES
PART 2 : MICROSOFT AZURE CREATING RESOURCE GROUP 
PART 3 : MICROSOFT AZURE CREATING AND ADMINISTERING VIRTUAL NETWORK (VNET) 
PART 3.1 : MICROSOFT AZURE POWERSHELL CREATING AND ADMINISTERING VIRTUAL NETWORK (VNET)
PART 4 : MICROSOFT AZURE CREATING AND ADMINISTRATING LOCAL NETWORK GATEWAY VPN
PART 4.1 : MICROSOFT AZURE POWERSHELL CREATING AND ADMINISTRATING LOCAL NETWORK GATEWAY 

Go Back

Comment

Blog Search

Page Views

11240767

Follow me on Blogarama