Skip to content
IT // Adventures

Migration to the Astro Framework #2: Azure

Setting up Azure Static Web Apps for my Astro blog.

1 min read
Contents

Overview

In part 2 of my article series on migrating my blog to Astro, I take a closer look at the Azure resources I use as “infrastructure” for Astro.

Here are the links to the other articles in this series:

  1. Part: Basics, GitHub Repository
  2. Part: Azure Static Web App and Azure DNS
  3. Part: Astro
  4. Part: Tailwind CSS

Azure resources

The hosting platform for the Astro site in Azure is the Azure Static Web Apps service in the free “Free” tier for personal projects. Terraform serves as the IaC tool to configure the resources.

A resource group is the “logical container” for our web app:

resource "azurerm_resource_group" "astro" {
  name     = "rg-soltari-web01"
  location = "West Europe"
}

The domain soltari.at for my blog is also hosted in Azure as a DNS zone and is included in Terraform as a data source:

data "azurerm_dns_zone" "main" {
  name                = "soltari.at"
  resource_group_name = "BaseInfastructureWEu"
}

Static Web App

The “Static Web App” is a very simple resource with few properties:

resource "azurerm_static_web_app" "astro" {
  name                = "soltari-astro"
  resource_group_name = "BaseInfastructureWEu"
  location            = "West Europe"

  sku_size = "Free"
  sku_tier = "Free"
}

Then we can link our own DNS domain to the web app. For this there is the Terraform resource azurerm_static_web_app_custom_domain. I create two ‘custom domain’ entries: one for soltari.at (apex) and a second one for www.soltari.at.

The apex domain can only be validated via TXT validation. To do so, we first create the corresponding DNS records…

resource "azurerm_dns_txt_record" "apex_validation" {
  name                = "_dnsauth"
  zone_name           = "soltari.at"
  resource_group_name = data.azurerm_dns_zone.main.resource_group_name
  ttl                 = 300
  record {
    value = azurerm_static_web_app_custom_domain.apex.validation_token
  }
}

resource "azurerm_dns_cname_record" "apex" {
  name                = "@"
  zone_name           = "soltari.at"
  resource_group_name = data.azurerm_dns_zone.main.resource_group_name
  ttl                 = 300
  record              = azurerm_static_web_app.astro.default_host_name
}

resource "azurerm_static_web_app_custom_domain" "apex" {
  static_web_app_id = azurerm_static_web_app.astro.id
  domain_name       = "soltari.at"
  validation_type   = "dns-txt-token"
}

… and then the custom domains of the Static Web App:

resource "azurerm_static_web_app_custom_domain" "apex" {
  static_web_app_id = azurerm_static_web_app.astro.id
  domain_name       = "soltari.at"
  validation_type   = "dns-txt-token"
}

resource "azurerm_static_web_app_custom_domain" "www" {
  static_web_app_id = azurerm_static_web_app.astro.id
  domain_name       = "www.soltari.at"
  validation_type   = "cname-delegation"
}

GitHub Actions

For automatic deployment of the site I use a GitHub Actions workflow. Details are described in Build configuration for Azure Static Web Apps, so I only show an excerpt with the Astro-specific configuration of the workflow:

- name: Build And Deploy
  id: builddeploy
  uses: Azure/static-web-apps-deploy@v1
  with:
    action: 'upload'
    app_location: '/' # Astro source code path
    output_location: '/dist' # Astro build output path

Next article

Continue with Migration to the Astro Framework Part 3 for the Astro web framework.