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 op te bouwen om al deze problemen af te handelen, besluit u een hostingoplossing te gebruiken die uw assets en API eenvoudig dient, 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 bibliotheken en frameworks, zoals Angular, React, Svelte, of Vue. Deze apps omvatten de HTML-, CSS-, JavaScript- en afbeeldingsactiva waaruit de toepassing bestaat. In een traditionele webserverarchitectuur worden deze bestanden geleverd vanaf één server naast alle 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 (optioneel) 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 showing the static Apps overview model.

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. Wanneer u doorvoeringen pusht of pull-aanvragen maakt in de bewaakte vertakking, bouwt en implementeert de werkstroom automatisch uw app en de BIJBEHORENDE API in Azure.

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 wijzigingen in gitHub- en Azure DevOps-integratie in de builds en implementaties van uw opslagplaatstriggers.
  • Gratis SSL-certificaten die automatisch worden verlengd.
  • Unieke preview-URL's voor het bekijken van pull-aanvragen.

Leerdoelen

In deze module maakt, wijzigt en implementeert u een web-app en API 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 starterscode bevat de vier apps en het beginpunt voor een API die u later gebruikt.

├ angular-app  👈 The Angular client app
├ api-starter  👈 The API starter app. You use this later.
├ 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 heeft gekozen, gaat u het volgende doen:

  1. Automatisch uw web-app bouwen en implementeren naar Azure vanuit een GitHub-opslagplaats met GitHub Actions.
  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, zoals wordt weergegeven in de volgende afbeelding.

A screenshot illustrating the angular sample application.

A screenshot illustrating the react sample application.

A screenshot illustrating the svelte sample application.

A screenshot illustrating the vue sample application.

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.