Inleiding

  • 2 minuten

Uw bedrijf gaat een boodschappenlijst-web-app lanceren. Via de site kunnen klanten items in hun lijst toevoegen, bewerken, bekijken en verwijderen.

Bij het bouwen van de app is het belangrijk dat uw app en API veilig worden gehost, wereldwijd beschikbaar zijn en automatisch worden gepubliceerd. In plaats van een webserver te bouwen om al deze kwesties af te handelen, besluit u te kiezen voor een hosting-oplossing die uw activa en API eenvoudig verwerkt, zonder dat hiervoor veel installatie of configuratie nodig is.

Wat is Azure Static Web Apps?

Met Azure Static Web Apps kunt u eenvoudig dit soort lastige problemen oplossen, van broncode tot aan wereldwijde beschikbaarheid.

Terwijl u zich blijft concentreren op het ontwikkelen van uw app, bouwt en host Azure Static Web Apps deze automatisch vanuit GitHub of Azure DevOps.

Statische web-apps worden vaak gebouwd met behulp van bibliotheken en frameworks, zoals Angular, React, Svelte, of Vue. Deze apps omvatten de HTML-, CSS-, JavaScript- en afbeeldingsactiva waaruit de toepassing bestaat. Bij gebruik van een traditionele webserver-architectuur worden deze bestanden vanaf één server verwerkt, samen met eventuele vereiste API-eindpunten.

Met Azure Static Web Apps worden statische activa van een traditionele webserver gescheiden en worden ze in plaats daarvan verwerkt vanuit verschillende punten over de hele wereld. Op deze manier kunnen bestanden veel sneller worden verwerkt omdat bestanden zich fysiek dichter bij gebruikers bevinden. API-eindpunten, die optioneel zijn, worden gehost met behulp van een serverloze architectuur, waardoor de noodzaak voor een volledige back-endserver helemaal niet nodig is.

Het model voor Azure Static Web Apps is dat u precies krijgt wat u nodig hebt, niet meer, niet minder.

Overzicht van Static Apps.

Wanneer u een Azure Static Web Apps-resource maakt, stelt Azure een GitHub Actions- of Azure DevOps-werkstroom in de broncodeopslagplaats van de app in. Met de werkstroom kunt u een vertakking naar keuze controleren. Telkens wanneer u doorvoeringen pusht of pull-aanvragen maakt in de gevolgde vertakking, wordt uw app en de BIJBEHORENDE API automatisch in Azure gebouwd en geïmplementeerd in de werkstroom.

Azure host en verwerkt uw web-app. Azure Functions stuurt de API-functionaliteit van de back-end aan, die automatisch kan worden in- en uitgeschaald op basis van de vraag.

Optionele API's

Azure Static Web Apps is ideaal voor het leveren van uitsluitend statische inhoud, maar biedt ook een fantastische ondersteuning voor statische web-apps waarvoor ondersteunende API's nodig zijn. U kunt uw statische web-app met of zonder API hosten.

Azure host en verwerkt uw web-app terwijl Azure Functions API-functionaliteit van de back-end aanstuurt, die automatisch kan worden in- en uitgeschaald op basis van de vraag naar de API.

Belangrijkste functies

  • Wereldwijd gedistribueerde webhosting plaatst statische inhoud zoals HTML, CSS, JavaScript en afbeeldingen dichter bij uw gebruikers.
  • Ondersteuning voor Geïntegreerde API geboden in Azure Functions.
  • Eersteklas GitHub- en Azure DevOps-integratie waarbij opslagplaatswijzigingen builds en implementaties activeren.
  • Gratis SSL-certificaten die automatisch worden verlengd.
  • Unieke preview-URL's voor het bekijken van pull-aanvragen.
  • Ingebouwde verificatie met meerdere providers.

Leerdoelen

In deze module maakt, wijzigt en implementeert u een web-app en API met gebruikersverificatie in Azure Static Web Apps.

Kies uw eigen pad

Deze module biedt vier variaties van de voorbeeldtoepassing waaruit u kunt kiezen: Angular, React, Svelte en Vue. De kracht van Azure Static Web Apps is dat al deze smaken gewoon werken.

De startercode omvat de vier apps en het startpunt voor een API die u gaat gebruiken.

├ angular-app  👈 The Angular client app
├ api          👈 The API server app
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

Wat u gaat doen

Nadat u uw clienttoepassing hebt gekozen, gaat u het volgende doen:

  • Bouw en implementeer automatisch uw web-app en API in Azure vanuit een GitHub-opslagplaats met GitHub Actions.
  • Wijzig uw web-app om aanmeldings- en afmeldingsknoppen toe te voegen en informatie weer te geven over de huidige aangemelde gebruiker.
  • Wijzig uw web-app en API om niet-geverifieerde gebruikers te blokkeren en alleen specifieke verificatieproviders toe te staan.
  • Als laatste gaat u uw toepassing verkennen en starten, en wel als volgt.

Een schermopname van de voorbeeldtoepassing Angular.

Een schermopname van de react-voorbeeldtoepassing.

Een schermopname die de voorbeeldtoepassing van svelte illustreert.

Een schermopname van de vue-voorbeeldtoepassing.

Volgende stappen

Op dit moment denkt u misschien dat u eerst de Azure-resources moet maken, maar Azure Static Web Apps heeft uw dagelijkse werkstroom in gedachten. Het is beter om eerst te beginnen met de code in GitHub voordat u resources in Azure maakt.