Static Web Apps op Azure

Donderdag 27 mei 2021

Terug naar overzicht

De ontwikkelingen op het Azure platform gaan razendsnel. Momenteel zo snel dat we ons blog over het hosten van Angular Applicaties in App Services nog niet af hadden, of er deed zich alweer een betere optie voor in de vorm van Azure Static Web Apps.

Nu hebben we twee opties: het blog cancelen of voor jou de voor- en nadelen op een rijtje zetten van Static Web Apps. Wij kiezen uiteraard voor het laatste. Daarnaast laten we je zien hoe je ze inricht, een pipeline configureert in Azure Devops en een eigen domeinnaam koppelt.

Wat zijn Azure Static Web Apps?

Azure Static Web Apps zijn dé oplossing op Azure voor het hosten van een full-stack applicatie, bestaande uit een front-end (HTML, CSS, Javascript of Web Assembly en images) en Azure Functions als back-end. In dit blog richten wij ons op het hosten van de statische front-end.

Azure Static Web Apps bieden daarnaast nog een aantal voordelen:

Ondersteuning voor Blazor;
Automatisch schalen van de capaciteit & Pay as you Grow;
De mogelijkheid om een eigen domeinnaam in te stellen;
Een lokale CLI waarmee de online Static Web App omgeving lokaal kan worden gesimuleerd;
Build pipelines, vanuit zowel Azure DevOps als GitHub;
Integratie met authenticatieproviders zoals: Azure Active Directory, GitHub en Twitter;
Deployment naar verschillende fysieke regio's, waardoor de website snel benaderbaar is over de hele wereld.

Hoe kan een Angular Applicatie worden gedeployd als Azure Static Web App?

Goed, de voordelen staan op een rijtje. Maar hoe kan een Angular Applicatie op Azure Static Web Apps worden gehost, automatisch worden gedeployd vanaf Azure DevOps en hoe kan er een domeinnaam worden gekoppeld? Dat is hieronder te vinden. Veel van deze informatie is te vinden in de documentatie van Microsoft. Echter is de documentatie onoverzichtelijk verspreid in meerdere artikelen, maar gelukkig voor jou hier te vinden in eenvoudig overzicht:

1. Creëer een nieuwe Static Web App

In het Azure Portal zoek je op Static Web App. Je krijgt dan een overzicht van alle Static Web Apps waar jij toegang tot hebt. Klik hier op “+ Add”.

De eerste velden spreken voor zichzelf, hier is het belangrijk dat je de juiste subscription met de juiste resource group selecteert. In het derde veld wordt de naam van de applicatie ingevuld. Bij de “deployment details” kies je in het geval van Azure DevOps voor “Other”

Hostplan

Voor het hostplan beveelt Microsoft het “Free plan” alleen aan voor hobbyprojecten en om te testen. Voor applicaties in productie wordt het “Standard plan” aanbevolen. In de deze tabel worden de verschillen nog verder toegelicht:

https://azure.microsoft.com/en-us/pricing/details/app-service/static/

2. Inrichten pipeline in Azure DevOps

Bij Covadis wordt Azure DevOps gebruikt als CI/CD-oplossing. In deze stap richten we de pipeline in, zodat de Applicatie automatisch wordt gedeployd als er een commit wordt gedaan op de master branch.

In Azure Devops ga je naar het project dat je wilt deployen en klik je op “Pipelines”, klik hier op “Create Pipeline”. In de eerste stap selecteer je waar de code van de Web Applicatie staat, in ons geval “Azure Repos Git”. In de volgende stap kies je de repository, wij kiezen hier voor “StaticWebAppTest”. In de “Configure” stap kies je voor “Starter pipeline”.

In Azure DevOps klik je op Pipelines in het project dat je wilt deployen. In het pipeline-scherm klik je op “Create Pipeline”. In de eerste stap kies je de plek waar de code staat die moet worden gedeployd, in ons geval “Azure Repos Git”, In de volgende stap kies je de juiste git repository en in de derde stap kies je voor “Starter Pipeline”. Dan zie je een standaard YAML-bestand, dat moet uiteindelijk het script hiernaast worden.

In de eerste stappen wordt de Angular Applicatie gebuild en in de tweede stap wordt het overgezet naar de Static Web App. Let goed op dat de app_location afhankelijk is van de build-configuratie van de Angular Applicatie. Dit is standaard /dist/{Angular Applicatienaam} in een keba-case (spaties gescheiden door een “-” teken) notatie.

De laatste stap voor de pipeline-configuratie is het configureren van het “deployment_token”. Dit moet in hetzelfde scherm als waar de YAML-code staat. Klik rechtsboven op de knop variabelen en maak hier de variabele “deployment_token” aan.

Je kan het deployment_token ophalen in het Azure Portal door de volgende stappen te volgen. In de Static Web App klik je op “Manage deployment token”. De waarde die in het volgende scherm staat moet worden ingevuld bij de variabele in Azure DevOps, zo weet de pipeline waar de code naartoe moet worden gedeployd.

Wanneer er een commit wordt gedaan op de master branch start de pipeline automatisch en wordt de applicatie gebuild en gedeployd naar de Static Web App.

3. Koppelen van een custom domain

In de laatste stap van deze handleiding koppelen we een eigen domeinnaam aan de Static Web App. Om je eigen domeinnaam te koppelen moeten we zowel in het Azure Portal als bij je domeinnaamregistrar. Voor dit voorbeeld gebruiken we NameCheap. Er moeten twee records worden aangemaakt: een TXT-record en een CNAME-record.

Als eerste ga je naar het Custom domains scherm van je Static Web App in het Azure portal. Als eerste voegen we het CNAME-record toe:

Als eerste voer je de domeinnaam in, inclusief www ervoor. Dan klik je op “Next”.

In dit scherm kies je bij het “Hostname record type” voor CNAME. De value kopieer je naar je registrar.

Vervolgens voeren we dezelfde stappen uit, maar dan voor het TXT-record. Let op, het valideren van het TXT-record kan tot 12 uur duren.

Voer de URL in, dit maal zonder www ervoor.

Genereer een code en kopier deze naar je klembord, om hem vervolgens toe te voegen bij je registrar.

Uiteindelijk moet het resultaat in je domeinnaamregistrar er als volgt uitzien:

Als het TXT-record gevalideerd is moet de volgende applicatie online staan:

Na wat kleine aanpassingen aan de code, een commit en een push is dit het resultaat:

Conclusie

Zoals je ziet is het hosten van een Azure Static Web App redelijk eenvoudig. Op een simpele manier host je een applicatie die in meerdere fysieke regio’s wordt gehost, schaalt naar je verbruik en op een makkelijkere manier automatisch is de deployen. Een echte aanrader voor je (Angular) applicatie.