I Built a Website That Fails Over from AWS to Azure: A Terraform Walkthrough (and Every Error I Hit)

aws_azure_multicloud_deployment_terraforms/ ├── .gitignore ├── README.md ├── docs/ architecture.png, troubleshooting.md, screenshots/ ├── website/ index.html, script.js, styles.css, assets/ └── terraform/ ├── .terraform.lock.hcl (commit this) ├── versions.tf providers.tf variables.tf outputs.tf ├── aws_s3.tf aws_cloudfront.tf azure_storage.tf dns_failover.tf ├── terraform.tfvars.example (commit) └── terraform.tfvars (NEVER commit) 

.terraform/ *.tfstate *.tfstate.* terraform.tfvars secrets/ .env 

terraform version aws --version az version 

aws configure --profile weather $env:AWS_PROFILE = "weather" aws sts get-caller-identity 

az login $env:ARM_SUBSCRIPTION_ID = (az account show --query id -o tsv) az provider register --namespace Microsoft.Storage --wait az provider show --namespace Microsoft.Storage --query registrationState -o tsv 

terraform { required_version = ">= 1.5" required_providers { aws = { source = "hashicorp/aws" version = ">= 5.0" } azurerm = { source = "hashicorp/azurerm" # Pin the MAJOR version you actually installed (check: terraform version). # Unpinned, a new major release changed resource syntax under me. version = "~> 5.0" } } } 

# Providers for the multi-cloud deployment. # AWS hosts the S3 and CloudFront primary site, while Azure hosts the failover website. provider "aws" { region = var.aws_region } provider "azurerm" { features {} } # CloudFront certificates must be requested in us-east-1 because CloudFront is a global service. provider "aws" { alias = "us_east_1" region = "us-east-1" } 

# Shared configuration values used across the AWS and Azure deployment resources. # These values control the target regions, regional naming constraints, custom-domain setup, # and the Route53 health check used for failover. variable "aws_region" { description = "AWS region for the S3 bucket." type = string default = "eu-north-1" } variable "bucket_name" { description = "Globally unique S3 bucket name for the website." type = string } variable "azure_location" { description = "Azure region for the resource group and storage account." type = string default = "North Europe" } variable "azure_storage_account_name" { description = "Globally unique Azure storage account name (3-24 chars, lowercase letters and digits only)." type = string validation { condition = can(regex("^[a-z0-9]{3,24}$", var.azure_storage_account_name)) error_message = "Use 3-24 characters: lowercase letters and digits only, no hyphens." } } variable "domain_name" { description = "Your registered domain, without www." type = string } variable "website_config_filename" { description = "Website config file to upload: config.js.example or your local config.js." type = string default = "config.js.example" validation { condition = contains(["config.js", "config.js.example"], var.website_config_filename) error_message = "Set website_config_filename to either config.js or config.js.example." } } variable "enable_custom_domain" { description = "Stage switch: false = default CloudFront certificate, true = www custom domain with ACM certificate." type = bool default = false } variable "primary_health_check_path" { description = "Path the primary health check requests. Use a missing path to simulate an AWS outage." type = string default = "/" } 

aws_region = "eu-north-1" bucket_name = "weather-tracker-<name>-<4digits>" azure_storage_account_name = "weather<name><4digits>" domain_name = "<your-domain>" enable_custom_domain = false 

# AWS S3 hosts the primary static website used by CloudFront. # This file creates the public website bucket, enables website hosting, and uploads the # static frontend files with the correct content types for browsers to render them properly. locals { # Keep the website root files explicit; assets are discovered recursively below. site_dir = "${path.module}/../website" config_js_path = "${local.site_dir}/${var.website_config_filename}" site_files = { "index.html" = "text/html" "styles.css" = "text/css" "script.js" = "application/javascript" "config.js" = "application/javascript" } site_file_sources = { for name in keys(local.site_files) : name => name == "config.js" ? local.config_js_path : "${local.site_dir}/${name}" } # Common static asset types; unknown extensions fall back to binary content. mime_types = { png = "image/png" jpg = "image/jpeg" jpeg = "image/jpeg" gif = "image/gif" svg = "image/svg+xml" webp = "image/webp" ico = "image/x-icon" } } # Create the S3 bucket that hosts the static website content. resource "aws_s3_bucket" "weather_app" { bucket = var.bucket_name } # Configure the bucket as a static website so it exposes the index document at the public endpoint. resource "aws_s3_bucket_website_configuration" "site" { bucket = aws_s3_bucket.weather_app.id index_document { suffix = "index.html" } } # Allow public reads required for a static website served from S3. resource "aws_s3_bucket_public_access_block" "public_access" { bucket = aws_s3_bucket.weather_app.id block_public_acls = false block_public_policy = false ignore_public_acls = false restrict_public_buckets = false } # Grant anonymous visitors read access to website objects without requiring AWS credentials. resource "aws_s3_bucket_policy" "public_read" { bucket = aws_s3_bucket.weather_app.id depends_on = [aws_s3_bucket_public_access_block.public_access] policy = jsonencode({ Version = "2012-10-17" Statement = [{ Sid = "PublicReadGetObject" Effect = "Allow" Principal = "*" Action = "s3:GetObject" Resource = "${aws_s3_bucket.weather_app.arn}/*" }] }) } # Upload the main HTML, CSS, and JavaScript files with the correct MIME types. resource "aws_s3_object" "site_files" { for_each = local.site_files bucket = aws_s3_bucket.weather_app.id key = each.key source = local.site_file_sources[each.key] etag = filemd5(local.site_file_sources[each.key]) content_type = each.value } # Upload static assets under website/assets while keeping the same relative path structure. resource "aws_s3_object" "site_assets" { for_each = fileset("${local.site_dir}/assets", "**") bucket = aws_s3_bucket.weather_app.id key = "assets/${each.value}" source = "${local.site_dir}/assets/${each.value}" etag = filemd5("${local.site_dir}/assets/${each.value}") # Derive the file extension from each path so nested assets also receive a correct MIME type. content_type = lookup(local.mime_types, lower(reverse(split(".", each.value))[0]), "application/octet-stream") } 

cd <project>\terraform terraform init terraform validate terraform plan terraform apply aws s3 ls s3://<bucket>/ --recursive 

# Azure Blob Storage hosts the secondary site used during Route53 failover. # This configuration enables static website hosting and uploads the built site files into the # Azure-managed "$web" container that serves the application. resource "azurerm_resource_group" "rg" { name = "rg-weather-static-website" location = var.azure_location } resource "azurerm_storage_account" "storage" { name = var.azure_storage_account_name resource_group_name = azurerm_resource_group.rg.name location = azurerm_resource_group.rg.location account_tier = "Standard" account_replication_type = "LRS" account_kind = "StorageV2" # Static website hosting and public traffic are enabled for the failover endpoint. public_network_access = "Enabled" custom_domain { name = "www.${var.domain_name}" use_subdomain = true # indirect (asverify) validation } depends_on = [aws_route53_record.azure_asverify] } # Enabling static website hosting creates the special "$web" container that serves the site. resource "azurerm_storage_account_static_website" "site" { storage_account_id = azurerm_storage_account.storage.id index_document = "index.html" } locals { # Resource Manager ID of the Azure-managed "$web" container used for static hosting. web_container_id = "${azurerm_storage_account.storage.id}/blobServices/default/containers/$web" } resource "azurerm_storage_blob" "site_files" { for_each = local.site_files name = each.key storage_container_id = local.web_container_id type = "Block" content_type = each.value source = local.site_file_sources[each.key] content_md5 = filemd5(local.site_file_sources[each.key]) depends_on = [azurerm_storage_account_static_website.site] } resource "azurerm_storage_blob" "site_assets" { for_each = fileset("${local.site_dir}/assets", "**") name = "assets/${each.value}" storage_container_id = local.web_container_id type = "Block" content_type = lookup(local.mime_types, lower(reverse(split(".", each.value))[0]), "application/octet-stream") source = "${local.site_dir}/assets/${each.value}" content_md5 = filemd5("${local.site_dir}/assets/${each.value}") depends_on = [azurerm_storage_account_static_website.site] } 

terraform init -upgrade terraform validate terraform plan terraform apply terraform output azure_website_url 

# CloudFront distribution for the static website. # This layer serves the site globally over HTTPS, caches static content at the edge, # and optionally uses a custom domain certificate when the domain is enabled. resource "aws_cloudfront_distribution" "site" { enabled = true default_root_object = "index.html" price_class = "PriceClass_100" # Attach the custom domain only when the user has enabled domain hosting. aliases = var.enable_custom_domain ? ["www.${var.domain_name}"] : [] # The S3 website endpoint is configured for website hosting and only supports HTTP. # CloudFront therefore uses an HTTP origin connection while still serving HTTPS to viewers. origin { domain_name = aws_s3_bucket_website_configuration.site.website_endpoint origin_id = "s3-website" custom_orig...