Introductie

  • 4 minuten

Scenario

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

De site en API's moeten beveiligd zijn om de privacy van klanten te garanderen. Uw gebruikers worden over de hele wereld gedistribueerd en u wilt dat iedereen geweldige prestaties heeft. U geeft de voorkeur aan een oplossing die veel werk aan infrastructuur wegneemt, zodat u zo snel mogelijk kunt bouwen en publiceren, zodat u zich kunt richten op functies en gebruikerservaring.

U kunt uw webassets implementeren in cloudopslag, uw eigen SSL-certificaat maken en toewijzen, uw API maken in een cloudserver, een omgekeerde proxy opzetten waardoor uw app de API kan aanroepen, de app wereldwijd distribueren en uw eigen CI/CD-proces kunnen opzetten.

Wanneer u Azure Static Web Apps gebruikt, krijgt u dit allemaal.

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 (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.

Screenshot showing the Static Apps overview.

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 dus met of zonder een API hosten.

In de oefeningen van deze module implementeert u een app met behulp van uw favoriete webframework.

Notitie

In deze module implementeert u een app zonder een API. Zie de sectie Volgende stappen in de laatste eenheid voor informatie over de volgende module, waar u een API naast uw app implementeert.

Belangrijkste functies

  • Wereldwijd gedistribueerde webhosting brengt statische inhoud, zoals HTML, CSS, JavaScript en afbeeldingen dichter bij uw gebruikers
  • Geïntegreerde API-ondersteuning door Azure Functions
  • Eersteklas GitHub- en Azure DevOps-integratie waarbij opslagplaatswijzigingen builds en implementaties activeren.
  • Gratis SSL-certificaten die automatisch worden vernieuwd
  • Unieke preview-URL's voor het bekijken van voorbeelden van pull-aanvragen

Leerdoelen

In deze module maakt, wijzigt en implementeert u een web-app 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 varianten 'gewoon werken'.

De starterscode bevat de vier apps die u gaat gebruiken.

├ angular-app  👈 The Angular client 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:

  • Uw front-end-toepassing bouwen en uitvoeren.
  • Automatisch uw web-app bouwen en implementeren naar Azure vanuit een GitHub-opslagplaats met GitHub Actions.
  • Als laatste gaat u uw toepassing verkennen en starten, en wel als volgt.

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.