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.

Wanneer u de app bouwt, zijn uw eerste zorgen dat uw app en API veilig worden gehost, wereldwijd beschikbaar zijn en automatisch worden gepubliceerd. In plaats van een webserver in te stellen en te configureren om deze problemen af te handelen, besluit u een hostingoplossing te gebruiken die uw assets en API eenvoudig bedient, zonder veel installatie of configuratie.

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 WebAssembly-frameworks zoals Blazor- en JavaScript-frameworks en -bibliotheken. Deze apps omvatten de HTML-, CSS-, JavaScript- en afbeeldingsactiva waaruit de toepassing bestaat. Onder een traditionele webserverarchitectuur worden deze bestanden geleverd vanaf één server naast de 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. Deze distributie maakt het leveren van bestanden sneller omdat bestanden zich fysiek dichter bij eindgebruikers bevinden. API-eindpunten worden gehost met een serverloze architectuur, waardoor een volledige back-end-server niet langer noodzakelijk is.

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

Diagram met het 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 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 die builds en implementaties activeert bij elke wijziging in de opslagplaats.
  • Gratis SSL-certificaten die automatisch worden verlengd.
  • Unieke preview-URL's voor het bekijken van voorbeelden van pull-aanvragen

Leerdoelen

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

Deze module biedt een voorbeeld van een Blazor-toepassing en een API die is geschreven in C#.

Wat u gaat doen

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

  1. Bouw en voer uw Blazor-toepassing uit.
  2. Maak uw API met Azure Functions.
  3. Wijzig uw web-app om HTTP-aanvragen naar uw API te verzenden.
  4. Automatisch uw web-app bouwen en implementeren naar Azure vanuit een GitHub-opslagplaats met GitHub Actions.
  5. Ten slotte verkent en start u uw toepassing.

Een set van vier schermopnamen die de vier voorbeeldtoepassingen illustreren.

Volgende stappen

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