🚀Day 6: Static Website Hosting on Azure Blob Storage

SRINIVAS TIRUNAHARISRINIVAS TIRUNAHARI
2 min read

Step1: Install and configure azure cli

Step2: Open git bash

Step3: Create a folder structure

mkdir static-web-demo
touch index.html 404.html provider.tf main.tf variables.tf terraform.tfvars outputs.tf

vi index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>welcome page</title>
  </head>
  <body>
    <h1>welcome to Azure DevOps</h1>
  </body>
</html>

vi 404.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>404 - Page not found</title>
  </head>
  <body>
    <h1>404 - Page not found</h1>
  </body>
</html>

vi provider.tf


provider "azurerm" {
  features {}
}

terraform {
  required_version = ">= 1.0"
  required_providers {
    azurerm = {
      source  = "hashicorp/azurerm"
      version = "~> 3.0"
    }
  }
}

vi main.tf

resource "azurerm_resource_group" "rg" {
  name     = var.resource_group_name
  location = var.location
}

resource "azurerm_storage_account" "storage" {
  name                     = var.storage_account_name
  resource_group_name      = azurerm_resource_group.rg.name
  location                 = azurerm_resource_group.rg.location
  account_tier             = "Standard"
  account_replication_type = "LRS"
  static_website {
    index_document = "index.html"
    error_404_document = "404.html"
  }
  tags = {
    environment = "Dev"
  }
}

resource "azurerm_storage_blob" "index_html" {
  name                   = "index.html"
  storage_account_name   = azurerm_storage_account.storage.name
  storage_container_name = "$web"
  type                   = "Block"
  source                 = "index.html"
  content_type           = "text/html"
}

resource "azurerm_storage_blob" "error_html" {
  name                   = "404.html"
  storage_account_name   = azurerm_storage_account.storage.name
  storage_container_name = "$web"
  type                   = "Block"
  source                 = "404.html"
  content_type           = "text/html"
}

vi variables.tf


variable "resource_group_name" {
  type        = string
  description = "Name of the resource group"
}

variable "location" {
  type        = string
  description = "Azure region"
  default     = "East US"
}

variable "storage_account_name" {
  type        = string
  description = "Name of the storage account (must be globally unique, lowercase only)"
}

vi terraform.tfvars

resource_group_name     = "my-rg-static-site"
location                = "East US"
storage_account_name    = "tirusite"

vi outputs.tf

output "static_website_url" {
  description = "URL of the static website"
  value       = azurerm_storage_account.storage.primary_web_endpoint
}

terraform init
terraform validate
terraform plan
terraform apply -auto-approve

Step4: Access URL https://tirusite.z13.web.core.windows.net/

You can see welcome page

Step5: Delete index and 404 page from $web

Step6: Upload any static html css website pages

Step7: Access same URL again to see new content

Step8: Destroy the resources

terraform destroy -auto-approve
0
Subscribe to my newsletter

Read articles from SRINIVAS TIRUNAHARI directly inside your inbox. Subscribe to the newsletter, and don't miss out.

AzureStatic WebsiteblobTerraformMicrosoft

Written by

SRINIVAS TIRUNAHARI
SRINIVAS TIRUNAHARI