Esta semana la empiezo con otro artículo más sobre cómo automatizar despliegues en máquinas virtuales en Azure a base de scripting. En este caso lo que necesitaba era desplegar mi frontal de Tour of heroes, en Angular, en una máquina Windows Server con IIS. En este artículo te cuento cómo.

Variables

Para este ejemplo he utilizado las siguientes variables para poder desplegar la máquina:

RESOURCE_GROUP="tour-of-heroes-on-vms"
LOCATION="uksouth"
VM_SIZE="Standard_B2s"
# VNET variables
VNET_NAME="tour-of-heroes-vnet"
VNET_ADDRESS_PREFIX=192.168.0.0/16
FRONTEND_SUBNET_NAME="frontend-subnet"
FRONTEND_SUBNET_ADDRESS_PREFIX=192.168.3.0/24
# Frontend VM on Azure
FRONTEND_VM_NAME="frontend-vm"
FRONTEND_VM_IMAGE="MicrosoftWindowsServer:WindowsServer:2022-Datacenter:latest"
FRONTEND_VM_ADMIN_USERNAME="frontendadmin"
FRONTEND_VM_ADMIN_PASSWORD="fr0nt#nd@dmin123"
FRONTEND_VM_NSG_NAME="frontend-vm-nsg"

Este ejemplo utiliza como base de datos un SQL Server y una API en .NET, de las cuales ya te hablé en el artículo anterior. Si quieres desplegar esta máquina virtual en una red nueva puedes hacerlo a través de este comando:

echo -e "Creating resource group $RESOURCE_GROUP in $LOCATION"
az group create \
--name $RESOURCE_GROUP \
--location $LOCATION
az network vnet create \
--resource-group $RESOURCE_GROUP \
--name $VNET_NAME \
--address-prefixes $VNET_ADDRESS_PREFIX \
--subnet-name $FRONTEND_SUBNET_NAME \
--subnet-prefixes $FRONTEND_SUBNET_ADDRESS_PREFIX

Crear la máquina virtual Windows

Una vez que tienes el grupo de recursos y la red desplegada ya puedes crear la máquina virtual:

echo -e "Create a frontend vm named $FRONTEND_VM_NAME with image $FRONTEND_VM_IMAGE"
FQDN_FRONTEND_VM=$(az vm create \
--resource-group $RESOURCE_GROUP \
--name $FRONTEND_VM_NAME \
--image $FRONTEND_VM_IMAGE \
--admin-username $FRONTEND_VM_ADMIN_USERNAME \
--admin-password $FRONTEND_VM_ADMIN_PASSWORD \
--vnet-name $VNET_NAME \
--subnet $FRONTEND_SUBNET_NAME \
--public-ip-address-dns-name tour-of-heroes-frontend-vm \
--nsg $FRONTEND_VM_NSG_NAME \
--size $VM_SIZE --query "fqdns" -o tsv)
echo -e "Frontend vm created with FQDN $FQDN_FRONTEND_VM"
az network nsg rule create \
--resource-group $RESOURCE_GROUP \
--nsg-name $FRONTEND_VM_NSG_NAME \
--name AllowHttp \
--priority 1002 \
--destination-port-ranges 80 \
--direction Inbound
az network nsg rule create \
--resource-group $RESOURCE_GROUP \
--nsg-name $FRONTEND_VM_NSG_NAME \
--name Allow8080 \
--priority 1003 \
--destination-port-ranges 8080 \
--direction Inbound
echo -e "Execute script to install IIS and deploy tour-of-heroes-angular SPA"
az vm run-command invoke \
--resource-group $RESOURCE_GROUP \
--name $FRONTEND_VM_NAME \
--command-id RunPowerShellScript \
--scripts @scripts/install-tour-of-heroes-angular.ps1 \
--parameters "api_url=http://$FQDN_API_VM/api/hero" "release_url=https://github.com/0GiS0/tour-of-heroes-angular/releases/download/1.1.4/dist.zip"

Como puedes ver, creo la máquina virtual con las variables que te mostré al inicio de este artículo y después habilito tanto el puerto 80, para que puedas ver que el IIS está funcionando correctamente (solo como check), como el 8080 el cual será el que esté a la escucha de esta aplicación. Por último ejecuto un script en PowerShell que acondiciona este IIS para hospedar la aplicación en Angular:

param(
    [string]$release_url,
    [string]$api_url
)
Write-Output "Install IIS on the frontend vm"
Install-WindowsFeature -name Web-Server -IncludeManagementTools
Write-Output "Download URL Rewrite Module"
Invoke-WebRequest -Uri "https://www.microsoft.com/web/handlers/webpi.ashx?command=getinstallerredirect&appid=urlrewrite2" -OutFile C:\Temp\urlrewrite2.exe
Write-Output "Install URL Rewrite Module"
C:\Temp\urlrewrite2.exe /install /quiet
Write-Output "Create a folder for the frontend app"
mkdir $env:systemdrive\inetpub\wwwroot\frontend
Write-Output "Download the last release of the frontend app from github"
Invoke-WebRequest -Uri $release_url -OutFile C:\Temp\dist.zip
Write-Output "Unzip the frontend app in the folder"
Expand-Archive -Path C:\Temp\dist.zip -DestinationPath C:\inetpub\wwwroot\frontend
Write-Output "Replace environment variables like envsubst in linux"
((Get-Content -path C:\inetpub\wwwroot\frontend\assets\env.template.js -Raw) -replace ([regex]::Escape('${API_URL}')), $api_url) | Set-Content -Path C:\inetpub\wwwroot\frontend\assets\env.js
 
Write-Output "Create a new website in IIS"
New-IISSite -Name "TourOfHeroesAngular" -BindingInformation "*:8080:" -PhysicalPath "$env:systemdrive\inetpub\wwwroot\frontend"
Write-Output "Create an aplication inside the new site"
New-WebApplication -Name "TourOfHeroesAngular" -Site "TourOfHeroesAngular" -ApplicationPool "TourOfHeroesAngular" -PhysicalPath "$env:systemdrive\inetpub\wwwroot\frontend"
Write-Output "Enable 8080 port in the firewall"
New-NetFirewallRule -DisplayName "Allow 8080" -Direction Inbound -LocalPort 8080 -Protocol TCP -Action Allow

¡Saludos!