Setup von Azure Static Web Apps für mein Astro-Blog.

Migration zum Astro Framework #2: Azure


Übersicht

In Teil 2 meiner Artikelserie zur Migration meines Blog zu Astro gehe ich näher auf die Azure-Ressourcen ein, die ich als “Infrastruktur” für Astro verwendet.

Hier noch die Links zu den anderen Artikeln dieser Serie:

  1. Teil: Basics, GitHub Repository
  2. Teil: AzureStatic Web App und Azure DNS
  3. Teil: Astro
  4. Teil: Tailwind CSS

Azure Ressourcen

Als Hosting-Plattform für die Astro Site in Azure dient der Azure Static Web Apps service im kostenlosen “Free” tier für persönliche Projekte. Terraform dient als IaC Tool zum Konfigurieren der Ressourcen.

Eine Resource Group ist der “logische Container” für unsere Web App:

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

Die Domain soltari.at für mein Blog ist ebenfalls in Azure als DNS zone gehosted und wird in Terraform als Datenquelle eingebunden:

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

Static Web App

Die “Static Web App” ist eine sehr einfache Ressource mit wenigen Eigenschaften:

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

  sku_size = "Free"
  sku_tier = "Free"
}

Anschließend können wir unsere eigene DNS Domäne mit der Web App verknüpfen. Dazu gibt es die Terraform Ressource azurerm_static_web_app_custom_domain. Ich erstelle zwei ‘Custom Domain’ Einträge: Einen für soltari.at (Apex) und einen Zweiten www.soltari.at.

Die Apex-Domain kann nur via TXT validation geprüft werden. Dazu legen wir zuerst die entsprechenden DNS-Einträge an…

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"
}

… und anschließend die Custom Domains der 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

Für ein automatisches Deployment der Site nutze ich einen GitHub Actions Workflow. Details dazu sind unter Build configuration for Azure Static Web Apps beschrieben, daher führe ich nur einen Ausschnitt die für Astro spezifische Konfiguration des Workflow an:

- 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

Nächster Artikel

Weiter geht’s in Migration zum Astro Framework Teil 3 mit dem Astro web framework.