,

Static Website Hosting in Azure Storage Account

Posted by

Static Website Hosting in an Azure Storage Account allows you to serve static content (HTML, CSS, JavaScript, images, etc.) directly from an Azure Storage container. This feature is useful for hosting simple websites without the need for a web server.

Key Features:

  1. Scalability: Azure Storage automatically scales to meet your needs.
  2. Cost-Effective: Hosting a static website in Azure Storage is often cheaper than using a traditional web server.
  3. Global Availability: Content can be distributed globally using Azure CDN to improve performance.
  4. Easy Configuration: Simple to set up and manage via the Azure portal, Azure CLI, or Azure PowerShell.

Steps to Enable Static Website Hosting:

  1. Create a Storage Account:
    • Go to the Azure Portal: portal.azure.com
    • Navigate to “Create a resource” > “Storage” > “Storage account”.
    • Fill in the required details such as Subscription, Resource group, Storage account name, Region, and Performance.
    • Click “Review + create” and then “Create”.
  2. Enable Static Website Hosting:
    • Go to your storage account in the Azure Portal.
    • In the left-hand menu, select “Static website” under the “Data management” section.
    • Click on “Enabled”.
    • Specify the index document name (e.g., index.html) and an optional error document path (e.g., 404.html).
    • Click “Save”.
  3. Upload Content:
    • Navigate to the “Containers” section in your storage account.
    • Click on the $web container (automatically created when you enable static website hosting).
    • Upload your static website files (HTML, CSS, JS, images, etc.) to the $web container.
  4. Access Your Static Website:
    • After uploading the files, you can access your static website using the primary endpoint provided in the “Static website” section of your storage account (e.g., https://yourstorageaccountname.z20.web.core.windows.net/).

Example:

  1. Create a Storage Account:
    • Subscription: Select your Azure subscription.
    • Resource Group: Create a new resource group named StaticWebsiteRG.
    • Storage Account Name: Enter a unique name, e.g., mystaticwebsiteaccount.
    • Region: Select a region, e.g., East US.
  2. Enable Static Website Hosting:
    • Navigate to your storage account (mystaticwebsiteaccount).
    • Select “Static website” and enable it.
    • Index document name: index.html
    • Error document path: 404.html
    • Click “Save”.
  3. Upload Content:
    • Go to the “Containers” section and open the $web container.
    • Upload index.html, style.css, script.js, and any images you need.
  4. Access Your Website:
    • Visit the primary endpoint, e.g., https://mystaticwebsiteaccount.z20.web.core.windows.net/.

Example Configuration Using Azure CLI:

Create a Storage Account:

    az storage account create --name mystaticwebsiteaccount --resource-group StaticWebsiteRG --location eastus --sku Standard_LRS
    

    Enable Static Website Hosting:

    az storage blob service-properties update --account-name mystaticwebsiteaccount --static-website --404-document 404.html --index-document index.html
    

    Upload Content:

    az storage blob upload-batch --account-name mystaticwebsiteaccount -s ./mywebsite --destination '$web'
    

    Get Static Website URL:

    az storage account show --name mystaticwebsiteaccount --resource-group StaticWebsiteRG --query "primaryEndpoints.web" --output tsv
    

    This will return the URL for your static website.

    Benefits of Static Website Hosting in Azure Storage:

    1. Scalability: Automatically handles large amounts of traffic without the need for additional infrastructure.
    2. Cost-Effectiveness: Only pay for the storage and bandwidth you use.
    3. Simplicity: Easy to set up and maintain.
    4. Security: Provides options for secure access using Shared Access Signatures (SAS) and integrates with Azure CDN for additional security and performance enhancements.

    guest
    0 Comments
    Inline Feedbacks
    View all comments
    0
    Would love your thoughts, please comment.x
    ()
    x